Precache + Preload

grgur · grgur · commit 3019a92b3b3b · 2017-01-23T11:32:18.000+01:00
With appcache fallback, using offline-plugin
diff --git a/client/containers/App/index.js b/client/containers/App/index.js
@@ -1,18 +1,11 @@
 import React, { Component, PropTypes } from 'react';
 import Toolbar from 'components/Toolbar';
+import preload from 'utils/preload';
 import './style.scss';
 
-const tag = document.createElement('script');
-tag.async = 1;
-
-const addScript = src => {
-  tag.src = src;
-  document.head.appendChild(tag.cloneNode());
-};
-
 export default class App extends Component {
   componentDidMount() {
-    window.__CHUNKS.forEach(addScript);
+    window.__CHUNKS.forEach(preload);
   }
 
   render() {
diff --git a/client/index.ejs b/client/index.ejs
@@ -8,10 +8,5 @@
   <body>
     <div id="root"></div>
     <script>window.__CHUNKS=[];</script>
-    <script>
-        if ('serviceWorker' in navigator) {
-          navigator.serviceWorker.register('/my-service-worker.js');
-        }
-    </script>
   </body>
 </html>
diff --git a/client/index.js b/client/index.js
@@ -2,8 +2,11 @@ import { render } from 'react-dom';
 import React from 'react';
 import { Router, browserHistory } from 'react-router/es6';
 import rootRoute from 'pages/routes';
+import offline from 'offline-plugin/runtime';
 import 'general.scss';
 
+offline.install();
+
 render(
   <Router history={browserHistory} routes={rootRoute} />,
   document.getElementById('root')
diff --git a/client/utils/preload.js b/client/utils/preload.js
@@ -0,0 +1,12 @@
+/**
+ * Preload resources
+ */
+
+const tag = document.createElement('link');
+tag.rel = 'preload';
+tag.as = 'script';
+
+export default (src) => {
+  tag.href = src;
+  document.head.appendChild(tag.cloneNode());
+};
diff --git a/package.json b/package.json
@@ -22,9 +22,9 @@
     "file-loader": "0.8.5",
     "html-webpack-plugin": "2.26.0",
     "node-sass": "3.12.2",
+    "offline-plugin": "^4.5.5",
     "sass-loader": "3.2.3",
     "style-loader": "0.13.1",
-    "sw-precache-webpack-plugin": "0.7.2",
     "webpack": "2.2.0",
     "webpack-dev-server": "2.2.0"
   },
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,7 +1,7 @@
 const webpack = require('webpack');
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
+const OfflinePlugin = require('offline-plugin');
 
 const nodeEnv = process.env.NODE_ENV || 'development';
 const isProd = nodeEnv === 'production';
@@ -19,7 +19,6 @@ const plugins = [
   new webpack.optimize.CommonsChunkPlugin({
     name: 'vendor',
     minChunks: Infinity,
-    filename: 'vendor.bundle.js'
   }),
 
   /**
@@ -39,23 +38,39 @@ const plugins = [
   }),
 
   /**
-   * Precache resources using Service Workers
+   * Precache resources using Service Workers, fallback to appcache
    */
-  new SWPrecacheWebpackPlugin({
-    cacheId: 'react-dynamic-route-loading-es6',
-    filename: 'my-service-worker.js',
-    runtimeCaching: [{
-      handler: 'cacheFirst',
-      urlPattern: /(.*?)/
-    }],
+  new OfflinePlugin({
+    relativePaths: false,
+    publicPath: '/',
+    updateStrategy: 'all',
+    version: '[hash]',
+    preferOnline: true,
+    safeToUseOptionalCaches: true,
+    caches: {
+      main: ['core.*.js'],
+      additional: ['chunk.*.js'],
+      optional: [':rest:'],
+    },
+    excludes: [
+      '*_webpack_*',
+    ],
+    ServiceWorker: {
+      navigateFallbackURL: '/',
+      events: true,
+    },
+    AppCache: {
+      FALLBACK: { '/': '/' },
+      caches: ['main', 'additional']
+    },
   }),
 
   /**
    * Create a JSON file that contains file names of all chunks
    */
   function() {
     const compiler = this;
-    const chunkRegEx = /^chunk[.]/;
+    const chunkRegEx = /^chunk[.].*js$/;
     compiler.plugin('compilation', function(compilation) {
       compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, cb) {
         // find all chunk file names
@@ -113,10 +128,10 @@ if (isProd) {
 }
 
 module.exports = {
-  devtool: isProd ? 'source-map' : 'eval',
+  devtool: isProd ? 'source-map' : 'cheap-module-source-map',
   context: sourcePath,
   entry: {
-    js: [
+    core: [
       'index',
       'pages/Home'
     ],
@@ -127,8 +142,8 @@ module.exports = {
   },
   output: {
     path: staticsPath,
-    filename: 'bundle.js',
-    chunkFilename: 'chunk.[chunkhash].js',
+    filename: '[name].[chunkhash:8].js',
+    chunkFilename: 'chunk.[chunkhash:8].js',
     publicPath: '/',
   },
   module: {
