Трудно понять, почему мой сервисный работник не работает - Uncaught (в обещании) TypeError: Запрос не выполнен

Question

Я следовал инструкциям на https://www.pwabuilder.com, чтобы сделать мой сайт доступным в автономном режиме. В журнале консоли я получаю сообщения о том, что PWA был установлен и кэширован в автономном режиме, но я получаю сообщение об ошибке в заголовке.

Я был во многих потоках stackoverflow и других сайтах и ​​ничегоЯ пытаюсь работает. Это не моя сильная сторона. Я UX / UI дизайнер, который умеет кодировать простые статические страницы, но сейчас это немного выше моего уровня квалификации.

Я действительно изо всех сил пытаюсь понять, как исправитьпроблема как (для меня) ошибка довольно расплывчатая. Я предполагаю, что что-то простое я пропустил. URL сайта - https://ovoc.netlify.com/, но я также свяжу манифеста и работника службы ниже

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"
  }]
}

А вот служащий службы

// 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);
  });
}

Я действительно изо всех сил, и мой клиент - благотворительная организация, поэтому я очень хочу сделать эту работу для них, любая помощь будет с благодарностью!

Answer 1

Если вы посетите https://ovoc.netlify.com/,, на панели «Сеть» Chrome DevTools вы увидите следующее:

Это означает, чтоSW делает запрос на URL https://ovoc.netlify.com/[object%20Response], который возвращает ответ 404.

Он также сообщает вам, что этот запрос исходит из pwabuilder-sw.js:17, то есть строки 17 вашего сценария работника службы.

Эта строка соответствует:

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

Кажется, что это некоторый код заполнителя, который вам нужно обновить, чтобы вставить фактический URL для автономной страницы.

Кроме того, ваш *Теги 1021 * содержат ряд undefined URL-адресов:

Похоже, что они генерируются ManUp.js, поэтому вы должны убедиться, что вы настраиваете это правильно.

Answer 2

@ AdamElsbury, вот рабочий код для кэширования статических и динамических активов в вашем приложении. Примечание: 1) при установке сервисного работника устанавливаются все статические файлы html, css, js 2) заменяются все имена статических файлов нафайлы, доступные в вашем приложении 3) Динамическое кэширование предназначено для кэширования изображений, которые часто обновляются. 4) Если вы выпускаете новую версию, требующую обновления для пользователя, просто измените CACHE_STATIC_NAME на 1 версию вверх

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) {

            });
        }
      })
  );
});