Contact us
Get started
Blog

The state of progressive web applications: March 2021 edition

By  
Kavish Weerawardane
Kavish Weerawardane
·
On Jul 15, 2020 9:02:14 AM
·

PWAVaadin, along with major technology firms, such as Microsoft and Google, have been championing progressive web applications for several years now.

Last updated on March 30, 2021.

A lot has changed in the PWA ecosystem over the last few months. For this reason, we decided to release this “state of progressive web applications” post, that will allow us to track and compile the major developments in the sphere—and help you decide whether PWAs are right for your business.

In essence, a PWA merges the simple distribution model of a web app, with the feature-set, performance and UX of a native application—allowing businesses to develop, maintain and add features to a single codebase that runs on almost any platform.

We have a lot of great material about PWAs, if you are interested in learning more:

This blog post will be periodically updated as changes are introduced into the PWA landscape.

Google and Microsoft team up to further PWAs

Two of the strongest proponents of progressive web applications have teamed up to provide developers with a new, de facto way of packaging PWAs for app stores. A core promise of PWAs is frictionless access and distribution through web browsers, however, app-store packaging does have its uses for certain types of applications, as this method of distribution provides enhanced access to the OS, and greater monetization opportunities. Both companies push for easy PWA installation and uninstallation on the Windows 10 operating system.

Microsoft’s PWAbuilder (which incidentally uses the Vaadin router for its PWA starter project) allows developers to easily package PWAs for app stores. Google’s Bubblewrap tool does the same for the Google Play Store. 

PWAbuilder will now use Google Chrome Lab's Bubblewrap under the hood, according to a recent Medium post by Microsoft’s Judah Gabriel Himango. This collaboration will also result in several welcome improvements to PWAs built with PWAbuilder, including:

  • Support for standard shortcuts, which allow PWAs access to app shortcuts that are deeply integrated with an OS (such as, the Windows taskbar or Android’s home screen).
  • Customized Android package generation, which enables developers to edit things like the launcher name, splash screen color, navbar colors and icon URLs—just like native Android applications.

You can read more about PWABuilder and how it works together with Vaadin in this blog post.

The worm in the Apple

In contrast with the other tech giants, Apple has opted to limit the functionality of PWAs on their iOS and iPad OS platforms. 

In this latest blow to PWAs, Apple declined to implement 16 newly introduced Web APIs in Safari, citing their potential for enabling greater advertiser fingerprinting as the reason.

This means that to successfully deploy a PWA to iOS or iPad OS requires that it be wrapped as a native application and distributed through Apple’s app store. This adds an extra step for developers. In addition, all apps submitted to the Apple App Store must adhere to specific guidelines that are generally PWA-unfriendly, including that an app must be able to function completely on a device (as opposed to having significant portions of its functionality on the web). 

At this stage, the best way to convert a PWA to an iOS or iPad OS app, is to use Microsoft’s PWA builder, which generates a complete XCode package for your PWA (provided you have a Mac on which to run XCode).

This is still more advantageous than building a purely native application, as much of the app’s codebase can be shared between the pure PWAs distributed to other platforms and the wrapped version.

While it is also unlikely that the Mac App Store will see PWAs in the near future either, it is still possible to easily install and use PWAs on a Mac by using Google Chrome and Microsoft Edge Chromium.

However, we are seeing some good news for the future of PWA from Apple's latest iOS 14 update that adds support for technologies like Service Worker and allows iPhone users to set a different default browser than Safari.

Firefox turns its back on the open web

In an odd turn of events, Mozilla Firefox, usually an advocate for the open web, decided not to pursue support for installable web applications on their desktop browser. The Android version of the browser continues to support this technology. 

PWAs are arguably the best alternative for app store-bound applications, so the recent announcement from Mozilla has caused a stir in the open web community.

Mozilla stated that their approach is simply a matter of prioritization. They said they’ll focus their efforts on other features with no plans for enabling installable web apps for their desktop browser. This change puts Mozilla behind the browsers of PWA advocates, Microsoft and of course, Google. 

