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 Worker support from caniuse
Fetch is the modern API for asynchronous requests. Requests in Service Workers are implemented by the Fetch API which is Promise based.
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.
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
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
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
NB: This article is a work in progress and will be updated in the coming week.
Thanks for reading😊.