Use cache.addAll

Author: guilhermesimoes

_posts/2023-03-13-this-blog-is-now-a-pwa.md

@@ -35,13 +35,13 @@ If suddenly the device connects to the network it automatically reloads the page
 
 ---
 
-I did hit this snag when using [`cache.addAll`] to cache my offline page. It does cache everything correctly. But when the user is offline and tries to navigate somewhere and the worker returns the offline page this error occurs:
+I did hit this snag when using [`cache.addAll`] to cache my offline page. It does cache everything correctly. But when the user is offline and tries to navigate somewhere and the worker returns the cached offline page this error occurs:
 
 > The FetchEvent for "http://page-the-user-was-trying-to-access"
 > resulted in a network error response: a redirected response was
 > used for a request whose redirect mode is not "follow".
 
-Apparently this is due to a [new security restriction] but I don't get it. It all seems so cryptic to me. [StackOverflow came to my rescue] though. So now I'm just calling `fetch` for each of the pages that I want to cache. All tutorials that I saw did use [`cache.addAll`] so either I'm doing something wrong or they're already out of date. If you bump into the same problem now you know!
+Apparently this is due to a [new security restriction] but I don't get it. It all seems so cryptic to me. [StackOverflow came to my rescue] though. So now I'm wrapping a `response` with `new Response(response.body)`. All tutorials that I saw simply used [`cache.addAll`] so either I'm doing something wrong or they're already out of date. If you bump into the same problem now you know!
 
 ---
 

service-worker.js

@@ -1,11 +1,13 @@
 var CACHE_NAME = 'v1';
 
-async function cacheResources(resources) {
-  var cache = await caches.open(CACHE_NAME);
-  var promises = resources.map((resource) =>
-    fetch(resource).then(response => cache.put(resource, response.clone()))
+function cacheInitialResources() {
+  return caches.open(CACHE_NAME).then((cache) =>
+    cache.addAll([
+      '/',
+      '/blog/',
+      '/offline',
+    ]),
   );
-  return Promise.all(promises);
 }
 
 function clearOldCaches() {
@@ -50,13 +52,7 @@ async function fetchOrGoToOfflinePage(fetchEvent) {
 
 function onInstall(installEvent) {
   skipWaiting();
-  installEvent.waitUntil(
-    cacheResources([
-      '/',
-      '/blog/',
-      '/offline',
-    ])
-  );
+  installEvent.waitUntil(cacheInitialResources());
 }
 
 function onActivate(activateEvent) {