12 KiB
| title | date | also_for | thanks |
|---|---|---|---|
| How To Make a Progressive Web App Out Of Your Existing Website | 2019-01-26 | Heroku's blog (TODO: put link here) | Nathanial, Andrew Konoff |
How To Make a Progressive Web App Out Of Your Existing Website
Progressive web apps enable websites to trade some flexibility to function more like native apps, without all the overhead of app store approvals and tons of platform-specific native code. Progressive web apps allow users to install them to their home screen and launch them into their own pseudo-app frame. However, that frame is locked down and restricted, and only allows access to pages that are subpaths of the scope of the progressive web app. They also have to be served over HTTPS. Updates to these can be deployed without needing to wait for app store approval.
The core of progressive web apps are service workers, which are effectively client-side Javascript daemons. Service workers can listen for a few kinds of events and react to them. One of the most commonly supported events is the fetch event; this can be used to cache web content offline as explained below.
There are a large number of web apps that fit just fine within these rules and restrictions, however there could potentially be compatibility issues with existing code. Service worker updates will be pushed out with respect to standard HTTP caching responses. Plus, you get to use plenty of native APIs, including geolocation, camera, and sensor APIs that only native mobile apps used to be able to take advantage of.
In this post, we’ll show you how to convert your existing website into a progressive web app. It’s fairly simple, only really requiring the following steps:
- Creating an app manifest
- Adding it to your base HTML template
- Creating the service worker
- Serving the service worker on the root of the scope you used in the manifest
- Adding a