Так что у меня ушло несколько часов, но в конце концов я понял, что есть обязательный параметр scope, который вам нужно указать в клиентском JavaScript при подключении к серверу, если он не работает по корневому (/) пути.

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js?v2', {
        scope: '.' // <--- THIS BIT IS REQUIRED
    }).then(function(registration) {
        // Registration was successful
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
        // registration failed :(
        console.log('ServiceWorker registration failed: ', err);
    });
}

Посмотреть рабочий продукт можно здесь:

• Приложение: https://stampy.me/pwgen/
• Файл манифеста: https://stampy.me/pwgen/manifest.json
• Файл ServiceWorker: https://stampy.me/pwgen/sw.js
• Скрипт приложения: https://stampy.me/pwgen/script.js (прокрутите вниз, чтобы Код PWA)

Надеюсь, моя боль поможет кому-нибудь еще немного сэкономить.

Обновлять:

Похоже, что Google тоже воспользовался быстрым взломом, и предупреждение вернулось.

Итак, начиная с Chrome93 (AUG-2021) быстрый взлом больше не будет работать:

self.addEventListener('fetch', function(event) {})

Решение работает на данный момент (поскольку мы никогда не знаем, какие требования Google добавит позже)

Я нашел хорошую статью, в которой есть несколько решений, первое, что предлагает автор, - это стратегия Network-Falling-Back-To-Cache:

Ваш сервисный работник сначала попытается получить ресурс с вашего сервера. Затем, когда он не может этого сделать - например, потому что вы не в сети - извлеките его из кеша (если он там существует).

   self.addEventListener('fetch', function(event) {
   event.respondWith(async function() {
      try{
        var res = await fetch(event.request);
        var cache = await caches.open('cache');
        cache.put(event.request.url, res.clone());
        return res;
      }
      catch(error){
        return caches.match(event.request);
       }
     }());
 });

Вы можете найти всю информацию и альтернативные решения в статье:

https://javascript.plainenglish.io/your-pwa-is-going-to-break-in-august-2021-34982f329f40

Надеюсь, это поможет будущим посетителям.

Оригинальный ответ:

Также вам нужно определить fetch слушателя в файле сервис-воркера:

this.addEventListener('fetch', function (event) {
    // it can be empty if you just want to get rid of that error
});