From fbdd1d4bbf6c4435526462e00e4fb39358e5d147 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Manuel=20Kie=C3=9Fling?= <manuel@kiessling.net>
Date: Mon, 17 Sep 2018 11:52:37 +0200
Subject: [PATCH] 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 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
See https://github.com/GoogleChromeLabs/sw-precache/issues/269#issuecomment-288730373
---
 code/playground/KNOWN-BUGS.md            | 17 -----------------
 code/playground/webpack.client.config.js | 11 +++--------
 2 files changed, 3 insertions(+), 25 deletions(-)

diff --git a/code/playground/KNOWN-BUGS.md b/code/playground/KNOWN-BUGS.md
index 860b81f..b37660b 100644
--- a/code/playground/KNOWN-BUGS.md
+++ b/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
-
diff --git a/code/playground/webpack.client.config.js b/code/playground/webpack.client.config.js
index 381b0a4..f14084c 100644
--- a/code/playground/webpack.client.config.js
+++ b/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",