PWA for Mobile Web
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.
![[object Object]](/dog.jpg)