Ошибка локальной сети PWA в Chromium

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

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

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

Ошибка локальной сети PWA в Chromium

Консоль разработчика печатает: Ошибка локальной сети PWA в Chromium

Браузер: 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.info('Service Worker Registered');
      console.info(e);
    })
    .catch(e => {
      console.info("Service Worker fail");
      console.info(e);
    })
  });
}
...

Код в моем serviceWorker.js

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

self.addEventListener('install', function(e) {
  console.info('[ServiceWorker] Install');
  e.waitUntil(
      caches.open(cacheName).then(function(cache) {
        console.info('[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.info('error: ', err));

Но, к сожалению, он не более подробный:

error:  TypeError: Failed to fetch

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

Ошибка локальной сети PWA в Chromium

Привет, не могли бы вы добавить блок catch к своему обещанию в fetchevent-listener: .catch(err => console.info('error: ', err))); Может быть, он будет более выразительным

t3__rry 22.11.2018 09:26

У меня была аналогичная настройка, но не было window.addEventListener ('load', ... в index.jsx. Также позаботьтесь о том, чтобы все cachedURL существовали.

Niels Steenbeek 22.11.2018 09:27

@ t3__rry Да, но это ничего не меняет, потому что fetch-listener никогда не запускается при первоначальном рендеринге страницы. Ошибка выдается в install-listener (при кешировании файлов с cache.addAll). @Niels: Каждый файл / URL существует, как я уже указывал в своем посте. Я могу загрузить их, если открою неудавшиеся запросы.

Dirk 22.11.2018 09:36

@Dirk, хорошо, а вы тогда пробовали добавить блок catch в слушатель install?

t3__rry 22.11.2018 09:52

@ t3__rry Да, я пробовал, но это не дает больше информации. Я обновил свой пост и добавил снимок экрана с неудавшимися запросами. Это помогает?

Dirk 22.11.2018 10:50

@Dirk не совсем, я думал, у тебя будет больше идей ... Я наткнулся на эту ветку, если она может тебе помочь: stackoverflow.com/questions/47160929/…

t3__rry 22.11.2018 11:56

@ t3__rry Я уже нашел эту ветку, но все равно спасибо. Но я пробовал без fetch-слушателя. Тот же результат. Я пробовал в режиме инкогнито (без Chromium Addons) -> тот же результат. И файлы написаны правильно. Я предполагал, что ошибка находится в webpack-dev-server. Но не похоже, я активировал verbosemode express. Неудачные запросы даже не доходят до экспресса. Итак, я предполагаю, что Chromium не работает ...

Dirk 22.11.2018 13:00

@Dirk, да, это странно ... и ваша реализация верна, так что я думаю, что это тоже на стороне Chromium

t3__rry 22.11.2018 14:08
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
8
357
0

Другие вопросы по теме