A Progressive Web App (PWA) is a web app that uses progressive enhancement to provide users with a more reliable experience, uses new capabilities to provide a more integrated experience, and can be installed. And, because it’s a web app, it can reach anyone, anywhere, on any device, all with a single codebase. Once installed, a PWA looks like any other app, specifically:

• It has an icon on the home screen, app launcher, launchpad, or start menu.
• It appears when you search for apps on the device.
• It opens in a standalone window, wholly separated from a browser’s user interface.
• It has access to higher levels of integration with the OS, for example, URL handling or title bar customization.
• It works offline.

Cross-browser compatibility

Apple is a crucial company for the multi-device world, owning iOS, iPadOS, macOS, and Safari. While Apple has never used the term PWA in public, they’ve been supporting the technologies to make a PWA installable and offline-capable since 2018 on Safari for iPhones and iPads.

However, Apple’s implementation of the PWA specs misses many features possessed by other browsers, in particular browsers powered by the Chromium engine.

In the middle, we also have Firefox and its Gecko engine with implementations including more PWA specs on Android, and fewer installation capabilities on desktop.

Limitations include the lack of push notifications, integration APIs (such as Web Bluetooth or WebNFC), and installation promotion techniques that help users know they can install the current website to get an app experience. In addition, there are several bugs with implemented features.

As with all web development, testing your experience on every platform is mandatory when releasing your PWA, and when a major new browser or OS version is released. You should always provide fallback solutions or alternative experiences when a feature is not available.

You need to remember that a Progressive Web App is just a web app, so content and services are running on top of standard specs and protocols. Therefore, a PWA technically runs everywhere the web runs; you don’t need the platform to be compatible with any “PWA spec.”

Compatibility

However, when we are talking about PWA and compatibility, typically, we are thinking about the capabilities to cross the boundaries of the browser and online-only contexts: icon installation and offline support.

Desktop and laptops

In a world of multifactor devices, it’s challenging to know what a desktop device is anymore. Still, at least from an operating system point of view, these browsers and stores are compatible with PWA installation and offline capabilities:

Windows 10 and 11
Google Chrome (from version 73), Microsoft Edge (from version 79), Microsoft Store
ChromeOS
built-in Chrome browser (from version 72), Play Store (from version 85)
macOS, Linux, and Windows 7 and 8.x
Google Chrome (from version 73), Microsoft Edge

Mobile devices

Talking about mobile phones and tablets, a Progressive Web App is installable with offline capabilities using the following browsers and app stores:

iOS and iPadOS
Safari (since iOS 11.3), AppStore (since iOS/iPadOS 14, with some limitations), mobile configuration for enterprise distribution.
Android
Firefox, Google Chrome, Samsung Internet, Microsoft Edge, Opera, Brave, Huawei Browser, Baidu, UCWeb, Play Store (from version 72 with Google Chrome installed, or browsers compatible with TWA), Galaxy Store, Managed Play iframe for enterprise distribution.

Progressive Web Apps browser support & compatibility

1) Advanced user experience & offline functionality

The first advantage Progressive Web Apps have over classic Web Apps is undeniably the exceptional user experience they offer. 

We recently spoke about the use of Service Workers, which allow PWA developers to integrate a number of advanced features.

The Service Worker is installed in the browser the first time the PWA is used and then performs tasks it is assigned in an independent manner. 

Here is the list of browsers that support the installation of the service worker : 

Like we said, the Service Worker allows for advanced functionalities to be built, such as background synchronisation, allowing up to date data to be directly displayed to the user when he arrives (thanks to the regular data updating done in the background).

The synchronisation allows for an extremely smooth user experience by significantly speeding up the app’s performance. 

Offline accessibility also relies on the Service Worker, which once installed in the browser, manages the caching of the app files, intercepts network requests, and then performs the appropriate actions depending on the whether or not the network is available.

This functionality allows for the app to be visited without a connection, as well as for improved user experience to be enjoyed, since even when an internet connection is available, certain files won’t need to be loaded from the web server since they’ll already have been locally stored. 

2) Web push notifications

This feature is possible thanks to service workers’ capacity to work in the background.

To enable this, two complementary elements work together : the Push API and the Notification API. 

• The Push API is used to notify a service worker of a notification’s presence.
• The Notification API is used to trigger the display of a notification in a browser.

The table below details the compatibility of different browsers with this system that manages the reception and display of push notifications. 

All, except for Safari, rely on Service Workers to achieve these results. Safari uses an Apple-specific system called APNs that allows notifications to be received on OS X, but not on iOS.

3) Home screen & Splashscreen

Another particular thing about PWA’s is that even though they run via a browser, they can be installed directly onto the user’s home screen and they offer an experience on an immersive, full screen.

This behavior is possible thanks to a JSON Manifest that is actually a descriptive file allowing developers to control the way the Progressive Web App behaves. 

The JSON Manifest will allow the application to be saved onto the home screen of the device from the browser.

The app will then have its own icon and name, previously defined in the Manifest. 

The Manifest also allows for a splashscreen to be displayed that the user will see upon opening the application, or while data is being downloaded or retrieved from the cache. 

4) Geolocation

Information concerning the app user’s geolocation can be retrieved by using the Geolocation API, which allows (with the user’s permission) his location to be found. 

It also allows you to keep an eye on the user and to be notified if a position change occurs. 

The Geolocation API only works in apps under HTTPS, and allows for this precious information to be obtained in a secure way. 

Through this API, you can build engagement and loyalty strategies that were unheard of in the web world up until now. 

5) Video & Image capturing

Up until not long ago, the only way to get photos and videos on mobile devices was to use a standard HTML element that allowed for apps providing images to be launched, such as the camera. You had no choice but to leave the Web App.

Today, the “Media Capture API” allows Web Apps to have direct access to devices’ audio and video feeds (the camera and microphone). These feeds can be read and handled from the Web App.

It is therefore possible to take a picture or record a video without leaving the browser, for example.

6) Bluetooth

Progressive Web Apps can also securely communicate with Bluetooth devices.

Reserved for native apps only up until now, Bluetooth usage on the web has been made possible thanks to the Web Bluetooth API. 

This API makes communication between a Web App and a device possible : the application prompts the browser to display a list of surrounding Bluetooths in proximity, and the user chooses a device or closes the dialog box.

In order to avoid any security risks, the application must absolutely be running under HTTPS in order to use the Web Bluetooth API.

Here is the list of browsers compatible with this API 

That’s it for this tutorial!

We hope we’ve clear your doubts in case If you have any feedback or questions, Just contact us here and we are always available for you.