Блог

Я поместил версию своего приложения PWA в https://www.example.com/app папка. Я попытался кэшировать начальную страницу, используя следующие форматы URL-адресов (один за другим в FILES_TO_CACHE), но ни один из них не работает

 "/"
"/app"
"/app/"
"/app/index.php"
"app"
"app/index.php"
"./"
"./app"
 

sw.js:

 const CACHE_NAME = 'static-cache-v1.2';
const DATA_CACHE_NAME = 'data-cache';

//Those tries and errors go here one by one
const FILES_TO_CACHE = [
    "/" 
];

self.addEventListener('install', (evt) => {
    console.log('[ServiceWorker] Install');
    evt.waitUntil(
        caches.open(CACHE_NAME).then((cache) => {
            console.log('[ServiceWorker] Pre-caching offline page');
            return cache.addAll(FILES_TO_CACHE);
        }).then(self.skipWaiting())
    );


});

self.addEventListener('activate', (evt) => {
    console.log('[ServiceWorker] Activate');

    evt.waitUntil(
        caches.keys().then((keyList) => {
            return Promise.all(keyList.map((key) => {
                if (key !== CACHE_NAME) {
                    console.log('[ServiceWorker] Removing old cache', key);
                    return caches.delete(key);
                }
            }));
        })
    );

    self.clients.claim();
});

self.addEventListener('fetch', (evt) => {
console.log('[ServiceWorker] Fetch', evt.request.url);
    evt.respondWith(

        caches.open(CACHE_NAME).then(cache => {
            return cache.match(evt.request).then(cacheResponse => cacheResponse || fetch(evt.request).then(networkResponse => {
                cache.put(evt.request, networkResponse.clone());
                return networkResponse;
            }));

        }))
});
 

Маяк Google Chrome сообщает:

start_url не отвечает 200 в автономном режиме

Кроме того, я должен сказать, что service worker успешно регистрируется, поскольку я получаю сообщение консоли, а также приложение имеет базовый URL, установленный в заголовке следующим образом:

 <base href="https://www.example.com/app/">
 

и это код, который я использую для регистрации service worker, размещенного в https://www.example.com/app/index.php и получения сообщения об успешном завершении в консоли:

 <script>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('sw.js', {scope: '/app/'})
  .then((reg) => {
    console.log("Web workers work");
  }).catch((error) => {
    // registration failed
    console.log('Registration failed with '   error);
  });
}  else{
  console.log("No sw available");
  }

</script>