Add ServiceWorker → offline-plugin

Author: Didier Franc

.eslintignore

@@ -1 +1 @@
-dist/assets/*.js
+/dist

assets/favicon.ico

@@ -4,7 +4,7 @@
   "description": "Get started with ES2015, React and Redux. Including Webpack, ESLint, react-router, fetch ...",
   "scripts": {
     "start": "webpack-dev-server --open --config webpack/webpack.config.dev.js",
-    "build": "rm -rf dist && webpack --config webpack/webpack.config.prod.js",
+    "build": "rm -rf dist && webpack --config webpack/webpack.config.prod.js  && cp -a assets/ dist/",
     "prod": "cd dist && python -m SimpleHTTPServer 8080",
     "lint": "eslint src",
     "ngrok": "ngrok http -region eu 8080",
@@ -51,6 +51,7 @@
     "webpack-dev-server": "2.2.0-rc.0"
   },
   "dependencies": {
+    "offline-plugin": "^4.5.3",
     "react": "^15.4.1",
     "react-dom": "^15.4.1",
     "react-redux": "^5.0.1",

package.json

@@ -1,3 +1,4 @@
+import Offline from 'offline-plugin/runtime'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { render } from 'react-dom'
@@ -11,6 +12,8 @@ import Login from './components/Login'
 import Header from './components/Header'
 import { Body } from './components/Styled'
 
+Offline.install()
+
 export const Root = () => (
   <Provider store={store}>
     <BrowserRouter>

src/index.js

@@ -1,6 +1,7 @@
 const { resolve } = require('path')
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const OfflinePlugin = require('offline-plugin')
 
 module.exports = {
   entry: {
@@ -18,8 +19,9 @@ module.exports = {
     'react-dom': 'ReactDOM',
   },
   output: {
-    path: resolve(__dirname, '../dist/assets'),
     filename: '[name].[chunkhash].js',
+    path: resolve(__dirname, '../dist'),
+    publicPath: '/',
   },
   module: {
     rules: [
@@ -41,9 +43,15 @@ module.exports = {
       names: ['vendor', 'manifest'],
     }),
     new HtmlWebpackPlugin({
-      filename: '../index.html',
+      filename: 'index.html',
       title: 'redux-react-starter',
       template: 'webpack/template.html',
     }),
+    new OfflinePlugin({
+      ServiceWorker: {
+        navigateFallbackURL: '/',
+      },
+      AppCache: false,
+    }),
   ],
 }

webpack/webpack.config.prod.js

@@ -1499,7 +1499,7 @@ decamelize@^1.0.0, decamelize@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
 
-deep-extend@~0.4.0:
+deep-extend@^0.4.0, deep-extend@~0.4.0:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.1.tgz#efe4113d08085f4e6f9687759810f807469e2253"
 
@@ -1629,6 +1629,10 @@ [email protected]:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
+ejs@^2.3.4:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.5.5.tgz#6ef4e954ea7dcf54f66aad2fe7aa421932d9ed77"
+
 elliptic@^6.0.0:
   version "6.3.2"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.3.2.tgz#e4c81e0829cf0a65ab70e998b8232723b5c1bc48"
@@ -3105,7 +3109,7 @@ loader-runner@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.2.0.tgz#824c1b699c4e7a2b6501b85902d5b862bf45b3fa"
 
-loader-utils@^0.2.11, loader-utils@^0.2.16:
+loader-utils@0.2.x, loader-utils@^0.2.11, loader-utils@^0.2.16:
   version "0.2.16"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.16.tgz#f08632066ed8282835dff88dfb52704765adee6d"
   dependencies:
@@ -3530,6 +3534,16 @@ obuf@^1.0.0, obuf@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.1.tgz#104124b6c602c6796881a042541d36db43a5264e"
 
+offline-plugin@^4.5.3:
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/offline-plugin/-/offline-plugin-4.5.3.tgz#39c2bd7a3fc74fadaa601d0aa20dc4f74ae24add"
+  dependencies:
+    deep-extend "^0.4.0"
+    ejs "^2.3.4"
+    loader-utils "0.2.x"
+    minimatch "^3.0.3"
+    slash "^1.0.0"
+
 on-finished@~2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"