Quick offline PWA wins

Get offline with sw-precache

Progressive web apps have offline functionality because of service workers caching static assets and data.
Starting with the create-react-app boiler plate, you can easily see this in action by following the steps in https://github.com/jeffposnick/create-react-pwa.

As with any PWA, first make a manifest.json in the root folder and link it in index.html, and also register the service worker that will be created by sw-precache:

1
2
3
4
5
6
7
8
9
10
<link rel="manifest" href="manifest.json">
<!-- ... -->
<!-- At the bottom -->
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js').catch(function(ex) {
console.warn(ex);
});
}
</script>

Then in the package.json under “scripts”:

1
2
3
"scripts": {
"build": "react-scripts build && cp manifest.json build/ && sw-precache --root='build/' --static-file-globs='build/**/!(*map*)'",
}

This creates the production build, copies the manifest.json into the build folder, runs sw-precache in the build folder and caches the static content.

To deploy the static build to a https I used surge.sh, assuming you’re in the root folder, I can deploy to a https domain to see it working:

1
surge client/build --domain drop-dev.surge.sh

Open chrome dev tools under application you should see it:
ss