This guide extends on code examples found in theOutput Management guide.

Progressive Web Applications (or PWAs) are web apps that deliver an experience similar to native applications. There are many things that can contribute to that. Of these, the most significant is the ability for an app to be able to function whenoffline. This is achieved through the use of a web technology calledService Workers.

This section will focus on adding an offline experience to our app. We'll achieve this using a Google project calledWorkbox which provides tools that help make offline support for web apps easier to setup.

We Don't Work Offline Now

So far, we've been viewing the output by going directly to the local file system. Typically though, a real user accesses a web app over a network; their browser talking to aserver which will serve up the required assets (e.g..html,.js, and.css files).

So let's test what the current experience is like using a server with more basic features. Let's use thehttp-server package:npm install http-server --save-dev. We'll also amend thescripts section of ourpackage.json to add in astart script:

package.json

{ ... "scripts": {-    "build": "webpack"+    "build": "webpack",+    "start": "http-server dist" }, ...}

Note:webpack DevServer writes in-memory by default. We'll need to enabledevserverdevmiddleware.writeToDisk option in order for http-server to be able to serve files from./dist directory.

If you haven't previously done so, run the commandnpm run build to build your project. Then run the commandnpm start. This should produce the following output:

> http-server distStarting up http-server, serving distAvailable on:  http://xx.x.x.x:8080  http://127.0.0.1:8080  http://xxx.xxx.x.x:8080Hit CTRL-C to stop the server

If you open your browser tohttp://localhost:8080 (i.e.http://127.0.0.1) you should see your webpack application being served from thedist directory. If you stop the server and refresh, the webpack application is no longer available.

This is what we aim to change. Once we reach the end of this module we should be able to stop the server, hit refresh and still see our application.

Adding Workbox

Let's add the Workbox webpack plugin and adjust thewebpack.config.js file:

npminstall workbox-webpack-plugin --save-dev

webpack.config.js

 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');+ const WorkboxPlugin = require('workbox-webpack-plugin'); module.exports = {   entry: {     app: './src/index.js',     print: './src/print.js',   },   plugins: [     new HtmlWebpackPlugin({-       title: 'Output Management',+       title: 'Progressive Web Application',     }),+     new WorkboxPlugin.GenerateSW({+       // these options encourage the ServiceWorkers to get in there fast+       // and not allow any straggling "old" SWs to hang around+       clientsClaim: true,+       skipWaiting: true,+     }),   ],   output: {     filename: '[name].bundle.js',     path: path.resolve(__dirname, 'dist'),     clean: true,   }, };

With that in place, let's see what happens when we do annpm run build:

...                  Asset       Size  Chunks                    Chunk Names          app.bundle.js545 kB0,1[emitted][big]  app        print.bundle.js2.74 kB1[emitted]         print             index.html254 bytes[emitted]precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js268 bytes[emitted]      service-worker.js1 kB[emitted]...

As you can see, we now have 2 extra files being generated;service-worker.js and the more verboseprecache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js.service-worker.js is the Service Worker file andprecache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js is a file thatservice-worker.js requires so it can run. Your own generated files will likely be different; but you should have aservice-worker.js file there.

So we're now at the happy point of having produced a Service Worker. What's next?

Registering Our Service Worker

Let's allow our Service Worker to come out and play by registering it. We'll do that by adding the registration code below:

index.js

 import _ from 'lodash'; import printMe from './print.js';+ if ('serviceWorker' in navigator) {+   window.addEventListener('load', () => {+     navigator.serviceWorker.register('/service-worker.js').then(registration => {+       console.log('SW registered: ', registration);+     }).catch(registrationError => {+       console.log('SW registration failed: ', registrationError);+     });+   });+ }

Once morenpm run build to build a version of the app including the registration code. Then serve it withnpm start. Navigate tohttp://localhost:8080 and take a look at the console. Somewhere in there you should see:

SW registered

Now to test it. Stop your server and refresh your page. If your browser supports Service Workers then you should still be looking at your application. However, it has been served up by your Service Worker andnot by the server.

Conclusion

You have built an offline app using the Workbox project. You've started the journey of turning your web app into a PWA. You may now want to think about taking things further. A good resource to help you with that can be foundhere.

5 Contributors