Блог

Я новичок в PWA и тренируюсь над простым проектом. После первого запуска в goole Chrome, для которого все работало нормально, я изменил cacheName const в service worker и заголовок в index.html чтобы протестировать повторное кэширование всех ресурсов сайта. С этого момента кэш все еще создается, но он пуст, и я получаю сообщение об ошибке «Uncaught (в обещании) Ошибка типа: запрос не удался» ссылается на строку SW, в которой мы объявляем const staticCacheName = ‘site-static-v1’.

Вот код SW:

 const staticCacheName = 'site-static-v2';
const assets = [
    './',
    './index.html',
    './index.js',
    './main.js',
    './style.css',
    'https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css',
    'https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js',
    'https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.1/proj4.js',
    'https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.1/proj4-src.js'
];

// install service worker
self.addEventListener('install', evt => {
    console.log('service worker has been installed');
    evt.waitUntil( 
        caches.open(staticCacheName).then(cache => {
            console.log('caching shell assets');
            cache.addAll(assets);
        })
    );
   
});

// activate event
self.addEventListener('activate', evt => {
    console.log('service worker has been activated');
});

// fetch event
self.addEventListener('fetch', evt => {
    evt.respondWith(
        caches.match(evt.request).then(cacheRes => {
            return cacheRes || fetch(evt.request);
        })
    );
});
  

Любая помощь будет высоко оценена.

Проблема в вашем массиве активов. Требуется только URLpath к файлу, который будет кэшироваться, а не путь к файлу. В двух словах, удалите точки с начала этих путей.

 const assets = [
    '/',
    '/index.html',
    '/index.js',
    '/main.js',
    '/style.css',
    'https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css',
    'https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js',
    'https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.1/proj4.js',
    'https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.1/proj4-src.js'
];
  

И если вы храните файлы js и css в статической папке с /static в качестве маршрута, тогда вам нужно добавить /static перед каждым файлом, который в нем присутствует.

Снова я хочу упомянуть, что он принимает только URLpath, а не FILEpath. Он не имеет ничего общего с вашим путем к файлу. Основная причина в том, что на самом деле он кэширует ресурсы с сервера, а не с вашего компьютера. Таким образом, ему нужен маршрут, а не путь к файлу.