Fixed no-longer-available-assets-referenced-in-offline-cache-html pro…

…blem.

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)

code/playground/KNOWN-BUGS.md

@@ -3,20 +3,3 @@
 ## The server serves its own code
 
 See http://localhost:8000/server.js when running the server
-
-
-## Subsequent requests after changing the app JS still try to load old JS file
-
-This seems to happen because sw-precache stores the fallback file which references the old JS file, and upon the 2nd
-soft-reload while online, the fallback file is used instead of getting the document from the server, however, the
-old referenced JS file is retrieved by the sw from the server, it is no longer available there, and thus invalid content
-is delivered.
-
-See https://github.com/GoogleChromeLabs/sw-precache/issues/356
-See https://github.com/api-platform/website/issues/62
-See https://github.com/gatsbyjs/gatsby/issues/4636
-
-More likely, the problem is that /tasks is cached by sw-precache and ALWAYS served from sw-precache:
-
-https://github.com/GoogleChromeLabs/sw-precache/issues/269#issuecomment-288730373
-

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",