Progressive Web Apps (PWAs) are web applications that are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications. The application type attempts to combine features offered by most modern browsers with the benefits of a mobile experience.
[x] 2. Pages are responsive on tablets & mobile devices
[ ] 3. All app URLs load while offline - Service Workers to the rescue!
[ ] 4. Metadata provided for Add to Home screen - manifest.json
[x] 5. First load fast even on 3G
[x] 6. Site works cross-browser
[x] 7. Page transitions don't feel like they block on the network
[x] 8. Each page has a URL
This leaves us with 2 remaining criteria we need to fulfil:
3. All app URLs load while offline
This is where Service Workers come in. A service worker runs in the browser in a separate thread from the main app providing a bunch of features (such as push notifications and background sync). However, the most useful feature is intercepting and handling network requests. By doing this, the service worker can cache (or pre-cache) assets and network responses. This allows the user to access the app offline and results in a faster more performant web app regardless of their network connection.
There are some good libraries including Workbox by Google, which “bakes in a set of best practices and removes the boilerplate every developer writes when working with service workers”.
However, React boilerplate comes installed with offline-plugin, a webpack plugin which generates a Service Worker which can be configured as part of the build setup.
4. Metadata provided for Add to Home screen
This is done using a Web App Manifest file or manifest.json.
There looks like there are issues with iOS (see article above) but Apple have only recently added support (iOS v11.3) which was unexpected and so they are now showing will and intent to get behind the PWA cause.
What is a progressive web app?
Wikipedia
Basic requirements of a PWA?
Google has a handy “Progressive Web App Checklist” which we can use to make sure we meet the criteria, and in doing so make our apps reliable fast and engaging.
Most of these we can assume we will fulfil:
This leaves us with 2 remaining criteria we need to fulfil:
3. All app URLs load while offline
This is where Service Workers come in. A service worker runs in the browser in a separate thread from the main app providing a bunch of features (such as push notifications and background sync). However, the most useful feature is intercepting and handling network requests. By doing this, the service worker can cache (or pre-cache) assets and network responses. This allows the user to access the app offline and results in a faster more performant web app regardless of their network connection.
There are some good libraries including Workbox by Google, which “bakes in a set of best practices and removes the boilerplate every developer writes when working with service workers”.
However, React boilerplate comes installed with
offline-plugin, a webpack plugin which generates a Service Worker which can be configured as part of the build setup.4. Metadata provided for Add to Home screen
This is done using a Web App Manifest file or
manifest.json.React boilerplate uses
webpack-pwa-manifestto configure the manifest.json.Compatibility with iOS and Android
Issues with PWAs on iOS - https://medium.com/@firt/pwas-are-coming-to-ios-11-3-cupertino-we-have-a-problem-2ff49fd7d6ea
There looks like there are issues with iOS (see article above) but Apple have only recently added support (iOS v11.3) which was unexpected and so they are now showing will and intent to get behind the PWA cause.
Useful links
Some example PWAs - https://pwa.rocks/ Web App Manifest - https://developers.google.com/web/fundamentals/web-app-manifest/ Service workers - https://developers.google.com/web/fundamentals/primers/service-workers/ Workbox - JavaScript Library developed by Google for adding offline support to web apps Offline plugin - React boilerplate's choice for handling Service Workers