Browser Support For PWAs

2019-07-05PWAs3 min read

Browsers are still working hard to consistently support PWAs. The largest strides have been made in the last 3 years (2017-2019).

PWAs are possible by a bunch of modern web APIs. We can say a browser supports PWAs when it implements most of those APIs. Let's run through the core ones

  • Service Worker API
  • Fetch API
  • Cache API
  • Manifest API
  • Push and Notification APIs
  • Background Sync API

It's also important to understand that your app should work perfectly in browsers that don't support PWAs. Progressive apps are built with progressive enhancement in mind. They are web apps with enhancements that implement these APIs.

Service Workers.

A Service Worker is a JavaScript file that sits between the browser and the server. It acts as a proxy and can intercept and respond to requests by the browser. Service Workers form a large part of the interface for retreiving and writing files to the browser cache.

Service Worker support from caniuse

Browser Support For Service workers. Source: caniuse.com
Browser Support For Service workers. Source: caniuse.com

Fetch API:

Fetch is the modern API for asynchronous requests. Requests in Service Workers are implemented by the Fetch API which is Promise based.

Browser Support

Browser Support For FetchAPI. Source: caniuse.com
Browser Support For FetchAPI. Source: caniuse.com

Cache API.

Browsers implement resource caching by default. This is why repeat visits to a site are slower than initial ones. But developers don't have full control over this storage. The browser might delete or clear away files from the cache when space becomes a problem.

The CacheStorage API gives developers a flexible interface for managing files. They can determine what files they want to keep in the cache and delete the ones they don't want anymore.

Service Workers, when combined with the CacheStorage API can provide fallback resources when network issues arise. They can also store resources that are essential to providing an offline first experience and serve them when there's no network.

Web App Manifest

Adding apps to the home screen is a core feature of progressive apps. The manifest.json file is responsible for providing information about how the app should behave when installed.

Browser Support

Browser Support For Web App Manifest. Source: caniuse.com
Browser Support For Web App Manifest. Source: caniuse.com

Push Notifications

Push notifications in PWAs are possible with two browser APIs; The Push and Notification APIs.

Push API allows users to subscribe to notifications from our app and recieve them anytime. Our service worker listens for the push event. Because service workers have different scope from browser tabs or webpages, they can still listen to the pish event even when the tab or browser has been closed.

Browser support for PushAPI

Browser Support For FetchAPI. Source: caniuse.com
Browser Support For FetchAPI. Source: caniuse.com

The Notification API is responsible for creating and showing system notifications to the user. When the notification has been pushed to the service worker by the browser, the Notifcation API takes over to show and control the display of the notifications. It's also responsible for obtaining notification permissions from the user.

Browser Support for NotificationAPI

Browser Support For FetchAPI. Source: caniuse.com
Browser Support For FetchAPI. Source: caniuse.com

Background Sync

For web apps to have the reliability of native apps, they have to be stable in network flunctuations. If the network goes off when the user is sending a message or filling a form, the app has to ensure the action is completed once the network is back. Background sync API ensures this. It's also important to note that the action completes even when the active tab has been closed.

Browser Support for BackgroundSyncAPI

Browser Support For BackgroundSync. Source: caniuse.com
Browser Support For BackgroundSync. Source: caniuse.com

NB: This article is a work in progress and will be updated in the coming week.

Thanks for readingšŸ˜Š.