.html не получит от сервисного работника

Question

Я изо всех сил пытаюсь заставить простого сервисного работника работать в автономном режиме. Я перепробовал много примеров без успеха. Сначала я подумал, что это потому, что я использую динамический php-сайт или, возможно, это был мой сервер или мой htaccess. Это для меня загадка. Все работает на моем локальном хосте при загрузке index.html, но на сервере страница не может загружаться в автономном режиме, даже если все остальное загружается при анализе вкладки сети chrome devtools.

Поэтому я пытаюсь сделать этопростой HTML в автономном режиме PWA на моем сервере, и я создаю тот же источник на другом сервере.

https://sw.punchunique.com
https://punchunique.neocities.org/test.html или
https://punchunique.neocities.org/

Может быть, потому что у меня нет файла fallback.html, но зачем он мне нужен, если он уже загружен в кеш

self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('mysite-static-v3').then(function(cache) {
        return cache.addAll([
            'index.html',
            'punch-fixed.css',
            'general.css',
            'punch-homepage.css',


            'thesansextralight_plain-webfont.woff',
            'thesansextralight_plain-webfont.woff2',
            'TweenMax.min.js',
            'PLUGINS.js',
            'punch.webmanifest',

            'sw-demo.js',




            'favicon.ico',
            'favicon-16x16.png',
            'favicon-32x32.png',
            'favicon-194x194.png',
            'apple-touch-icon.png',
            'apple-touch-icon-72x72.png',
            'apple-touch-icon-120x120.png',
            'apple-touch-icon-144x144.png',
            'apple-touch-icon-152x152.png',
            'android-chrome-96x96.png',
            'android-chrome-192x192.png',
            'android-chrome-512x512.png',
            'mstile-48x48.png',
            'mstile-144x144.png',
            'mstile-270x270.png',
            'mstile-558x558.png',
            'mstile-558x270.png',

            'bcg-img-sect1.jpg',
            'green-hook.png',
        ]);
        })
    );
});

self.addEventListener('activate', function(event) {
    event.waitUntil(
    caches.keys().then(function(cacheNames) {
        return Promise.all(
        cacheNames.filter(function(cacheName) {
            // Return true if you want to remove this cache,
            // but remember that caches are shared across
            // the whole origin
        }).map(function(cacheName) {
            return caches.delete(cacheName);
        })
        );
    })
    );
});

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

    // Cache only
    // If a match isn't found in the cache, the response
    // will look like a connection error
    // event.respondWith(caches.match(event.request));


    // Network only
    // event.respondWith(fetch(event.request));
    // or simply don't call event.respondWith, which
    // will result in default browser behaviour


    // CACHE then NETWORK
    event.respondWith(
    caches.open('mysite-dynamic').then(function(cache) {
        return cache.match(event.request).then(function (response) {
        return response || fetch(event.request).then(function(response) {
            cache.put(event.request, response.clone());
            return response;
        });
        });
    })
    );

});

У меня есть это в автономном режиме При загрузке скрипта произошла неизвестная ошибка. и Uncaught (in promise) TypeError: Failed to fetch но все файлы кэшей присутствуют на сервере и ничего не пропало.

Answer 1

Вот прекрасный пример работника сервиса со статическим и динамическим кэшированием

var CACHE_STATIC_NAME = 'static-v4';
var CACHE_DYNAMIC_NAME = 'dynamic-v2';

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

            });
        }
      })
  );
});