3 PWA Tips to Keep You Sane

1. Use Relative Paths In The Manifest

You probably deploy your app in various different paths locally, for testing, or on different environments. If you hard-code a path in the manifest, you'll have to change it each time you deploy somewhere different, which will drive you crazy.

Fortunately, browsers accept relative paths in the manifest. I recommend placing the manifest in the root of your app, and using this set of values for your manifest file:

  "start_url": "./",
  "scope": ".",

This instructs the browser that the folder where the manifest is located is the location of the application, and that the scope for the app (including files references in the service worked) is also the current folder. Now wherever you deploy the app, the browser and service worker will find the needed files.

2. Use Relative Paths in the Service Worker

As with tip #1, in the service worker you should also use relative paths, for the same reasons. In the service worker, you often have a list of files to be cached, and the list should have relative paths starting with './', where '.' is the folder where the service worker is located (the root folder of your app, the same place your manifest should go). For example:

  './index.html',
  './teavm/classes.js',
  './css/app.css',

3. Use a Short Cache Timeout for the Service Worker and Manifest

A tricky problem for production PWAs can occur if you set a long timeout for your service worker and you discover it has a bug. Any user who has already launched your PWA will have a cached copy of the service worker. Since the service worker intercepts and serves up a local copy of HTML, CSS, and more, you'll find that you cannot update the app that users are seeing, a worrisome situation.

To reduce this risk, be sure to set a very low timeout, so that if users revisit your site or refresh, the service worker is reloaded. For servlet-deployed webapps, this entry in web.xml will set a default policy of not caching. (You should have other, more specific entries to cache more static content like images and CSS.)

    <init-param>
      <param-name>ExpiresDefault</param-name>
      <param-value>access plus 0 seconds</param-value>
    </init-param>

Last modified on 30 May 2021 by AO