This could prove harmful for the reach of web apps on their platform, as for example The Weather Channel reported a 60% increase in activity when migrating from a traditional web app to a PWA.

Open vs. closed web

Apple’s Safari browser, included with the iOS mobile operating system, and the Mozilla Firefox browser seem to have opted out of PWA capabilities in favor of security. More details of this deviation are sure to emerge soon. However, popularity is on the side of PWAs, as Google Chrome and Windows 10’s standard browser, Edge, have the major market share.

Distribution and support for PWAs by platform

So, this begs the question: Is it worthwhile for my business to build a PWA in today’s climate? The answer, overwhelmingly, is yes… for most situations. 

To help you get a better idea whether a PWA is well suited for your project, we have compiled a list of up-to-date information about support for PWAs by various widely-used platforms.

Progressive web applications on Android 

Android is by far the best platform for PWAs. At present, PWAs can be installed on Android in a variety of ways:

Browser-based installation of PWAs on Android

  • This is perhaps the most common (and convenient) way of installing PWAs.
  • All major browsers, including Google Chrome, Android Webview, Mozilla Firefox, Brave, Opera and Microsoft Edge, support PWA installation. 
  • Certain other browsers provided by hardware and services vendors, such as Samsung Internet, also support PWAs. 
  • Test builds of Mozilla’s “overhauled” Firefox for Android browser recently added support for PWA installation, starting with Firefox Preview 5.0 and Beta 76.  These browsers are a part of Mozilla's effort to modernize the classic Firefox browser, bringing greater performance and lower resource-usage to Android devices. It should be noted that, unlike Chrome, Firefox will simply add these PWAs as "home screen shortcuts". 
  • All the above-mentioned browsers, except for Google Chrome and Samsung Internet, use the a2hs (add to homescreen) method of installation, which essentially adds an icon leading to the app to the home screen, but does not register the app at a system level. 
  • Google Chrome and Samsung Internet support the recently unveiled “WebAPK” installation method, which creates a native “wrapped” application, and registers the application at a system level. This has the added benefits of allowing the app to appear within the app shelf (instead of just the homescreen), and allowing users to manage the storage, notifications and other settings from within Android settings.

Distributing PWAs through Android-based app stores

  • Progressive web applications can be elevated to a “Trusted Web Activity” (TWA) and installed from within the Google Play Store.
  • TWAs essentially run in a special instance of Chrome Custom Tab (CCT), which gives greater access to features such as push notifications, background sync and media source extensions (MSE) than a typical Web View. 
  • While a core promise of PWAs is the ease of distribution afforded by browsers, TWAs do provide added benefits in certain use cases, such as deeper integration with the platform, homescreen widgets and integration with Wear OS or Android Auto.
  • Samsung has stated that PWA installation will be possible in the Galaxy Store using WebAPK (instead of TWAs). Feedback received by Samsung seems to indicate that developers prefer this mode of installation to TWAs.

Enterprise distribution of PWAs on Android

Progressive web applications on Windows

  • Microsoft has gone all in with their push for progressive web applications on Windows 10 and 10X. This has been helped by Microsoft Edge being moved to Chromium.
  • Microsoft released a preview of their new Chromium Edge-based PWA Platform. Read more on PWA advocate Justin Willis' blog.
  • At Build 2020, Microsoft announced that a host of improvements aimed at bridging the gap between native and progressive web applications would be coming to Windows, as part of the open-source Project Fugu (of which Microsoft is a part). Improvements include:
    • Setting PWAs as defaults for file types, URLs and protocols.
    • Native file system access (direct writing).
    • The ability to run on OS login.
    • Improved native notifications (badges that display relevant information added to icons).
    • App shortcuts.
  • These features started shipping with Edge 86 and many are currently available in the Canary channel.

Browser-based PWA installation in Microsoft Windows

PWAs on Windows app stores

Progressive web applications on iOS and iPad OS

Progressive web applications on macOS

