Progressive Web App
Progressive web applications (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native applications. PWAs combine the flexibility of the web with the experience of a native application.
In short, PWA makes web app experience close to native apps, plus the following features:
- Cross platform - In the mobile first world, PWA can run wherever Chrome can run.
- Progressive - Works for every user, regardless of browser choice because it’s built with progressive enhancement as a core tenet.
- Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next.
- Connectivity independent - Enhanced with service workers to work offline or on low-quality networks.
- App-like - Feels like an app, because the app shell model separates the application functionality from applicationcontent .
- Fresh - Always up-to-date thanks to the service worker update process.
- Safe - Served via HTTPS to prevent snooping and to ensure content hasn’t been tampered with.
- Discoverable - Is identifiable as an “application” thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
- Re-engageable - Makes re-engagement easy through features like push notifications.
- Installable - Allows users to add apps they find most useful to their home screen without the hassle of an app store.
- Linkable - Easily share the application via URL, does not require complex installation.
Capabilities
Check and compare the capabilities that web and native apps can do: What Web Can Do Today.
Examples
How
There are three components to create a PWA:
- Register scripts - for service worker registration on the client browser
- Service worker - for
fetch
,install
and other event handling - Manifest - metadata for app discoverable, icons and additional information
Service Worker
A service worker is a type of web worker. It’s essentially a JavaScript file that runs separately from the main browser thread, intercepting network requests, caching or retrieving resources from the cache, and delivering push messages.
Basically, service worker works as middle man between client browser and server on the other hand of the internet.
Register
The following script should be placed in every page of the web app in order to register service worker.
1 | if ('serviceWorker' in navigator) { |
Key Points
- Delay registration after page load
.register
returns a promise.register
can take optional second parameter for options, such as{ scope: '/' }
. There is one limit, scope can only be at the same path level or sub level, not parent level.
Develop
In service-worker.js
, handle different type of events:
1 | // Listen for install event, set callback |
Workbox
Workbox could be used to help with common cache load use cases.
Manifest
Add link
to head
in HTML DOM
1 | <link rel="manifest" href="/manifest.json"> |
Example manifest.json
1 | { |