努力理解为什么我的服务人员不工作 - 未捕获（承诺）类型错误：请求失败

Question

I've been following the instructions at https://www.pwabuilder.com to make my site available offline. In the console log I'm getting messages stating the PWA has been installed, and is cached offline but I'm getting the error in the title.

I've been to numerous stackoverflow threads and other sites and nothing I am trying is working. This isn't my forte I'm a UX/UI designer who can code simple static pages but this is a little above my skill level at the moment.

I'm really struggling to figure out how to fix the issue as (to me) the error is quite vague. I'm assuming its something simple ive missed. The site url is https://ovoc.netlify.com/ but I will also link the manifest and service worker below

manifest.json

{
    "dir": "ltr",
    "lang": "en",
    "name": "Our voice our community | Get involved in de…",
    "scope": "/",
    "display": "fullscreen",
    "start_url": "https://ovoc.netlify.com/",
    "short_name": "OVOC",
    "theme_color": "transparent",
    "description": "Our voice our community is a project run by BGC Wales to empower young people to engage in community decision making",
    "orientation": "any",
    "background_color": "transparent",
    "related_applications": [],
    "prefer_related_applications": false,
    "icons": [{
    "src": "assets/icons/logo.png",
    "sizes": "192x192",
    "type": "image/png"
  }]
}

And here is the service worker

// This is the "Offline copy of pages" service worker

const CACHE = "pwabuilder-offline";

// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "index.html";
const offlineFallbackPage = "index.html";

// Install stage sets up the index page (home page) in the cache and opens a new cache
self.addEventListener("install", function (event) {
  console.log("[PWA Builder] Install Event processing");

  event.waitUntil(
    caches.open(CACHE).then(function (cache) {
      console.log("[PWA Builder] Cached offline page during install");

      if (offlineFallbackPage === "index.html") {
        return cache.add(new Response("TODO: Update the value of the offlineFallbackPage constant in the serviceworker."));
      }

      return cache.add(offlineFallbackPage);
    })
  );
});

// If any fetch fails, it will look for the request in the cache and serve it from there first
self.addEventListener("fetch", function (event) {
  if (event.request.method !== "GET") return;

  event.respondWith(
    fetch(event.request)
      .then(function (response) {
        console.log("[PWA Builder] add page to offline cache: " + response.url);

        // If request was success, add or update it in the cache
        event.waitUntil(updateCache(event.request, response.clone()));

        return response;
      })
      .catch(function (error) {
        console.log("[PWA Builder] Network request Failed. Serving content from cache: " + error);
        return fromCache(event.request);
      })
  );
});

function fromCache(request) {
  // Check to see if you have it in the cache
  // Return response
  // If not in the cache, then return error page
  return caches.open(CACHE).then(function (cache) {
    return cache.match(request).then(function (matching) {
      if (!matching || matching.status === 404) {
        return Promise.reject("no-match");
      }

      return matching;
    });
  });
}

function updateCache(request, response) {
  return caches.open(CACHE).then(function (cache) {
    return cache.put(request, response);
  });
}

I'm really struggling and my client is a charity so I really want to make this work for them, any help would be gratefully appreciated!

Answer 1

If you visit https://ovoc.netlify.com/ , you should see the following in the Network panel of Chrome DevTools:

This indicates that the SW is making a request for the URL https://ovoc.netlify.com/[object%20Response] , which returns a 404 response.

It also tells you that this request originates from pwabuilder-sw.js:17 , ie line 17 of your service worker script.

That line corresponds to:

return cache.add(new Response("TODO: Update the value of the offlineFallbackPage constant in the serviceworker."));

That appears to be some placeholder code that you need to update, to put in an actual URL for an offline page.

Additionally, your <head> 's tags include a number of undefined URLs:

It looks like those are generated by ManUp.js , so you should make sure you're configuring that properly.

Answer 2

@AdamElsbury, here is the working code for caching static assets and dynamic assets in your application Note: 1) when installing service worker it installs all the static html, css, js files 2) Replace all the static file names with the files available in your application 3) Dynamic caching is for caching images which updates frequently 4) If you release a new version which requires update to user, just change the CACHE_STATIC_NAME to 1 version up

var CACHE_STATIC_NAME = 'static-v1';
var CACHE_DYNAMIC_NAME = 'dynamic-v1';

self.addEventListener('install', function(event) {
  console.log('[Service Worker] Installing Service Worker ...', event);
  event.waitUntil(
    caches.open(CACHE_STATIC_NAME)
      .then(function(cache) {
        console.log('[Service Worker] Precaching App Shell');
        cache.addAll([
          '/',
          '/index.html',
          '/src/js/app.js',
          '/src/js/feed.js',
          '/src/js/promise.js',
          '/src/js/fetch.js',
          '/src/js/material.min.js',
          '/src/css/app.css',
          '/src/css/feed.css',
          '/src/images/main-image.jpg',
          'https://fonts.googleapis.com/css?family=Roboto:400,700',
          'https://fonts.googleapis.com/icon?family=Material+Icons',
          'https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.indigo-pink.min.css'
        ]);
      })
  )
});

self.addEventListener('activate', function(event) {
  console.log('[Service Worker] Activating Service Worker ....', event);
  event.waitUntil(
    caches.keys()
      .then(function(keyList) {
        return Promise.all(keyList.map(function(key) {
          if (key !== CACHE_STATIC_NAME && key !== CACHE_DYNAMIC_NAME) {
            console.log('[Service Worker] Removing old cache.', key);
            return caches.delete(key);
          }
        }));
      })
  );
  return self.clients.claim();
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response;
        } else {
          return fetch(event.request)
            .then(function(res) {
              return caches.open(CACHE_DYNAMIC_NAME)
                .then(function(cache) {
                  cache.put(event.request.url, res.clone());
                  return res;
                })
            })
            .catch(function(err) {

            });
        }
      })
  );
});