Service Workers: Прозрачное Обновление Кэша

Service Works как технология создания автономных приложений очень хорошо подходит для кэширования различных ресурсов.

В Интернете подробно описаны различные тактики работы в сервис-воркере с локальным кэшем.

Единственное, что не описано, это как обновлять файлы в кеше.

Единственное, что предлагают Google и MDN — это сделать несколько кешей для разных типов ресурсов, и при необходимости изменить версию этого кеша в скрипте ворк-сервиса sw.js, после чего он весь будет удален.

Удаление кешей

   

 var CURRENT_CACHES = {
     font: 'font-cache-v1',
     css:'css-cache-v1',
     js:'js-cache-v1'
 };
 
 self.addEventListener('activate', function(event) {
     var expectedCacheNames = Object.keys(CURRENT_CACHES).

map(function(key) {
         return CURRENT_CACHES[key];
     });
     // Delete out of date cahes
     event.waitUntil(
         caches.keys().

then(function(cacheNames) {
             return Promise.all(
                 cacheNames.map(function(cacheName) {
                     if (expectedCacheNames.indexOf(cacheName) == -1) {
                         console.log('Deleting out of date cache:', cacheName);
                         return caches.delete(cacheName);
                     }
                 })
             );
         })
     );
 });
 

   

Довольно неуклюжая работа.

Из сторонних продуктов (пусть и от разработчиков Google) рабочий сервис наиболее близок к решению проблемы обновления файлов кэша.

библиотека sw-precache .

Он добавляет в sw.js хеши всех файлов, для которых разработчиком настроено отслеживание изменений.

Если на сервере будет изменен хотя бы один из них, то при следующей активации службы-воркера весь кеш клиента снова обновится — но теперь уже без каких-либо особых действий со стороны программиста.

Топор заменили колуном.

Постановка задачи

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

Попробуем решить эту проблему.

Давайте возьмем общее пример гугла рабочий сервис, работающий по принципу: «сначала из кэша, если нет там, то из сети».

Для начала понятно, что вам необходимо иметь список отслеживаемых файлов.

Также нужно как-то сравнить их с версиями файлов в кеше.

Это можно сделать как на сервере, так и на клиенте.

Опция 1

При следующем входе мы сравниваем его на сервере со временем модификации отслеживаемых файлов, и передаем список измененных с этого момента файлов в html-коде страницы, непосредственно перед регистрацией сервис-воркера.

Для этого мы включаем вывод следующего php-файла: обновленные_ресурсы.

php

<Эphp $files = [

Теги: #кэширование #cache #serviceworker #pwa #progressive web apps #html5 #JavaScript #frontend #оптимизация клиента #разработка веб-сайтов #JavaScript #программирование #оптимизация клиента

• Признаки Того, Что В Вашей Компании Планируются Массовые Увольнения

  19 Oct, 24

• Основные Тенденции Ит-Аутсорсинга После 2020 Года

  19 Oct, 24

• Устаревшие Сервисы В Вашей Инфраструктуре

  19 Oct, 24

• Сухая Вода И Море По Колено

  19 Oct, 24

• Большие Данные В Райффайзенбанке

  19 Oct, 24

• Microsoft И Novell: Новая Веха В Истории Открытого Исходного Кода?

  19 Oct, 24

• Создание Сервисов Для Разработчиков Ии: Как Наше Gpu Supercloud Превратилось В Автоматизированную Платформу Mlops

  19 Oct, 24

• Монетизация Приложения Windows Phone С Помощью Рекламы

  19 Oct, 24

• Примеры Использования Машины Реального Времени (Matlab, Simulink, Аппаратно-Программный Симулятор)

  19 Oct, 24

• Mail.ru Обогнал Rambler По Рентабельности

  19 Oct, 24