Модернизация вашего сайта как прогрессивного веб-приложения

Сначала мы определим некоторые переменные конфигурации для:

1. Имя кэша ( CACHE ) и версия ( version ). Ваше приложение может иметь несколько хранилищ кэша, но нам требуется только одно. Применяется номер версии, поэтому, если мы сделаем значительные изменения, будет использоваться новый кеш, а все ранее кэшированные файлы игнорируются.
2. URL автономной страницы ( offlineURL ). Это страница, которая будет отображаться, когда пользователь не в сети и пытается загрузить страницу, которую он ранее не посещал.
3. Массив необходимых для установки файлов, обеспечивающих работу сайта в автономном режиме ( installFilesEssential ). Это должно включать ресурсы, такие как CSS и JavaScript, но я также включил домашнюю страницу ( / ) и логотип. Вы также должны включить варианты, такие как / и /index.html если URL можно адресовать несколькими способами. Обратите внимание, что offlineURL добавляется в этот массив.
4. По желанию, массив желаемых файлов ( installFilesDesirable ). Они будут загружены, если это возможно, но не приведут к прерыванию установки при сбое.

 // configuration const version = '1.0.0', CACHE = version + '::PWAsite', offlineURL = '/offline/', installFilesEssential = [ '/', '/manifest.json', '/css/styles.css', '/js/main.js', '/js/offlinepage.js', '/images/logo/logo152.png' ].concat(offlineURL), installFilesDesirable = [ '/favicon.ico', '/images/logo/logo016.png', '/images/hero/power-pv.jpg', '/images/hero/power-lo.jpg', '/images/hero/power-hi.jpg' ]; 

Функция installStaticFiles() добавляет файлы в кэш с помощью API -интерфейса Cache . Возвращаемое значение генерируется только тогда, когда основные файлы кэшируются:

 // install static assets function installStaticFiles() { return caches.open(CACHE) .then(cache => { // cache desirable files cache.addAll(installFilesDesirable); // cache essential files return cache.addAll(installFilesEssential); }); } 

Наконец, мы добавляем прослушиватель событий install . Метод waitUntil гарантирует, что сервисный работник не установится, пока не будет выполнен весь вложенный код. Он запускает installStaticFiles() затем self.skipWaiting() чтобы сделать работника службы активным:

 // application installation self.addEventListener('install', event => { console.log('service worker: install'); // cache core files event.waitUntil( installStaticFiles() .then(() => self.skipWaiting()) ); }); 

Активировать событие

Это происходит, когда сервисный работник активирован, либо сразу после установки, либо по возвращении. Вам может не потребоваться этот обработчик, но демонстрационный код использует его для удаления старых кэшей, когда они существуют:

 // clear old caches function clearOldCaches() { return caches.keys() .then(keylist => { return Promise.all( keylist .filter(key => key !== CACHE) .map(key => caches.delete(key)) ); }); } // application activated self.addEventListener('activate', event => { console.log('service worker: activate'); // delete old caches event.waitUntil( clearOldCaches() .then(() => self.clients.claim()) ); }); 

Обратите внимание, что последний self.clients.claim() устанавливает этого работника службы в качестве активного работника для сайта.

Получить событие

Это происходит всякий раз, когда делается сетевой запрос. Он вызывает метод respondWith() для перехвата запросов GET и возврата:

1. Актив из кеша.
2. В случае сбоя # 1 ресурс загружается из сети с использованием API Fetch (не относится к событию извлечения работника службы). Этот актив затем добавляется в кэш.
3. Если # 1 и # 2 терпят неудачу, возвращается соответствующий ответ.

 // application fetch network data self.addEventListener('fetch', event => { // abandon non-GET requests if (event.request.method !== 'GET') return; let url = event.request.url; event.respondWith( caches.open(CACHE) .then(cache => { return cache.match(event.request) .then(response => { if (response) { // return cached file console.log('cache fetch: ' + url); return response; } // make network request return fetch(event.request) .then(newreq => { console.log('network fetch: ' + url); if (newreq.ok) cache.put(event.request, newreq.clone()); return newreq; }) // app is offline .catch(() => offlineAsset(url)); }); }) ); }); 

Последний вызов offlineAsset(url) возвращает соответствующий ответ, используя несколько вспомогательных функций:

 // is image URL? let iExt = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'].map(f => '.' + f); function isImage(url) { return iExt.reduce((ret, ext) => ret || url.endsWith(ext), false); } // return offline asset function offlineAsset(url) { if (isImage(url)) { // return image return new Response( '<svg role="img" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"><title>offline</title><path d="M0 0h400v300H0z" fill="#eee" /><text x="200" y="150" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="50" fill="#ccc">offline</text></svg>', { headers: { 'Content-Type': 'image/svg+xml', 'Cache-Control': 'no-store' }} ); } else { // return page return caches.match(offlineURL); } } 

Функция offlineAsset() проверяет, относится ли запрос к изображению, и возвращает SVG, содержащий текст «offline». Все остальные запросы возвращают страницу offlineURL .

Раздел « Service Worker » на вкладке «Инструменты разработки Chrome» содержит информацию о ваших сотрудниках, с ошибками и средствами для принудительной перезагрузки и отключения браузера:

В разделе Cache Storage перечислены все кэши в текущей области и содержащиеся в них кэшированные ресурсы. Вам может понадобиться нажать кнопку обновления при обновлении кэша:

Неудивительно, что раздел « Очистить хранилище » может удалить работника службы и кэши:

 // load script to populate offline page list if (document.getElementById('cachedpagelist') && 'caches' in window) { var scr = document.createElement('script'); scr.src = '/js/offlinepage.js'; scr.async = 1; document.head.appendChild(scr); } 

 // cache name const CACHE = '::PWAsite', offlineURL = '/offline/', list = document.getElementById('cachedpagelist'); // fetch all caches window.caches.keys() .then(cacheList => { // find caches by and order by most recent cacheList = cacheList .filter(cName => cName.includes(CACHE)) .sort((a, b) => a - b); // open first cache caches.open(cacheList[0]) .then(cache => { // fetch cached pages cache.keys() .then(reqList => { let frag = document.createDocumentFragment(); reqList .map(req => req.url) .filter(req => (req.endsWith('/') || req.endsWith('.html')) && !req.endsWith(offlineURL)) .sort() .forEach(req => { let li = document.createElement('li'), a = li.appendChild(document.createElement('a')); a.setAttribute('href', req); a.textContent = a.pathname; frag.appendChild(li); }); if (list) list.appendChild(frag); }); }) }); 

 Cache-Control: max-age=31536000 

 Cache-Control: must-revalidate, max-age=86400