Skip to content

Instantly share code, notes, and snippets.

@hizo

hizo/pwa.md

Last active July 31, 2018 09:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hizo/8af1b31ad5b6f218184a3886362e8824 to your computer and use it in GitHub Desktop.
Save hizo/8af1b31ad5b6f218184a3886362e8824 to your computer and use it in GitHub Desktop.
Download ZIP
PWA
Raw
pwa.md

Progressive Web Apps

A PWA lets you install the application from the browser window itself, is available on your phone like a native app, and works offline, just like a native app.

Requirements

Here is a summary of all requirements from google: https://developers.google.com/web/progressive-web-apps/checklist

The minimum are:

  1. Web App Manifest - This is just a json file that gives meta information about the web app. It has information like the icon of the app (which a user sees after installing it in their app drawer), background color of the app, name of the app, short name, and so on. We can write this manifest file ourselves or we can use tools such as this, or this to generate one for us.

  2. Service Workers - A service worker is a specific type of JavaScript worker, which is a script that runs in the background of the user’s browser. Service workers are like proxy servers stationed between your app, the user’s browser and the network. They are able to intercept network requests and cache information for us in the background. This can be used to load data for offline use.

  3. Icon - This is used to provide an app icon when a user installs the PWA in their application drawer. A jpeg image will just be fine. The manifest tool I highlighted above helps in generating icons for multiple formats, and I found it very useful.

  4. Served over HTTPS - In order to successfully register a service worker, the site needs to run on HTTPS.

You can check for most of the requirements via Lighthouse tool

Service Workers

Main usage:

  1. Cache local resources (html, css, javascript) - these are mainly the files that app needs in order to be able to start
  2. Runtime caching - multiple strategies for cross-domain requests, such as API requests

Service worker can be pre-generated with different strategies by tools:

  • SW Precache, exists also as a webpack plugin (will eventually be deprecated). Uses SW Toolbox under the hood if you want runtime caching
  • More recommended Workbox - this tool is from the same authors as SW Precache, is a newer tool that should contain more features and more strategies for runtime caching that you get out of the box just by specifying which strategy should apply to which requests

To add a service worker into your page, you need to register it first

  • nice working solution is already implemented in Create-react-app, described here. You can get the registration code when you generate a new project.
  • or you can use a more advanced one
  • best practice is to show a banner to the user when the service worker installs and caches local resources (something like "App is now available offline"), and also a message to show to the user once you register a newer version of the service worker (something like "There is new content available. Please refresh the browser.")

Offline Cookbook is the article you need for selecting the right caching strategy for runtime caching: https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/

Also for writing your own service workers read: https://serviceworke.rs/strategy-network-or-cache_service-worker_doc.html

More articles

https://medium.freecodecamp.org/progressive-web-apps-101-the-what-why-and-how-4aa5e9065ac2

https://www.keycdn.com/blog/service-workers/

https://developers.google.com/web/fundamentals/primers/service-workers/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment