PWA for Mobile Web

242 2018-08-02 01:02

Why Progressive Web App?

  • can be put to home screen by Chrome and Safari
  • work offline with service workers
  • increase engagement with push notification
  • improve the conversion rate for new users across all browsers by 104% and on iOS by 82%

“Progressive” means the improvement is not binary and terminal but evolutionary.

What is it?

PWA = website optimized for mobile + manifest.json + service worker loading and registering

How to add it to your site?

manifest.json is the easy part. Put the following into the example.com/manifest.json

{
  "short_name": "Short",
  "name": "Longer Name",
  "icons": [
    {
      "src": "favicon.png",
      "sizes": "192x192 150x150 144x144 64x64 32x32 24x24 16x16",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#de4c4f",
  "background_color": "#f3f3f3"
}

And add the following into html <head>

<link rel="manifest" href="/manifest.json"/>
<link rel="apple-touch-icon" href="/favicon.png"/>

Then on both iOS and Android, users can add the site to the home screen.

Then … service worker loading and registering

The loading part I recommend create-react-app’s service worker loading script, which has good security practices and targets the cache first strategy. And it includes unregister as well.

The registering part is trickier - we added the following webpack plugin to prepare the service-worker.js.

// ...
  plugins: [
    // ...
    new SWPrecacheWebpackPlugin(
      {
        mergeStaticsConfig: true,
        dontCacheBustUrlsMatching: /\.\w{8}\./,
        filename: 'service-worker.js',
        minify: false,
        navigateFallback: '/',
        navigateFallbackWhitelist: [/^(?!\/__).*/],
        staticFileGlobs: [
          `${OUTPUT_DIR}/**`,
        ],
        stripPrefix: OUTPUT_DIR,
        staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
        dynamicUrlToDependencies: {
          '/index.html': glob.sync(path.resolve(`${OUTPUT_DIR}/**/*.js`)),
        },
      }
    ),
  ],
// ...

The tricky part here is that if you have SSR as we do - be careful to specify the dynamicUrlToDependencies; otherwise, cache may fail to be updated.

© 2010-2018 Tian
Built with ❤️ in San Francisco