Progressive Web App with Flutter: Why It Is a Great Benefit for Your Business
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 with Flutter. Here, we’ll share our experience in using Flutter Web to show how we went over all the potential pitfalls to get convinced that a Flutter-powered PWA is an effective and handy solution.
We developed with Flutter a concept for a 3-in-1 universal banking app that works for mobile, web, and desktop. You may check the details here.
What is a progressive web app and how does it work?
A 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. You can develop such apps with various tech stacks but we will concentrate on Flutter as one of our primary fields.
Progressive web apps 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
The technology is already used by numerous large companies.
In addition to their mobile app, Starbucks built a progressive web app for orders. While they have almost identical capabilities, the size of the app 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%. The app 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 application 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 the Spotify app 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 progressive 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.
Why choose Flutter for PWA development
With the regularly updated Flutter you can use a single code base to create mobile apps and their web and desktop versions.
This means, you can tackle three digital distribution channels 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 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 progressive web app, 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.
Developing a PWA on Flutter Web at Surf
We migrated a ready Flutter app initially developed for mobile platforms to a progressive web app. 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.
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. 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.
The technology 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.
Progressive web apps 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 app looks and the way it will behave when installed.
Progressive web applications run in browsers and are supported by:
- OSs: Android, iOS, macOS, Linux, Windows, Chrome OS;
- Browsers: Chrome, Safari, Firefox, Edge, Samsung Internet.
They 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
Pros:
- 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 complete 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, such applications take less than 1 second to load.
- Works without the Internet. Thanks to caching, they are autonomous from the Internet.
- Flexible. They work on all available operating systems and in any browser.
- Familiar. The app shortcut looks exactly the same as the familiar icon of a mobile app.
Cons:
- Familiar functionalities are pretty skimpy. The apps 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 this type.
- They don’t really get along with Apple. Not all features are always available on iOS. Our table below shows how many Android and iOS capabilities can be supported.
Cons for iOS:
- The app 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 the app 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 for 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.
Curious to learn more? Here are popular questions about creating progressive web apps with Flutter:
Question No. 1. How to install a progressive web app?
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 installation, 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 progressive web app is installed directly from the website by adding a shortcut to the screen.
