Сбой локальной сети PWA в Chromium - PullRequest
0 голосов
/ 22 ноября 2018

В настоящее время я работаю над интеграцией Service-Worker в свое приложение.Но у меня возникают проблемы, когда я хочу проверить это на моей локальной машине.

Кэширование в install -Event не выполняется.Я искал ошибку в течение двух дней, но у меня больше нет идей.Когда я развертываю сайт, например, по netlify, все работает нормально.

Вот что мне дает вкладка сети:

network tab

Консоль разработчикапечатает: developer console

Браузер: Chromium Version 70.0.3538.77 (Official Build)

Я активировал #allow-insecure-localhost в хромированных флагах.Webpack обслуживает https://localhost:8081 (с самозаверяющим сертификатом).Если я щелкну правой кнопкой мыши по неудавшимся сетевым запросам и нажму Open in new tab, все работает нормальноСтранно то, что сбойные файлы меняются каждый раз.

Код в моем index.jsx (точка входа для веб-пакета):

...
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker
    .register('/serviceWorker.js', { scope: "/" })
    .then(e => {
      console.log('Service Worker Registered');
      console.log(e);
    })
    .catch(e => {
      console.log("Service Worker fail");
      console.log(e);
    })
  });
}
...

Код в моем serviceWorker.js

let cacheName = 'test';
let cachedURLs = [
    "/",
    "/bundle.js",
    "/manifest.webmanifest",
    "/favicon.ico",
    "/favicon-256.png"
];

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
      caches.open(cacheName).then(function(cache) {
        console.log('[ServiceWorker] Caching app shell');
        return cache.addAll(cachedURLs);
      })
  );
});

self.addEventListener('fetch', function(event) {    
  event.respondWith(
      caches.match(event.request).then(function(response) {
        return response || fetch(event.request);
      })
  );    
});

Редактировать: Как уже упоминалось в комментариях, я добавил catch -блок к cache.addAll:

return cache.addAll(cachedURLs).catch(err => console.log('error: ', err));

Но, к сожалению, он не более многословен:

error:  TypeError: Failed to fetch

Для полноты это то, что Chromium сообщает о неудачном запросе (в данном случае это bundle.js)

detail of failed request

...