Fixed no-longer-available-assets-referenced-in-offline-cache-html problem.

The problem was as follows:

- Webpack builds the app js and stores it as e.g. app.hash-1.js
- When requesting the server, the client initializes the service worker,
  which in turn stores /sw-precache-appshell in the cache; in
  sw-precache-appshell's HTML, app.hash-1.js is referenced; also
  app.hash-1.js is stored in the cache
- On subsequent soft-loads, the content of sw-precache-appshell is
  served from the cache
- The app is changed and rebuilt, resulting in file app.hash-2.js; file
  app.hash-1.js is no longer served by the backend
- Another soft-load results in the cached version of
  sw-precache-appshell being served, which still references
  app.hash-1.js - as this is still in the cache and served from there,
  all works fine
- The service worker fetches itself at /service-worker.js, realizes that
  the app js has changed, fetches app.hash-2.js, and stores that in the
  cache, removing app.hash-1.js from the cache; however, the service
  worker does not realize that /sw-precache-appshell changes, which
  could be a bug in sw-prefetch; thus the "old" version of
  sw-precache-appshell which still refers to the "old" app.hash-1.js,
  remains in the cache
- Doing a soft-load again, the service worker serves the old
  sw-precache-appshell content, where app.hash-1.js is now referenced;
  as this is available neither from cache nor from the backend, the app
  stops working

The solution here is to NOT use any kind of hash-based file naming for
WebPack-generated files, but simply use a static name; this way, the
reference is always to "app.js" which always matches, while the service-
worker still knows when to fetch new file content and update the cache.

See GoogleChromeLabs/sw-precache#356
See api-platform/website#62
See gatsbyjs/gatsby#4636
See GoogleChromeLabs/sw-precache#269 (comment)

Author: manuelkiessling

code/playground/webpack.client.config.js

@@ -1,4 +1,3 @@
-const HtmlWebPackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const ManifestPlugin = require('webpack-manifest-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
@@ -88,7 +87,7 @@ module.exports = {
     },
     plugins: [
         new MiniCssExtractPlugin({
-            filename: "app.[contenthash].css",
+            filename: "app.css",
         }),
         new ManifestPlugin({
             "fileName": "assets-manifest.json"
@@ -111,17 +110,13 @@ module.exports = {
                     "/sw-precache-appshell": [ // This entry is required to make the navigateFallback work
                         ...glob.sync(path.resolve("dist/**/*.js")),
                         ...glob.sync(path.resolve("dist/**/*.css"))
-                    ]
+                    ],
                 },
-                runtimeCaching: [{
-                    urlPattern: /^/,
-                    handler: "networkFirst"
-                }]
             }
         )
     ],
     entry: "./src/client/index.js",
-    output: { filename: "client.[chunkhash].js" },
+    output: { filename: "client.js" },
     devtool: "source-map",
     devServer: {
         contentBase: "./dist",