![Cibor](/_next/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F119964%2F612x200%2F5892ce41fe%2Fcibor-w.png&w=1920&q=75)
![Cibor](https://assets.iodigital.com/f/119964/1921x1921/b5bf318ddc/cibor_1.png/m/800x800)
Case
The life of Progressive Web Apps (PWAs) started in 2015. They promised to close the gap between web and native apps by progressively enhancing current web apps with new API’s and features like the ability to work completely offline. While big players like AliExpress, Flipkart and Forbes have introduced PWAs in the past, they still have their apps and are not planning on abandoning them anytime soon. Did the technology come to a halt? Are PWAs still relevant? Should you still invest time and effort in creating and maintaining PWAs?
A PWA is an app built with web technology like HTML, CSS and JavaScript, but with a feel and functionality that can rival a native mobile app. To create a PWA, you start with a website or web-app and apply best practises like:
A secure connection (HTTPS): A secure connection is mandatory for a PWA. Not just for security reasons, it’s also a very important trust factor for users.
A service worker: A service worker is a separate JavaScript that runs in the background. The service worker can intercept requests to and responses from the internet. This gives the service worker the means to act as a proxy. Instead of a network failure, an offline page can be returned or a cached version of the resource can be used and updated in the background giving the user the best possible experience.
A web manifest: This file contains information on how the PWA should appear and behave. The name, description, icons, and colours amongst others are set in the manifest and used in the launcher and overview windows of the device.
These techniques won’t transform a badly performing web app into a super snappy native like app, but they do help overcome some shortcomings of the classic web app.
Around 2017, big players like Flipkart, Trivago, Forbes, MakeMyTrip, AliExpress and Twitter have shared impressive results when it comes to user engagement using PWAs.
Flipkart adopted an app-only strategy and even shut down their mobile website. After the introduction of PWAs, they decided to rethink that approach. Combining their web presence and native app into a PWA was successful in many ways:
Users time on site PWA versus prior: 3.5 minutes versus 70 seconds.
Tripling of average user engagement
40% higher re-engagement rate
70% more conversions from “home screen icon”
Three times less data consumption
MakeMyTrip is one of the leading travel companies in Asia. It connects with travel enthusiasts for booking tour packages, flight tickets and hotel accommodations across several cities and nations. The company found it hard to drive users to download a native app, leading to steep drop rates and invariably high customer acquisition costs, but also to building engaging user experience for the mobile web. To reach the audience they wanted, the company needed a solution that merged the benefits of native apps and the mobile web so they could lower the cost of discovery and increase engagement rates.
Tripling of conversion rate
38% improvement in page load times
160% increase of shopper sessions
Twitter implemented PWAs by developing Twitter Lite. It consumes far less data and relies on the cache as much as it can. The PWA transition also gave its users the choice to join the social platform without downloading their huge 82 MB native app. Twitter Lite is almost negligible in size (just around 1 MB), but is still delivering a user experience comparable to the native app.
65% increase in pages per session
75% increase in tweets sent
20% decrease in bounce rate
Most of the success stories above are a few years old. But what has happened to PWAs in the meantime? Why isn’t everything a PWA by now? Let’s look at the Gartner Hype Cycle to answer those questions.
The life of PWAs started in 2015 and the success stories and hype peaked in 2017, but it wasn’t until 2018 that Apple (and thus Safari, iOS and iPad OS) and Microsoft completed the implementation for the service worker.
Since a PWA is a web app, they do not require separate bundling and distribution. There is no requirement for developers or users to install the PWA via app stores like Apple App Store, Google Play, the Microsoft Store or Samsung Galaxy Store. Some of these do support PWAs, allowing them to be found in these app stores. Google play store uses a bridge in the form of TWA (Trusted Web Activity) to link the web app to a google play app, but Apple has no support at all.
Since Apple is such a big player in the mobile world, this attitude towards PWA has slowed down adaptation to a near halt. If you want iOS support, you need to provide an app to the Apple App Store complying to their guidelines and rules.
Although technically most of the PWA standards are now implemented in Safari for iOS and iPad OS, it’s still missing a lot of features needed for a native like app. One of these is the ability to receive push notifications, even if the app is closed. Safari for Mac has a proprietary implementation, while Safari for iOS and iPad OS completely lack the ability.
Firefox for desktop abandoned the implementation of PWAs in December 2020 stating that PWA support is not coming to desktop Firefox anytime soon. Mozilla still supports PWAs on Android, though.
Google’s Project Fugu is an effort to close current gaps between the web’s capabilities and those of native apps by extending the browser with these features. Since Fugu is a Google project, all browsers and operating systems where Google has an influence benefit from these efforts. Android, Chrome OS, Windows and even MacOS if a chromium-based browser is used, which include Microsoft Edge, Samsung Internet Browser and Chrome. iOS and iPad OS fully rely on Apple to add and implement the features. The previously mentioned Push Notifications, but also NFC, background sync and badge support is highly doubtful. Whether Mozilla will add the features added by project Fugu remains to be seen. But given their statement regarding PWA support on the desktop, the future does not seem all too bright for full cross vendor support of these features. For an actual overview refer to https://fugu-tracker.web.app/.
Cross platform development like Cordova, Capacitor and React Native bundle the power of web technology with the power of native apps and their deep integration into the underlying OS. Cordova and Capacitor can even use the same web app base as the PWA and extend its features with native bindings.
Cordova/Capacitor vs. React Native
The main difference between Cordova/Capacitor and React Native is that React Native compiles the UI of an app to native code, while the business rules are still run in a JavaScript runtime. Having a pure native UI gives the best user experience on that device by utilizing native UI elements and their accessibility integrations.
If the UI is rendered using a web view, it needs to implement the OS specific elements and behaviours itself instead of having the OS take care of that. The result is most of the time a bit underwhelming, since it takes a lot of time and effort to implement all the underlying user experience related features like pull-to-refresh or endless lists. A native-like UI library like Ionic helps to fill these gaps, but this gives a mobile experience on a desktop grade computer as well.
The best practices that a PWA brings should always be considered when creating a new web app. Secure connection, controllable network behaviour and the web manifest that describes how the web app will behave if installed are valuable additions to most if not all web apps.
What if the target audience is mostly iOS and iPad OS? What if various features introduced to the browser by Project Fugu are needed? What if App Store presence is required for a successful product?
Some APIs available to native app development aren’t even available to the browser or rely on third party software only available as native libraries. These are all valid cases where a PWA isn’t a viable solution. Sometimes, a (companion) website is needed. That website is an excellent candidate for implementing the PWA best practises.
But what if your target audience is mostly web or Android? What if you can use web technology that is supported by various vendors? In those cases, a PWA can save a lot of time and money by only having to build and maintain that PWA instead of a website and separate native apps.
Google is introducing new APIs and features to Chromium faster than developers can implement them. Those developers are also a bit reluctant to implement the feature if it is only supported by Chromium based browsers and it remains unclear if Apple changes its view on web and PWAs any time soon.
A first sign of having push notifications in iOS and iPad OS have been spotted, but it’s too soon and it’s only push notifications. Technology like PWAs is beautiful but it’s only viable if everyone can enjoy it. For now, its success depends on the adaptation of the OS vendors.
The best practises that a PWA brings should always be considered when creating a new web app. Secure connection, controllable network behaviour and the web manifest that describes how the web app will behave if installed are valuable additions to most if not all web apps.
Apple is a big player in the mobile world with a negative attitude towards PWA. This has slowed down adaptation to a near halt. If you want iOS support, you need to provide an app to the Apple App Store complying to their guidelines and rules.
There are valid cases where a PWA isn’t a viable solution. In some of those cases there is a need for a (companion) website. That website is an excellent candidate for implementing the PWA best practises. But in all other cases, a PWA can save a lot of time and money by only having to build and maintain that PWA instead of a website and separate native apps.