From 837414363a8ff9020ab3e0a0b3010a91fbd922c4 Mon Sep 17 00:00:00 2001 From: John Reilly Date: Sun, 3 Dec 2017 20:24:59 +0000 Subject: [PATCH 1/9] Create stub pwa page based on the development page --- .../guides/progressive-web-application.md | 403 ++++++++++++++++++ 1 file changed, 403 insertions(+) create mode 100644 src/content/guides/progressive-web-application.md diff --git a/src/content/guides/progressive-web-application.md b/src/content/guides/progressive-web-application.md new file mode 100644 index 000000000000..0325ab99105c --- /dev/null +++ b/src/content/guides/progressive-web-application.md @@ -0,0 +1,403 @@ +--- +title: Progressive Web Application +sort: 26 +contributors: + - johnnyreilly +--- + +https://github.com/webpack/webpack.js.org/issues/1145#issuecomment-346951250 + + +T> This guide extends on code examples found in the [Output Management](/guides/output-management) guide. + +If you've been following the guides, you should have a solid understanding of some of the webpack basics. Before we continue, let's look into setting up a development environment to make our lives a little easier. + +W> The tools in this guide are __only meant for development__, please __avoid__ using them in production!! + + +## Using source maps + +When webpack bundles your source code, it can become difficult to track down errors and warnings to their original location. For example, if you bundle three source files (`a.js`, `b.js`, and `c.js`) into one bundle (`bundle.js`) and one of the source files contains an error, the stack trace will simply point to `bundle.js`. This isn't always helpful as you probably want to know exactly which source file the error came from. + +In order to make it easier to track down errors and warnings, JavaScript offers [source maps](http://blog.teamtreehouse.com/introduction-source-maps), which maps your compiled code back to your original source code. If an error originates from `b.js`, the source map will tell you exactly that. + +There are a lot of [different options](/configuration/devtool) available when it comes to source maps, be sure to check them out so you can configure them to your needs. + +For this guide, let's use the `inline-source-map` option, which is good for illustrative purposes (though not for production): + +__webpack.config.js__ + +``` diff + const path = require('path'); + const HtmlWebpackPlugin = require('html-webpack-plugin'); + const CleanWebpackPlugin = require('clean-webpack-plugin'); + + module.exports = { + entry: { + app: './src/index.js', + print: './src/print.js' + }, ++ devtool: 'inline-source-map', + plugins: [ + new CleanWebpackPlugin(['dist']), + new HtmlWebpackPlugin({ + title: 'Development' + }) + ], + output: { + filename: '[name].bundle.js', + path: path.resolve(__dirname, 'dist') + } + }; +``` + +Now let's make sure we have something to debug, so let's create an error in our `print.js` file: + +__src/print.js__ + +``` diff + export default function printMe() { +- console.log('I get called from print.js!'); ++ cosnole.log('I get called from print.js!'); + } +``` + +Run an `npm run build`, it should compile to something like this: + +``` bash +Hash: 7bf68ca15f1f2690e2d1 +Version: webpack 3.1.0 +Time: 1224ms + Asset Size Chunks Chunk Names + app.bundle.js 1.44 MB 0, 1 [emitted] [big] app +print.bundle.js 6.43 kB 1 [emitted] print + index.html 248 bytes [emitted] + [0] ./src/print.js 84 bytes {0} {1} [built] + [1] ./src/index.js 403 bytes {0} [built] + [3] (webpack)/buildin/global.js 509 bytes {0} [built] + [4] (webpack)/buildin/module.js 517 bytes {0} [built] + + 1 hidden module +Child html-webpack-plugin for "index.html": + [2] (webpack)/buildin/global.js 509 bytes {0} [built] + [3] (webpack)/buildin/module.js 517 bytes {0} [built] + + 2 hidden modules +``` + +Now open the resulting `index.html` file in your browser. Click the button and look in your console where the error is displayed. The error should say something like this: + + ``` bash + Uncaught ReferenceError: cosnole is not defined + at HTMLButtonElement.printMe (print.js:2) + ``` + +We can see that the error also contains a reference to the file (`print.js`) and line number (2) where the error occurred. This is great, because now we know exactly where to look in order to fix the issue. + + +## Choosing a Development Tool + +W> Some text editors have a "safe write" function that might interfere with some of the following tools. Read [Adjusting Your text Editor](#adjusting-your-text-editor) for a solution to these issues. + +It quickly becomes a hassle to manually run `npm run build` every time you want to compile your code. + +There are a couple of different options available in webpack that help you automatically compile your code whenever it changes: + + 1. webpack's Watch Mode + 2. webpack-dev-server + 3. webpack-dev-middleware + +In most cases, you probably would want to use `webpack-dev-server`, but let's explore all of the above options. + + +### Using Watch Mode + +You can instruct webpack to "watch" all files within your dependency graph for changes. If one of these files is updated, the code will be recompiled so you don't have to run the full build manually. + +Let's add an npm script that will start webpack's Watch Mode: + +__package.json__ + +``` diff + { + "name": "development", + "version": "1.0.0", + "description": "", + "main": "webpack.config.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", ++ "watch": "webpack --watch", + "build": "webpack" + }, + "keywords": [], + "author": "", + "license": "ISC", + "devDependencies": { + "clean-webpack-plugin": "^0.1.16", + "css-loader": "^0.28.4", + "csv-loader": "^2.1.1", + "file-loader": "^0.11.2", + "html-webpack-plugin": "^2.29.0", + "style-loader": "^0.18.2", + "webpack": "^3.0.0", + "xml-loader": "^1.2.1" + } + } +``` + +You can now run `npm run watch` from the command line to see that webpack compiles your code, but doesn't exit to the command line. This is because the script is still watching your files. + +Now, with webpack watching your files, let's remove the error we introduced earlier: + +__src/print.js__ + +``` diff + export default function printMe() { +- cosnole.log('I get called from print.js!'); ++ console.log('I get called from print.js!'); + } +``` + +Now save your file and check the terminal window. You should see that webpack automatically recompiles the changed module! + +The only downside is that you have to refresh your browser in order to see the changes. It would be much nicer if that would happen automatically as well, so let's try `webpack-dev-server` which will do exactly that. + + +### Using webpack-dev-server + +The `webpack-dev-server` provides you with a simple web server and the ability to use live reloading. Let's set it up: + +``` bash +npm install --save-dev webpack-dev-server +``` + +Change your config file to tell the dev server where to look for files: + +__webpack.config.js__ + +``` diff + const path = require('path'); + const HtmlWebpackPlugin = require('html-webpack-plugin'); + const CleanWebpackPlugin = require('clean-webpack-plugin'); + + module.exports = { + entry: { + app: './src/index.js', + print: './src/print.js' + }, + devtool: 'inline-source-map', ++ devServer: { ++ contentBase: './dist' ++ }, + plugins: [ + new CleanWebpackPlugin(['dist']), + new HtmlWebpackPlugin({ + title: 'Development' + }) + ], + output: { + filename: '[name].bundle.js', + path: path.resolve(__dirname, 'dist') + } + }; +``` + +This tells `webpack-dev-server` to serve the files from the `dist` directory on `localhost:8080`. + +Let's add a script to easily run the dev server as well: + +__package.json__ + +``` diff + { + "name": "development", + "version": "1.0.0", + "description": "", + "main": "webpack.config.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "watch": "webpack --progress --watch", ++ "start": "webpack-dev-server --open", + "build": "webpack" + }, + "keywords": [], + "author": "", + "license": "ISC", + "devDependencies": { + "clean-webpack-plugin": "^0.1.16", + "css-loader": "^0.28.4", + "csv-loader": "^2.1.1", + "file-loader": "^0.11.2", + "html-webpack-plugin": "^2.29.0", + "style-loader": "^0.18.2", + "webpack": "^3.0.0", + "xml-loader": "^1.2.1" + } + } +``` + +Now we can run `npm start` from the command line and we will see our browser automatically loading up our page. If you now change any of the source files and save them, the web server will automatically reload after the code has been compiled. Give it a try! + +The `webpack-dev-server` comes with many configurable options. Head over to the [documentation](/configuration/dev-server) to learn more. + +T> Now that your server is working, you might want to give [Hot Module Replacement](/guides/hot-module-replacement) a try! + + +### Using webpack-dev-middleware + +`webpack-dev-middleware` is a wrapper that will emit files processed by webpack to a server. This is used in `webpack-dev-server` internally, however it's available as a separate package to allow more custom setups if desired. We'll take a look at an example that combines webpack-dev-middleware with an express server. + +Let's install `express` and `webpack-dev-middleware` so we can get started: + +``` bash +npm install --save-dev express webpack-dev-middleware +``` + +Now we need to make some adjustments to our webpack configuration file in order to make sure the middleware will function correctly: + +__webpack.config.js__ + +``` diff + const path = require('path'); + const HtmlWebpackPlugin = require('html-webpack-plugin'); + const CleanWebpackPlugin = require('clean-webpack-plugin'); + + module.exports = { + entry: { + app: './src/index.js', + print: './src/print.js' + }, + devtool: 'inline-source-map', + plugins: [ + new CleanWebpackPlugin(['dist']), + new HtmlWebpackPlugin({ + title: 'Output Management' + }) + ], + output: { + filename: '[name].bundle.js', + path: path.resolve(__dirname, 'dist'), ++ publicPath: '/' + } + }; +``` + +The `publicPath` will be used within our server script as well in order to make sure files are served correctly on `http://localhost:3000`, the port number we'll specify later. The next step is setting up our custom `express` server: + +__project__ + +``` diff + webpack-demo + |- package.json + |- webpack.config.js ++ |- server.js + |- /dist + |- /src + |- index.js + |- print.js + |- /node_modules +``` + +__server.js__ + +``` js +const express = require('express'); +const webpack = require('webpack'); +const webpackDevMiddleware = require('webpack-dev-middleware'); + +const app = express(); +const config = require('./webpack.config.js'); +const compiler = webpack(config); + +// Tell express to use the webpack-dev-middleware and use the webpack.config.js +// configuration file as a base. +app.use(webpackDevMiddleware(compiler, { + publicPath: config.output.publicPath +})); + +// Serve the files on port 3000. +app.listen(3000, function () { + console.log('Example app listening on port 3000!\n'); +}); +``` + +Now add an npm script to make it a little easier to run the server: + +__package.json__ + +``` diff + { + "name": "development", + "version": "1.0.0", + "description": "", + "main": "webpack.config.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "watch": "webpack --progress --watch", + "start": "webpack-dev-server --open", ++ "server": "node server.js", + "build": "webpack" + }, + "keywords": [], + "author": "", + "license": "ISC", + "devDependencies": { + "clean-webpack-plugin": "^0.1.16", + "css-loader": "^0.28.4", + "csv-loader": "^2.1.1", + "express": "^4.15.3", + "file-loader": "^0.11.2", + "html-webpack-plugin": "^2.29.0", + "style-loader": "^0.18.2", + "webpack": "^3.0.0", + "webpack-dev-middleware": "^1.12.0", + "xml-loader": "^1.2.1" + } + } +``` + +Now in your terminal run `npm run server`, it should give you an output similar to this: + +``` bash +Example app listening on port 3000! +webpack built 27b137af6d9d8668c373 in 1198ms +Hash: 27b137af6d9d8668c373 +Version: webpack 3.0.0 +Time: 1198ms + Asset Size Chunks Chunk Names + app.bundle.js 1.44 MB 0, 1 [emitted] [big] app +print.bundle.js 6.57 kB 1 [emitted] print + index.html 306 bytes [emitted] + [0] ./src/print.js 116 bytes {0} {1} [built] + [1] ./src/index.js 403 bytes {0} [built] + [2] ./node_modules/lodash/lodash.js 540 kB {0} [built] + [3] (webpack)/buildin/global.js 509 bytes {0} [built] + [4] (webpack)/buildin/module.js 517 bytes {0} [built] +Child html-webpack-plugin for "index.html": + Asset Size Chunks Chunk Names + index.html 544 kB 0 + [0] ./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs 538 bytes {0} [built] + [1] ./node_modules/lodash/lodash.js 540 kB {0} [built] + [2] (webpack)/buildin/global.js 509 bytes {0} [built] + [3] (webpack)/buildin/module.js 517 bytes {0} [built] +webpack: Compiled successfully. +``` + +Now fire up your browser and go to `http://localhost:3000`, you should see your webpack app running and functioning! + +T> If you would like to know more about how Hot Module Replacement works, we recommend you read the [Hot Module Replacement](/guides/hot-module-replacement/) guide. + + +## Adjusting Your Text Editor + +When using automatic compilation of your code, you could run into issues when saving your files. Some editors have a "safe write" feature that can potentially interfere with recompilation. + +To disable this feature in some common editors, see the list below: + +* **Sublime Text 3** - Add `atomic_save: "false"` to your user preferences. +* **IntelliJ** - use search in the preferences to find "safe write" and disable it. +* **Vim** - add `:set backupcopy=yes` to your settings. +* **WebStorm** - uncheck Use `"safe write"` in `Preferences > Appearance & Behavior > System Settings`. + + +## Conclusion + +Now that you've learned how to automatically compile your code and run a simple development server, you can check out the next guide, which will cover [Hot Module Replacement](/guides/hot-module-replacement). From 481cce7ebec07c5641b23b1fc83c5e17a8f770e9 Mon Sep 17 00:00:00 2001 From: John Reilly Date: Sat, 9 Dec 2017 06:46:18 +0000 Subject: [PATCH 2/9] Write intro to PWA guide --- src/content/guides/progressive-web-application.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/content/guides/progressive-web-application.md b/src/content/guides/progressive-web-application.md index 0325ab99105c..de35eeed5b32 100644 --- a/src/content/guides/progressive-web-application.md +++ b/src/content/guides/progressive-web-application.md @@ -5,10 +5,23 @@ contributors: - johnnyreilly --- +T> This guide extends on code examples found in the [Output Management](/guides/output-management) guide. + +Progressive Web Applications (or PWAs) are web apps that deliver an app-like experience to users. 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 when __offline__. PWAs can function without access to the internet. They achieve this through the use of a new web functionality called [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers/). + +This section will focus on adding an offline experience to our app. We'll achieve this using a project called [Workbox](https://github.com/GoogleChrome/workbox) which provides tools that help make offline support easier to setup. + + + https://github.com/webpack/webpack.js.org/issues/1145#issuecomment-346951250 -T> This guide extends on code examples found in the [Output Management](/guides/output-management) guide. + + + + + + If you've been following the guides, you should have a solid understanding of some of the webpack basics. Before we continue, let's look into setting up a development environment to make our lives a little easier. From 791b25e2b3dafce5cc4b282782baec5f1ba648df Mon Sep 17 00:00:00 2001 From: John Reilly Date: Sat, 9 Dec 2017 07:23:54 +0000 Subject: [PATCH 3/9] Added we dont work offline now section --- .../guides/progressive-web-application.md | 40 ++++++++++++++++++- 1 file changed, 39 insertions(+), 1 deletion(-) diff --git a/src/content/guides/progressive-web-application.md b/src/content/guides/progressive-web-application.md index de35eeed5b32..5887a596fd9b 100644 --- a/src/content/guides/progressive-web-application.md +++ b/src/content/guides/progressive-web-application.md @@ -7,10 +7,48 @@ contributors: T> This guide extends on code examples found in the [Output Management](/guides/output-management) guide. -Progressive Web Applications (or PWAs) are web apps that deliver an app-like experience to users. 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 when __offline__. PWAs can function without access to the internet. They achieve this through the use of a new web functionality called [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers/). +Progressive Web Applications (or PWAs) are web apps that deliver an app-like experience to users. 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 when __offline__. This is achieved through the use of a web technology called [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers/). This section will focus on adding an offline experience to our app. We'll achieve this using a project called [Workbox](https://github.com/GoogleChrome/workbox) which provides tools that help make offline support easier to setup. +## We Don't Work Offline Now + +So far, when we've been browsing our webpack output, we've been going directly to the local file system. That's not the typical experience a user has when accessing a web app. Normally a user accesses a web app over a network; their browser talking to a __server__ which will serve up the required assets; `html`, `js`, `css` etc. + +So let's test what the current experience is like using a simple server. Let's use the [http-server](https://www.npmjs.com/package/http-server) package: `npm install http-server --save-dev`. We'll also amend the `scripts` section of our `package.json` to add in a `start` script: + +``` diff +{ + ... + "scripts": { +- "build": "webpack" ++ "build": "webpack", ++ "start": "http-server dist" + }, + ... +} +``` + +If you run the command `npm run start`, you should see an output like this: + +``` bash +> http-server dist + +Starting up http-server, serving dist +Available on: + http://10.0.75.1:8080 + http://127.0.0.1:8080 + http://192.168.0.7:8080 +Hit CTRL-C to stop the server +``` + +If you open your browser to http://localhost:8080 you should see your webpack application. Now if you stop the server and refresh, your 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. + + + + https://github.com/webpack/webpack.js.org/issues/1145#issuecomment-346951250 From d2aa27fe713ae502b931eec9c7d4e2158d958f9c Mon Sep 17 00:00:00 2001 From: John Reilly Date: Tue, 12 Dec 2017 22:25:53 +0000 Subject: [PATCH 4/9] Add adding Workbox section --- .../guides/progressive-web-application.md | 83 +++++++++++++++++-- 1 file changed, 77 insertions(+), 6 deletions(-) diff --git a/src/content/guides/progressive-web-application.md b/src/content/guides/progressive-web-application.md index 5887a596fd9b..d84ffe8a7467 100644 --- a/src/content/guides/progressive-web-application.md +++ b/src/content/guides/progressive-web-application.md @@ -7,13 +7,13 @@ contributors: T> This guide extends on code examples found in the [Output Management](/guides/output-management) guide. -Progressive Web Applications (or PWAs) are web apps that deliver an app-like experience to users. 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 when __offline__. This is achieved through the use of a web technology called [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers/). +Progressive Web Applications (or PWAs) are web apps that deliver an app-like experience to users. 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 when __offline__. This is achieved through the use of a web technology called [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers/). -This section will focus on adding an offline experience to our app. We'll achieve this using a project called [Workbox](https://github.com/GoogleChrome/workbox) which provides tools that help make offline support easier to setup. +This section will focus on adding an offline experience to our app. We'll achieve this using a Google project called [Workbox](https://github.com/GoogleChrome/workbox) which provides tools that help make offline support for web apps easier to setup. ## We Don't Work Offline Now -So far, when we've been browsing our webpack output, we've been going directly to the local file system. That's not the typical experience a user has when accessing a web app. Normally a user accesses a web app over a network; their browser talking to a __server__ which will serve up the required assets; `html`, `js`, `css` etc. +So far, when we've been browsing our webpack output, we've been going directly to the local file system. That's not the typical experience a user has when accessing a web app. Normally a user accesses a web app over a network; their browser talking to a __server__ which will serve up the required assets; `html`, `js`, `css` etc. So let's test what the current experience is like using a simple server. Let's use the [http-server](https://www.npmjs.com/package/http-server) package: `npm install http-server --save-dev`. We'll also amend the `scripts` section of our `package.json` to add in a `start` script: @@ -29,7 +29,7 @@ So let's test what the current experience is like using a simple server. Let's } ``` -If you run the command `npm run start`, you should see an output like this: +If you haven't previously done so, run the command `npm run build` to build your project. Then run the command `npm run start`. This should produce output like this: ``` bash > http-server dist @@ -42,10 +42,81 @@ Available on: Hit CTRL-C to stop the server ``` -If you open your browser to http://localhost:8080 you should see your webpack application. Now if you stop the server and refresh, your webpack application is no longer available. +If you open your browser to http://localhost:8080 you should see your webpack application being served up from the `dist` 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. +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 the `webpack.config.js` file: + +``` bash +npm install workbox-webpack-plugin --save-dev +``` + +__webpack.config.js__ + +``` diff + const path = require('path'); + const HtmlWebpackPlugin = require('html-webpack-plugin'); + const CleanWebpackPlugin = require('clean-webpack-plugin'); ++ const WorkboxPlugin = require('workbox-webpack-plugin'); + + module.exports = { + entry: { + app: './src/index.js', + print: './src/print.js' + }, + plugins: [ + new CleanWebpackPlugin(['dist']), + new HtmlWebpackPlugin({ + title: 'Output Management' +- }) ++ }), ++ new WorkboxPlugin({ ++ // 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') + } + }; +``` + +With that in pace, let's see what happens when we do an `npm run build`: + +``` bash +clean-webpack-plugin: /mnt/c/Source/webpack-follow-along/dist has been removed. +Hash: 6588e31715d9be04be25 +Version: webpack 3.10.0 +Time: 782ms + Asset Size Chunks Chunk Names + app.bundle.js 545 kB 0, 1 [emitted] [big] app + print.bundle.js 2.74 kB 1 [emitted] print + index.html 254 bytes [emitted] +precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js 268 bytes [emitted] + sw.js 1 kB [emitted] + [0] ./src/print.js 87 bytes {0} {1} [built] + [1] ./src/index.js 477 bytes {0} [built] + [3] (webpack)/buildin/global.js 509 bytes {0} [built] + [4] (webpack)/buildin/module.js 517 bytes {0} [built] + + 1 hidden module +Child html-webpack-plugin for "index.html": + 1 asset + [2] (webpack)/buildin/global.js 509 bytes {0} [built] + [3] (webpack)/buildin/module.js 517 bytes {0} [built] + + 2 hidden modules +``` + +As you can see, we now have 2 extra files being generated; `sw.js` and the more verbose `precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js`. `sw.js` is the Service Worker file and `precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js` is a file that `sw.js` imports requires so it can run. + +So we're now at the happy point of having produced a Service Worker. What to do with it? + +## Registering Our Service Worker From 47220fc7bdf528272be35ffafa66272a04ad5b50 Mon Sep 17 00:00:00 2001 From: John Reilly Date: Tue, 12 Dec 2017 23:11:18 +0000 Subject: [PATCH 5/9] First draft complete --- .../guides/progressive-web-application.md | 419 +----------------- 1 file changed, 22 insertions(+), 397 deletions(-) diff --git a/src/content/guides/progressive-web-application.md b/src/content/guides/progressive-web-application.md index d84ffe8a7467..7d7fa1ba2874 100644 --- a/src/content/guides/progressive-web-application.md +++ b/src/content/guides/progressive-web-application.md @@ -7,7 +7,7 @@ contributors: T> This guide extends on code examples found in the [Output Management](/guides/output-management) guide. -Progressive Web Applications (or PWAs) are web apps that deliver an app-like experience to users. 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 when __offline__. This is achieved through the use of a web technology called [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers/). +Progressive Web Applications (or PWAs) are web apps that deliver an app-like experience to users. 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 when __offline__. This is achieved through the use of a web technology called [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers/). This section will focus on adding an offline experience to our app. We'll achieve this using a Google project called [Workbox](https://github.com/GoogleChrome/workbox) which provides tools that help make offline support for web apps easier to setup. @@ -15,7 +15,7 @@ This section will focus on adding an offline experience to our app. We'll achiev So far, when we've been browsing our webpack output, we've been going directly to the local file system. That's not the typical experience a user has when accessing a web app. Normally a user accesses a web app over a network; their browser talking to a __server__ which will serve up the required assets; `html`, `js`, `css` etc. -So let's test what the current experience is like using a simple server. Let's use the [http-server](https://www.npmjs.com/package/http-server) package: `npm install http-server --save-dev`. We'll also amend the `scripts` section of our `package.json` to add in a `start` script: +So let's test what the current experience is like using a simple server. Let's use the [http-server](https://www.npmjs.com/package/http-server) package: `npm install http-server --save-dev`. We'll also amend the `scripts` section of our `package.json` to add in a `start` script: ``` diff { @@ -29,7 +29,7 @@ So let's test what the current experience is like using a simple server. Let's } ``` -If you haven't previously done so, run the command `npm run build` to build your project. Then run the command `npm run start`. This should produce output like this: +If you haven't previously done so, run the command `npm run build` to build your project. Then run the command `npm run start`. This should produce output like this: ``` bash > http-server dist @@ -87,7 +87,7 @@ __webpack.config.js__ }; ``` -With that in pace, let's see what happens when we do an `npm run build`: +With that in place, let's see what happens when we do an `npm run build`: ``` bash clean-webpack-plugin: /mnt/c/Source/webpack-follow-along/dist has been removed. @@ -112,414 +112,39 @@ Child html-webpack-plugin for "index.html": + 2 hidden modules ``` -As you can see, we now have 2 extra files being generated; `sw.js` and the more verbose `precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js`. `sw.js` is the Service Worker file and `precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js` is a file that `sw.js` imports requires so it can run. +As you can see, we now have 2 extra files being generated; `sw.js` and the more verbose `precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js`. `sw.js` is the Service Worker file and `precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js` is a file that `sw.js` imports requires so it can run. Your own generated files will likely be different; but you should have an `sw.js` file there. So we're now at the happy point of having produced a Service Worker. What to do with it? ## Registering Our Service Worker +In order that our Service Worker can come out and play, we need to register it. We'll do that by adding the registration code below: - - - -https://github.com/webpack/webpack.js.org/issues/1145#issuecomment-346951250 - - - - - - - - - -If you've been following the guides, you should have a solid understanding of some of the webpack basics. Before we continue, let's look into setting up a development environment to make our lives a little easier. - -W> The tools in this guide are __only meant for development__, please __avoid__ using them in production!! - - -## Using source maps - -When webpack bundles your source code, it can become difficult to track down errors and warnings to their original location. For example, if you bundle three source files (`a.js`, `b.js`, and `c.js`) into one bundle (`bundle.js`) and one of the source files contains an error, the stack trace will simply point to `bundle.js`. This isn't always helpful as you probably want to know exactly which source file the error came from. - -In order to make it easier to track down errors and warnings, JavaScript offers [source maps](http://blog.teamtreehouse.com/introduction-source-maps), which maps your compiled code back to your original source code. If an error originates from `b.js`, the source map will tell you exactly that. - -There are a lot of [different options](/configuration/devtool) available when it comes to source maps, be sure to check them out so you can configure them to your needs. - -For this guide, let's use the `inline-source-map` option, which is good for illustrative purposes (though not for production): - -__webpack.config.js__ +__index.js__ ``` diff - const path = require('path'); - const HtmlWebpackPlugin = require('html-webpack-plugin'); - const CleanWebpackPlugin = require('clean-webpack-plugin'); + import _ from 'lodash'; + import printMe from './print.js'; - module.exports = { - entry: { - app: './src/index.js', - print: './src/print.js' - }, -+ devtool: 'inline-source-map', - plugins: [ - new CleanWebpackPlugin(['dist']), - new HtmlWebpackPlugin({ - title: 'Development' - }) - ], - output: { - filename: '[name].bundle.js', - path: path.resolve(__dirname, 'dist') - } - }; ++ if ('serviceWorker' in navigator) { ++ window.addEventListener('load', () => { ++ navigator.serviceWorker.register('/sw.js').then(registration => { ++ console.log('SW registered: ', registration); ++ }).catch(registrationError => { ++ console.log('SW registration failed: ', registrationError); ++ }); ++ }); ++ } ``` -Now let's make sure we have something to debug, so let's create an error in our `print.js` file: - -__src/print.js__ +Once more `npm run build` to build a version of the app incuding the registration code. Then serve it with `npm run start`. Navigate to http://localhost:8080 and take a look at the console. Somewhere in there you should see: -``` diff - export default function printMe() { -- console.log('I get called from print.js!'); -+ cosnole.log('I get called from print.js!'); - } ``` - -Run an `npm run build`, it should compile to something like this: - -``` bash -Hash: 7bf68ca15f1f2690e2d1 -Version: webpack 3.1.0 -Time: 1224ms - Asset Size Chunks Chunk Names - app.bundle.js 1.44 MB 0, 1 [emitted] [big] app -print.bundle.js 6.43 kB 1 [emitted] print - index.html 248 bytes [emitted] - [0] ./src/print.js 84 bytes {0} {1} [built] - [1] ./src/index.js 403 bytes {0} [built] - [3] (webpack)/buildin/global.js 509 bytes {0} [built] - [4] (webpack)/buildin/module.js 517 bytes {0} [built] - + 1 hidden module -Child html-webpack-plugin for "index.html": - [2] (webpack)/buildin/global.js 509 bytes {0} [built] - [3] (webpack)/buildin/module.js 517 bytes {0} [built] - + 2 hidden modules -``` - -Now open the resulting `index.html` file in your browser. Click the button and look in your console where the error is displayed. The error should say something like this: - - ``` bash - Uncaught ReferenceError: cosnole is not defined - at HTMLButtonElement.printMe (print.js:2) - ``` - -We can see that the error also contains a reference to the file (`print.js`) and line number (2) where the error occurred. This is great, because now we know exactly where to look in order to fix the issue. - - -## Choosing a Development Tool - -W> Some text editors have a "safe write" function that might interfere with some of the following tools. Read [Adjusting Your text Editor](#adjusting-your-text-editor) for a solution to these issues. - -It quickly becomes a hassle to manually run `npm run build` every time you want to compile your code. - -There are a couple of different options available in webpack that help you automatically compile your code whenever it changes: - - 1. webpack's Watch Mode - 2. webpack-dev-server - 3. webpack-dev-middleware - -In most cases, you probably would want to use `webpack-dev-server`, but let's explore all of the above options. - - -### Using Watch Mode - -You can instruct webpack to "watch" all files within your dependency graph for changes. If one of these files is updated, the code will be recompiled so you don't have to run the full build manually. - -Let's add an npm script that will start webpack's Watch Mode: - -__package.json__ - -``` diff - { - "name": "development", - "version": "1.0.0", - "description": "", - "main": "webpack.config.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", -+ "watch": "webpack --watch", - "build": "webpack" - }, - "keywords": [], - "author": "", - "license": "ISC", - "devDependencies": { - "clean-webpack-plugin": "^0.1.16", - "css-loader": "^0.28.4", - "csv-loader": "^2.1.1", - "file-loader": "^0.11.2", - "html-webpack-plugin": "^2.29.0", - "style-loader": "^0.18.2", - "webpack": "^3.0.0", - "xml-loader": "^1.2.1" - } - } -``` - -You can now run `npm run watch` from the command line to see that webpack compiles your code, but doesn't exit to the command line. This is because the script is still watching your files. - -Now, with webpack watching your files, let's remove the error we introduced earlier: - -__src/print.js__ - -``` diff - export default function printMe() { -- cosnole.log('I get called from print.js!'); -+ console.log('I get called from print.js!'); - } -``` - -Now save your file and check the terminal window. You should see that webpack automatically recompiles the changed module! - -The only downside is that you have to refresh your browser in order to see the changes. It would be much nicer if that would happen automatically as well, so let's try `webpack-dev-server` which will do exactly that. - - -### Using webpack-dev-server - -The `webpack-dev-server` provides you with a simple web server and the ability to use live reloading. Let's set it up: - -``` bash -npm install --save-dev webpack-dev-server +SW registered ``` -Change your config file to tell the dev server where to look for files: - -__webpack.config.js__ - -``` diff - const path = require('path'); - const HtmlWebpackPlugin = require('html-webpack-plugin'); - const CleanWebpackPlugin = require('clean-webpack-plugin'); - - module.exports = { - entry: { - app: './src/index.js', - print: './src/print.js' - }, - devtool: 'inline-source-map', -+ devServer: { -+ contentBase: './dist' -+ }, - plugins: [ - new CleanWebpackPlugin(['dist']), - new HtmlWebpackPlugin({ - title: 'Development' - }) - ], - output: { - filename: '[name].bundle.js', - path: path.resolve(__dirname, 'dist') - } - }; -``` - -This tells `webpack-dev-server` to serve the files from the `dist` directory on `localhost:8080`. - -Let's add a script to easily run the dev server as well: - -__package.json__ - -``` diff - { - "name": "development", - "version": "1.0.0", - "description": "", - "main": "webpack.config.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", - "watch": "webpack --progress --watch", -+ "start": "webpack-dev-server --open", - "build": "webpack" - }, - "keywords": [], - "author": "", - "license": "ISC", - "devDependencies": { - "clean-webpack-plugin": "^0.1.16", - "css-loader": "^0.28.4", - "csv-loader": "^2.1.1", - "file-loader": "^0.11.2", - "html-webpack-plugin": "^2.29.0", - "style-loader": "^0.18.2", - "webpack": "^3.0.0", - "xml-loader": "^1.2.1" - } - } -``` - -Now we can run `npm start` from the command line and we will see our browser automatically loading up our page. If you now change any of the source files and save them, the web server will automatically reload after the code has been compiled. Give it a try! - -The `webpack-dev-server` comes with many configurable options. Head over to the [documentation](/configuration/dev-server) to learn more. - -T> Now that your server is working, you might want to give [Hot Module Replacement](/guides/hot-module-replacement) a try! - - -### Using webpack-dev-middleware - -`webpack-dev-middleware` is a wrapper that will emit files processed by webpack to a server. This is used in `webpack-dev-server` internally, however it's available as a separate package to allow more custom setups if desired. We'll take a look at an example that combines webpack-dev-middleware with an express server. - -Let's install `express` and `webpack-dev-middleware` so we can get started: - -``` bash -npm install --save-dev express webpack-dev-middleware -``` - -Now we need to make some adjustments to our webpack configuration file in order to make sure the middleware will function correctly: - -__webpack.config.js__ - -``` diff - const path = require('path'); - const HtmlWebpackPlugin = require('html-webpack-plugin'); - const CleanWebpackPlugin = require('clean-webpack-plugin'); - - module.exports = { - entry: { - app: './src/index.js', - print: './src/print.js' - }, - devtool: 'inline-source-map', - plugins: [ - new CleanWebpackPlugin(['dist']), - new HtmlWebpackPlugin({ - title: 'Output Management' - }) - ], - output: { - filename: '[name].bundle.js', - path: path.resolve(__dirname, 'dist'), -+ publicPath: '/' - } - }; -``` - -The `publicPath` will be used within our server script as well in order to make sure files are served correctly on `http://localhost:3000`, the port number we'll specify later. The next step is setting up our custom `express` server: - -__project__ - -``` diff - webpack-demo - |- package.json - |- webpack.config.js -+ |- server.js - |- /dist - |- /src - |- index.js - |- print.js - |- /node_modules -``` - -__server.js__ - -``` js -const express = require('express'); -const webpack = require('webpack'); -const webpackDevMiddleware = require('webpack-dev-middleware'); - -const app = express(); -const config = require('./webpack.config.js'); -const compiler = webpack(config); - -// Tell express to use the webpack-dev-middleware and use the webpack.config.js -// configuration file as a base. -app.use(webpackDevMiddleware(compiler, { - publicPath: config.output.publicPath -})); - -// Serve the files on port 3000. -app.listen(3000, function () { - console.log('Example app listening on port 3000!\n'); -}); -``` - -Now add an npm script to make it a little easier to run the server: - -__package.json__ - -``` diff - { - "name": "development", - "version": "1.0.0", - "description": "", - "main": "webpack.config.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", - "watch": "webpack --progress --watch", - "start": "webpack-dev-server --open", -+ "server": "node server.js", - "build": "webpack" - }, - "keywords": [], - "author": "", - "license": "ISC", - "devDependencies": { - "clean-webpack-plugin": "^0.1.16", - "css-loader": "^0.28.4", - "csv-loader": "^2.1.1", - "express": "^4.15.3", - "file-loader": "^0.11.2", - "html-webpack-plugin": "^2.29.0", - "style-loader": "^0.18.2", - "webpack": "^3.0.0", - "webpack-dev-middleware": "^1.12.0", - "xml-loader": "^1.2.1" - } - } -``` - -Now in your terminal run `npm run server`, it should give you an output similar to this: - -``` bash -Example app listening on port 3000! -webpack built 27b137af6d9d8668c373 in 1198ms -Hash: 27b137af6d9d8668c373 -Version: webpack 3.0.0 -Time: 1198ms - Asset Size Chunks Chunk Names - app.bundle.js 1.44 MB 0, 1 [emitted] [big] app -print.bundle.js 6.57 kB 1 [emitted] print - index.html 306 bytes [emitted] - [0] ./src/print.js 116 bytes {0} {1} [built] - [1] ./src/index.js 403 bytes {0} [built] - [2] ./node_modules/lodash/lodash.js 540 kB {0} [built] - [3] (webpack)/buildin/global.js 509 bytes {0} [built] - [4] (webpack)/buildin/module.js 517 bytes {0} [built] -Child html-webpack-plugin for "index.html": - Asset Size Chunks Chunk Names - index.html 544 kB 0 - [0] ./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs 538 bytes {0} [built] - [1] ./node_modules/lodash/lodash.js 540 kB {0} [built] - [2] (webpack)/buildin/global.js 509 bytes {0} [built] - [3] (webpack)/buildin/module.js 517 bytes {0} [built] -webpack: Compiled successfully. -``` - -Now fire up your browser and go to `http://localhost:3000`, you should see your webpack app running and functioning! - -T> If you would like to know more about how Hot Module Replacement works, we recommend you read the [Hot Module Replacement](/guides/hot-module-replacement/) guide. - - -## Adjusting Your Text Editor - -When using automatic compilation of your code, you could run into issues when saving your files. Some editors have a "safe write" feature that can potentially interfere with recompilation. - -To disable this feature in some common editors, see the list below: - -* **Sublime Text 3** - Add `atomic_save: "false"` to your user preferences. -* **IntelliJ** - use search in the preferences to find "safe write" and disable it. -* **Vim** - add `:set backupcopy=yes` to your settings. -* **WebStorm** - uncheck Use `"safe write"` in `Preferences > Appearance & Behavior > System Settings`. - +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 and __not__ by the server. ## Conclusion -Now that you've learned how to automatically compile your code and run a simple development server, you can check out the next guide, which will cover [Hot Module Replacement](/guides/hot-module-replacement). +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 found [here](https://developers.google.com/web/progressive-web-apps/). \ No newline at end of file From 1343581bb476173f5bd0cedeb69f2f4251a92af4 Mon Sep 17 00:00:00 2001 From: John Reilly Date: Wed, 13 Dec 2017 06:53:07 +0000 Subject: [PATCH 6/9] add bash to illustration --- src/content/guides/progressive-web-application.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/guides/progressive-web-application.md b/src/content/guides/progressive-web-application.md index 7d7fa1ba2874..f7d70d1ca98d 100644 --- a/src/content/guides/progressive-web-application.md +++ b/src/content/guides/progressive-web-application.md @@ -139,7 +139,7 @@ __index.js__ Once more `npm run build` to build a version of the app incuding the registration code. Then serve it with `npm run start`. Navigate to http://localhost:8080 and take a look at the console. Somewhere in there you should see: -``` +``` bash SW registered ``` From 8644178f380d430f93567c0e46ad0e88946e4964 Mon Sep 17 00:00:00 2001 From: John Reilly Date: Wed, 13 Dec 2017 07:27:10 +0000 Subject: [PATCH 7/9] remove space --- src/content/guides/progressive-web-application.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/guides/progressive-web-application.md b/src/content/guides/progressive-web-application.md index f7d70d1ca98d..3b50cad387cc 100644 --- a/src/content/guides/progressive-web-application.md +++ b/src/content/guides/progressive-web-application.md @@ -15,7 +15,7 @@ This section will focus on adding an offline experience to our app. We'll achiev So far, when we've been browsing our webpack output, we've been going directly to the local file system. That's not the typical experience a user has when accessing a web app. Normally a user accesses a web app over a network; their browser talking to a __server__ which will serve up the required assets; `html`, `js`, `css` etc. -So let's test what the current experience is like using a simple server. Let's use the [http-server](https://www.npmjs.com/package/http-server) package: `npm install http-server --save-dev`. We'll also amend the `scripts` section of our `package.json` to add in a `start` script: +So let's test what the current experience is like using a simple server. Let's use the [http-server](https://www.npmjs.com/package/http-server) package: `npm install http-server --save-dev`. We'll also amend the `scripts` section of our `package.json` to add in a `start` script: ``` diff { From 025554ca13506b22b1124bc27d719527acf38236 Mon Sep 17 00:00:00 2001 From: John Reilly Date: Sun, 17 Dec 2017 06:22:51 +0000 Subject: [PATCH 8/9] Make changes suggested by @skipjack --- .../guides/progressive-web-application.md | 64 ++++++++++--------- 1 file changed, 35 insertions(+), 29 deletions(-) diff --git a/src/content/guides/progressive-web-application.md b/src/content/guides/progressive-web-application.md index 3b50cad387cc..19c6ef4baa2d 100644 --- a/src/content/guides/progressive-web-application.md +++ b/src/content/guides/progressive-web-application.md @@ -1,22 +1,25 @@ --- title: Progressive Web Application -sort: 26 +sort: 14 contributors: - johnnyreilly --- T> This guide extends on code examples found in the [Output Management](/guides/output-management) guide. -Progressive Web Applications (or PWAs) are web apps that deliver an app-like experience to users. 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 when __offline__. This is achieved through the use of a web technology called [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers/). +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 when __offline__. This is achieved through the use of a web technology called [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers/). This section will focus on adding an offline experience to our app. We'll achieve this using a Google project called [Workbox](https://github.com/GoogleChrome/workbox) which provides tools that help make offline support for web apps easier to setup. + ## We Don't Work Offline Now -So far, when we've been browsing our webpack output, we've been going directly to the local file system. That's not the typical experience a user has when accessing a web app. Normally a user accesses a web app over a network; their browser talking to a __server__ which will serve up the required assets; `html`, `js`, `css` etc. +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 a __server__ 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 simple server. Let's use the [http-server](https://www.npmjs.com/package/http-server) package: `npm install http-server --save-dev`. We'll also amend the `scripts` section of our `package.json` to add in a `start` script: +__package.json__ + ``` diff { ... @@ -29,16 +32,16 @@ So let's test what the current experience is like using a simple server. Let's u } ``` -If you haven't previously done so, run the command `npm run build` to build your project. Then run the command `npm run start`. This should produce output like this: +If you haven't previously done so, run the command `npm run build` to build your project. Then run the command `npm start`. This should produce output like this: ``` bash > http-server dist Starting up http-server, serving dist Available on: - http://10.0.75.1:8080 + http://xx.x.x.x:8080 http://127.0.0.1:8080 - http://192.168.0.7:8080 + http://xxx.xxx.x.x:8080 Hit CTRL-C to stop the server ``` @@ -46,6 +49,7 @@ If you open your browser to http://localhost:8080 you should see your webpack ap 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 the `webpack.config.js` file: @@ -67,19 +71,19 @@ __webpack.config.js__ app: './src/index.js', print: './src/print.js' }, - plugins: [ - new CleanWebpackPlugin(['dist']), - new HtmlWebpackPlugin({ - title: 'Output Management' -- }) -+ }), -+ new WorkboxPlugin({ -+ // these options encourage the ServiceWorkers to get in there fast -+ // and not allow any straggling "old" SWs to hang around -+ clientsClaim: true, -+ skipWaiting: true, -+ }) - ], + plugins: [ + new CleanWebpackPlugin(['dist']), + new HtmlWebpackPlugin({ + title: 'Output Management' +- }) ++ }), ++ new WorkboxPlugin({ ++ // 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') @@ -112,13 +116,14 @@ Child html-webpack-plugin for "index.html": + 2 hidden modules ``` -As you can see, we now have 2 extra files being generated; `sw.js` and the more verbose `precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js`. `sw.js` is the Service Worker file and `precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js` is a file that `sw.js` imports requires so it can run. Your own generated files will likely be different; but you should have an `sw.js` file there. +As you can see, we now have 2 extra files being generated; `sw.js` and the more verbose `precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js`. `sw.js` is the Service Worker file and `precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js` is a file that `sw.js` requires so it can run. Your own generated files will likely be different; but you should have an `sw.js` file there. + +So we're now at the happy point of having produced a Service Worker. What's next? -So we're now at the happy point of having produced a Service Worker. What to do with it? ## Registering Our Service Worker -In order that our Service Worker can come out and play, we need to register it. We'll do that by adding the registration code below: +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__ @@ -127,17 +132,17 @@ __index.js__ import printMe from './print.js'; + if ('serviceWorker' in navigator) { -+ window.addEventListener('load', () => { -+ navigator.serviceWorker.register('/sw.js').then(registration => { -+ console.log('SW registered: ', registration); -+ }).catch(registrationError => { -+ console.log('SW registration failed: ', registrationError); -+ }); ++ window.addEventListener('load', () => { ++ navigator.serviceWorker.register('/sw.js').then(registration => { ++ console.log('SW registered: ', registration); ++ }).catch(registrationError => { ++ console.log('SW registration failed: ', registrationError); + }); ++ }); + } ``` -Once more `npm run build` to build a version of the app incuding the registration code. Then serve it with `npm run start`. Navigate to http://localhost:8080 and take a look at the console. Somewhere in there you should see: +Once more `npm run build` to build a version of the app including the registration code. Then serve it with `npm start`. Navigate to http://localhost:8080 and take a look at the console. Somewhere in there you should see: ``` bash SW registered @@ -145,6 +150,7 @@ 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 and __not__ 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 found [here](https://developers.google.com/web/progressive-web-apps/). \ No newline at end of file From 8de47fae1eda941508ae9eab2e2cb2589374e57a Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Sun, 17 Dec 2017 22:42:41 -0500 Subject: [PATCH 9/9] minor tweaks to progressive-web-applications guide --- .../guides/progressive-web-application.md | 27 ++++++++++--------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/src/content/guides/progressive-web-application.md b/src/content/guides/progressive-web-application.md index 19c6ef4baa2d..5fba61feaa87 100644 --- a/src/content/guides/progressive-web-application.md +++ b/src/content/guides/progressive-web-application.md @@ -32,7 +32,7 @@ __package.json__ } ``` -If you haven't previously done so, run the command `npm run build` to build your project. Then run the command `npm start`. This should produce output like this: +If you haven't previously done so, run the command `npm run build` to build your project. Then run the command `npm start`. This should produce the following output: ``` bash > http-server dist @@ -45,7 +45,7 @@ Available on: Hit CTRL-C to stop the server ``` -If you open your browser to http://localhost:8080 you should see your webpack application being served up from the `dist` directory. If you stop the server and refresh, the webpack application is no longer available. +If you open your browser to `http://localhost:8080` (i.e. `http://127.0.0.1`) you should see your webpack application being served up from the `dist` 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. @@ -74,15 +74,16 @@ __webpack.config.js__ plugins: [ new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({ - title: 'Output Management' -- }) -+ }), -+ new WorkboxPlugin({ -+ // these options encourage the ServiceWorkers to get in there fast -+ // and not allow any straggling "old" SWs to hang around -+ clientsClaim: true, -+ skipWaiting: true -+ }) +- title: 'Output Management' ++ title: 'Progressive Web Application' +- }) ++ }), ++ new WorkboxPlugin({ ++ // 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', @@ -142,7 +143,7 @@ __index.js__ + } ``` -Once more `npm run build` to build a version of the app including the registration code. Then serve it with `npm start`. Navigate to http://localhost:8080 and take a look at the console. Somewhere in there you should see: +Once more `npm run build` to build a version of the app including the registration code. Then serve it with `npm start`. Navigate to `http://localhost:8080` and take a look at the console. Somewhere in there you should see: ``` bash SW registered @@ -153,4 +154,4 @@ Now to test it. Stop your server and refresh your page. If your browser supports ## 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 found [here](https://developers.google.com/web/progressive-web-apps/). \ No newline at end of file +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 found [here](https://developers.google.com/web/progressive-web-apps/).