Browser-based PWA installation on macOS

  • Browser-based installation of PWAs is still possible on macOS, using Google Chrome and Microsoft Edge (Chromium).
  • Google Chrome will soon allow PWAs to launch at start-up on macOS. A flag for this is already available on builds in the Canary channel.
  • It is not possible to install PWAs using Apple’s Safari, Opera or Microsoft Firefox at present.

Progressive web applications on ChromeOS

Progressive web applications on Linux

  • PWAs can be installed on Linux using Google Chrome, starting with version 72. PWAs can be launched at start-up using Google Chrome. This feature is currently under development, and is available through a flag on Canary builds of Chrome.
  • Microsoft Edge Chromium will soon make its way to Linux, and will likely support PWA installation capabilities as well.

PWAs on the rise for gamers 

Amazon Luna announced

Amazon announced its new cloud gaming service, Luna, that will expand its Prime Video subscription model. Users can request early access to use the service and the new low-latency gamepad on the Fire TV, PC, Mac and iOS platforms. Android support is in development and should be available soon. Of more interest is the fact that the service runs as a PWA, bypassing Apple’s App Store and its 30% microtransaction commission for installation. 

Epic Games take a bite of the Apple

Amazon is not the only gaming platform protesting the App Store however. Gaming giant, Epic Games, that develops games like Fortnite and the Unreal Engine used for a plethora of games, has filed a civil lawsuit against Apple regarding exclusive Apple payments on iOS devices.

Facebook into gaming (again)

Users have been playing browser-based games on Facebook for years. With the aim of becoming the first ad-based cloud-gaming network, Facebook recently announced that several free-to-play mobile games will become available on their upcoming platform. According to game design veteran Jason Rubin, offering the games as PWAs is a possible solution to achieve this. Like Epic Games, they’re pressurizing Apple to comply, instead of adapting to the limitations of PWAs for gaming.

Gaming on Chromebooks

Google’s cloud-gaming console, Stadia, has slowly but surely made inroads into the console gaming market for Google. The Stadia platform can be installed as a PWA on Chrome, turning their Chromebooks into effective gaming machines. Google has reported that the introduction of Stadia titles has tripled the number of installed games on Chromebooks over the last few months.

Progressive web applications and Vaadin

Turning web applications built with Vaadin 14+ to PWAs is easy, and only requires adding the @PWA annotation in the root layout of your application. The server then automatically serves the resources required for a PWA. Apps built with the Java component API default to a customizable “offline screen” in the absence of an internet connection.

Vaadin also supports building offline experiences in PWAs with their TypeScript-based client-side views. You can use both Java-based and TypeScript-based views in the same Vaadin application, which means you can add offline-capable views to existing Vaadin applications.

Vaadin Fusion brings offline functionality to PWAs

Our latest feature release, Vaadin 19, brings offline functionality for your TypeScript-based Vaadin application. It works by saving data locally and then syncing up with the server once you re-establish connection. Learn how in this video by Marcus Hellberg or learn Fusion in action with our new in-depth tutorial.

Unsure of which Vaadin version is best for you? Read our introduction to Vaadin Flow and Fusion to find out!

A new series of guides for building PWAs in Vaadin and publishing them to major app stores

We also offer tutorials for every step of the PWA development process: Our comprehensive Modern web apps with Spring Boot and Vaadin ebook explains how to build a fully-functional PWA from scratch to finish.

In addition, we have a wealth of content to help you deploy your PWA to all major cloud-hosting providers and app stores.

  • Cloud Deployment tutorial series that provides step-by-step instructions for deploying any Vaadin app (including PWAs) to a cloud provider of your choice. The series currently covers AWS, Azure Cloud, Google Cloud, Heroku Cloud, IBM Cloud and Oracle Cloud.
  • App Store Submission tutorials featuring the PWA Builder and Bubblewrap CLI, with instructions for the Microsoft Store and Google Play Store.
java pwa progressive-web-app progressive-web-apps typescript
Kavish Weerawardane
Kavish Weerawardane
Kavish leads our product marketing team in bringing exceptional developer and enterprise focused products to market. He is particularly passionate about design systems, UX & real-time collaboration technologies.
Other posts by Kavish Weerawardane