How to Take Advantage of Making a Flutter PWA

    In this article, you’ll learn about all the pros and cons you need to keep in mind when you launch a progressive web app (PWA). Here, we’ll share our experience of trying out Flutter Web on one of our banking clients, as we went over all the potential pitfalls and saw for ourselves that creating a progressive web app with Flutter is an effective and handy solution.

    Curious to know why Y Combinator startups and Société Générale bank choose Flutter?
    Read more

    What is a progressive web app and how does it work?

    A Progressive Web Application (PWA) is a technology that transforms a website into an app both visually and functionally. This can then be viewed in a browser or installed on a smartphone just like a regular mobile app. 

    PWAs are picking up steam in the worldwide market, and rightfully so, because thanks to them, business owners don’t have to spend millions and millions on mobile development. You can introduce the audience to your digital product with the help of a web version. According to Web Almanac, the top 3 PWA industries are “Business & Industrial”, “Arts & Entertainment”, and “Home & Garden”.


    PWA success stories

    PWA development is already used by numerous large companies. Here are some PWA use cases. 

    In addition to their mobile app, Starbucks built a PWA for orders. While they have almost identical capabilities, the size of a PWA turned out to be 99.84 % less, which made it more popular among the users. The number of orders doubled and nearly reached the number of desktop orders.

    AliExpress boosted conversion rates for new users by 104%. PWA functionality has also helped the largest retailer generate twice as many page views per visit. Meanwhile, the time of a visit increased by 74% on average.

    Uber created a progressive web app to make booking a car accessible on low-speed networks. Thanks to its native interface, the PWA sends requests for a quick ride no matter the location, Internet speed, or performance of a device. The web app takes up as little as 50KB and takes 3 seconds to install, even with 2G.

    Pinterest found out that only 1% of their mobile users convert into a target action: registration, logging in, or installing the app. After the PWA was developed and rolled out, the time spent on the social network grew (by 40%), and so did the income from ads created by the users.

    Spotify and getting round sanctions. Due to certain disagreements between the streaming service and the App Store, Spotify took to developing a PWA version of the app. It actually turned out to be considerably faster, thanks to its adaptive UI. Users can add Spotify PWA to their smartphone’s main screen, making this version of the app accessible and indistinguishable from the regular app.

    MakeMyTrip is the largest travel agency in India with over 8 million MAUs on its website. Making the progresive web app tripled conversion rates and boosted page speed by 38%.

    Weekendesk is a travel service from France. In order to increase the number of room reservations, they suggest installing a web app as soon as you open the second page. The clients that reach checkout via a PWA icon are twice as likely to book rooms.

    PWA under the hood

    Many people, however, still have a lot of fears and worries about creating a progressive web app, and rightfully so: after all, before you try something new, you have to understand what complications and restraints are waiting for you along the way. Let’s clear it up.

    PWAs consist of two components:

    • Service Worker is the layer between the app and the external servers. It defines the strategies and which strategy should be applied to which resource.
    • App Manifest is a JSON file that is linked to the HTML page of an app. It defines the way the web app looks and the way it will behave when installed.

    PWAs are run in browsers and are supported by:

    • OSs: Android, iOS, macOS, Linux, Windows, Chrome OS;
    • Browsers: Chrome, Safari, Firefox, Edge, Samsung Internet.

    Such apps can:

    • work offline,
    • work in the background,
    • gain access to the OS capabilities of a smartphone,
    • send push notifications,
    • get updates, bypassing the stores;
    • get launched via an icon (a shortcut) on the main screen of a smartphone.

    Benefits & disadvantages of progressive web apps

    Creating a progressive web app pros are:

    • Independent from the stores. You don’t need to publish PWAs in application stores — users can find them in their browsers and install a shortcut on their smartphones. That way, you can save on expenses since you’re not publishing and promoting the app in stores and get around moderation policies.
    • Saves space on the smartphone. One of the reasons why users refuse to download an app is because it’s too big. A regular app is 20 to 50MB on average, while a web app is under 1 MB.
    • Saves traffic. Since you don’t need to install the entire web app, you don’t need to waste your traffic on it either. It works in a mobile browser, which requires much less Internet traffic.
    • Loads quickly. On average, PWAs take less than 1 second to load.
    • Works without the Internet. Thanks to caching, PWAs are autonomous from the Internet.
    • Flexible. Web apps work on all available operating systems and in any browser.
    • Familiar. A web app shortcut looks exactly the same as the familiar icon of a mobile app.

    Creating a progressive web app cons are:

    • Familiar functionalities are pretty skimpy. PWAs don’t use all the functions of a device. And the ones they do use, sadly, only work on some OSs. For example, on iOS they can not access Bluetooth or contactless payment. 
    • Complicated distribution. Since such apps are not in the stores, it’s pretty unlikely that a user might come across one by chance. Your clients must knowingly go to your website and only then add the app to their device. 
    • Lower performance compared to custom apps. Native and cross-platform apps have much better performance compared to PWAs. 
    • They don’t really get along with Apple. The features you can recreate in PWAs aren’t always available on iOS. Our table below shows how many Android and iOS capabilities can be supported by PWAs.

    PWA pundits also point out the fact that PWAs can’t be integrated with the features we’re so used to.

    Find out how we use a single codebase to develop apps both for Android & iOS and what results our clients get.
    Read out case studies

    Cons of PWAs on iOS:

    • A PWA can only store 50MB of data and files—it’s the amount of space allotted to static caching (js, html, css, images). Data can be stored in IndexedDB where the limits are not as strict and depend on the storage size—500 МB for 1 GB of free space and more.
    • If a PWA hasn’t been used for several weeks, iOS resets local storage. What it means is that the data will be initialized and downloaded to the cache via the Internet once again. Even though the shortcut will still be on the main screen, once it’s pressed, the PWA will be downloaded again. And if the user is somewhere where there’s no stable Internet connection, it may cause problems.
    • You can’t access Bluetooth, the sequential port, beaconing, Touch ID, Face ID, the altitude sensor, or battery data. Some of it, you can get around with web permissions (such as Face ID and Touch ID, now available on iOS 14). But each permission requires a user permission — there’s no asking for all of them at once. You need to know exactly which permissions you’re going to need to tell what you’ll be able or unable to use exactly.
    • PWAs on iOS can’t work in the background.
    • No access to the phone book.
    • No push notifications.
    • No integration with Siri.

    Cons of PWAs on Android:

    • Geofencing is unavailable. So far, none of the vendors has implemented an API that makes it available. Nevertheless, Google Chrome is working on an experimental concept that may cover some of the aspects of geofencing—notification triggers based on geolocation.
    • No proximity sensors. The Proximity Events API grants web apps access to data from the proximity sensors by identifying potential physical objects in close proximity to the device. However, this specification hasn’t been implemented yet.
    • No adaptive backlight. Android doesn’t yet give access to illumination data usually provided by the camera sensor. The first attempt at supporting the light sensor was implemented in Firefox as early as in 2013. An experimental solution was implemented in Google Chrome in the section of additional classes of common sensors.

    What can you write a PWA on?

    Any web framework. For example, the updated Flutter 3.0 is just the tool you need: you can now use a single code base to create mobile apps and their web and desktop versions. Read further to learn more reasons to choose the framework and find out how to create a progressive web app in Flutter easily.

    Why Flutter for PWA development

    With Flutter, you can tackle three digital distribution channels, mobile, web and desktop apps, all in one go. Using a single technology will reduce the amount of energy and money spent and reduce the risks. 

    Why does using Flutter for web, desktop and mobile apps spell profit for business?

    Because up to 80–95% of the code base can be reused on other platforms. You’ll only need to adapt the platform features and the UX. That being said, they’ll still use fewer resources than building a project from scratch.

    • Such projects are easier to support.
    • You’ll need fewer developers for your PWA, hence, you can slim the budget (by 40% on average).
    • It’s easier to test. The code is checked once for all the platforms.
    • Support and communication become more transparent. The project is in the hands of a close-knit team of experts with overlapping competencies.
    • A project built on Flutter can quickly be compiled into a PWA and back again.

    Our experience developing a PWA on Flutter Web

    To get a detailed picture of PWA as a technology and the ways to implement a progressive web app with Flutter, we did an experiment and migrated a finished Flutter app initially developed for mobile platforms to a PWA. It was a banking app—one of our real-life projects.

    Project specifics: 

    • the app is very big and has all the necessary functionalities,
    • complies with our internal standards of Flutter development,
    • may be sanctioned, meaning it’s a perfect candidate for the experiment.

    Since the app is pretty sizeable, in our study, we used several of its main screens:

    Onboarding and authorization

    The home screen with available cards, deposits, and accounts

    As we went about the project, we saw for ourselves that Flutter actually does almost all the work of building a web app for you. However, that doesn’t mean that you don’t have to debug it and address the errors that come up as you switch onto the web platform. 

    Curious to learn more? Here are popular questions about creating progressive web apps with Flutter:

    Question No. 1. How to install a PWA?

    Answer: You need to visit the website on your smartphone, and as soon as it’s downloaded, you’ll see a shortcut on the main screen of your smartphone. In order for the browser to offer installing a PWA, it has to be quick to load and quick to function. A Flutter PWA is well-optimized and shows great results, including the amount of time a user spends on the website and the conversion rate. 

    Question No. 2. How do I know I’m inside a PWA?

    Answer: User-wise, it’s almost indistinguishable from a regular mobile app. Except that they usually install apps from a store, while a PWA is installed directly from the website by adding a shortcut to the screen.

    At Surf, we’ve been working with mobile technologies for over 12 years. For over 3.5 years, we’ve been working with Flutter, and we know for a fact that it’s a great fit for projects of all sizes and all kinds of domains.

    However, while we were busy as a mobile development company, PWA has grown and gotten stronger. We’ve tried transferring one of our projects into the web and the attempt turned out pretty successful, showing us that Flutter is now a perfect match for not only mobile but also web apps, and PWAs in particular.