diff --git a/generator/src/develop.js b/generator/src/develop.js
index 8b1c3553..cf5c5de5 100644
--- a/generator/src/develop.js
+++ b/generator/src/develop.js
@@ -5,7 +5,7 @@ const HTMLWebpackPlugin = require("html-webpack-plugin");
 const CopyPlugin = require("copy-webpack-plugin");
 const PrerenderSPAPlugin = require("prerender-spa-plugin");
 const merge = require("webpack-merge");
-const { GenerateSW } = require("workbox-webpack-plugin");
+const { InjectManifest } = require("workbox-webpack-plugin");
 const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
 const webpackDevServer = require("webpack-dev-server");
 const AddFilesPlugin = require("./add-files-plugin.js");
@@ -189,45 +189,15 @@ function webpackOptions(production, routes, { debug, manifestConfig }) {
           }
         }
       }),
-      new GenerateSW({
-        skipWaiting: true,
-        clientsClaim: true,
-        include: [
-          /^index\.html$/,
-          /\.js$/,
-          /content\.txt$/,
-          /\.(?:png|gif|jpg|jpeg|svg)$/
-        ],
+      new InjectManifest({
+        swSrc: path.resolve(__dirname, "./service-worker-template.js"),
+        include: [/^index\.html$/, /\.js$/, /\.(?:png|gif|jpg|jpeg|svg)$/],
         exclude: [
           /android-chrome-.*\.png$/,
           /apple-touch-icon.*\.png/,
           /assets\//
         ],
-        navigateFallback: "index.html",
-        swDest: "service-worker.js",
-        runtimeCaching: [
-          {
-            urlPattern: /^https:\/\/fonts\.gstatic\.com/,
-            handler: "CacheFirst",
-            options: {
-              cacheName: "google-fonts-webfonts"
-            }
-          },
-          {
-            urlPattern: /^https:\/\/fonts\.googleapis\.com/,
-            handler: "StaleWhileRevalidate",
-            options: {
-              cacheName: "google-fonts-stylesheets"
-            }
-          },
-          {
-            urlPattern: /\.(?:png|gif|jpg|jpeg|svg)$/,
-            handler: "CacheFirst",
-            options: {
-              cacheName: "images"
-            }
-          }
-        ]
+        swDest: "service-worker.js"
       })
       // comment this out to do performance profiling
       // (drag-and-drop `events.json` file into Chrome performance tab)
diff --git a/generator/src/service-worker-template.js b/generator/src/service-worker-template.js
new file mode 100644
index 00000000..2d92c767
--- /dev/null
+++ b/generator/src/service-worker-template.js
@@ -0,0 +1,45 @@
+workbox.core.skipWaiting();
+workbox.core.clientsClaim();
+workbox.routing.registerNavigationRoute("index.html");
+
+// workbox.routing.registerNavigationRoute(
+//   workbox.precaching.getCacheKeyForURL("index.html")
+// );
+
+workbox.routing.registerRoute(
+  /^https:\/\/fonts\.gstatic\.com/,
+  new workbox.strategies.CacheFirst({
+    cacheName: "google-fonts-webfonts",
+    plugins: []
+  }),
+  "GET"
+);
+workbox.routing.registerRoute(
+  /^https:\/\/fonts\.googleapis\.com/,
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: "google-fonts-stylesheets",
+    plugins: []
+  }),
+  "GET"
+);
+workbox.routing.registerRoute(
+  /\.(?:png|gif|jpg|jpeg|svg)$/,
+  new workbox.strategies.CacheFirst({ cacheName: "images", plugins: [] }),
+  "GET"
+);
+workbox.routing.registerRoute(
+  /\.(?:png|gif|jpg|jpeg|svg)$/,
+  new workbox.strategies.CacheFirst({ cacheName: "images", plugins: [] }),
+  "GET"
+);
+
+workbox.routing.registerRoute(
+  /content\.txt$/,
+  new workbox.strategies.NetworkFirst({
+    cacheName: "content",
+    plugins: []
+  }),
+  "GET"
+);
+
+workbox.precaching.precacheAndRoute(self.__precacheManifest);