Страница обновления PWA Cache - PullRequest
Новая
       35

Страница обновления PWA Cache

1 голос
/ 10 июля 2019

У меня проблема с pwa моего сайта.Мне нужно обновить кеш-память служащим, и я нахожу много кодов в Интернете, но ни один не работает.Я должен что-то пропустить.

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

Что вы думаете?

Заранее спасибо 

//Manifest -----

{
  "name": "Test",
  "short_name": "Test",
  "lang": "en",
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "white",
  "theme_color": "white",
  "icons": [{
      "src": "/img/icon-128.png",
        "sizes": "128x128",
        "type": "image/png"
      }, {
        "src": "/img/icon-144.png",
        "sizes": "144x144",
        "type": "image/png"
      }, {
        "src": "/img/icon-152.png",
        "sizes": "152x152",
        "type": "image/png"
      }, {
        "src": "/img/icon-192.png",
        "sizes": "192x192",
        "type": "image/png"
      }, {
        "src": "/img/icon-256.png",
        "sizes": "256x256",
        "type": "image/png"
      }, {
        "src": "/img/icon-512.png",
        "sizes": "512x512",
        "type": "image/png"
      }]
}

- 

//Service-Worker -----

var cacheName = 'Test';
var filesToCache = [
  '/',
  '/index.html',
  '/css/style.css',
   ...
];

/* Start the service worker and cache all of the app's content */
self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(filesToCache);
    })
  );
});

/* Serve cached content when offline */
self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

self.addEventListener('activate', function(event) {
  var cacheKeeplist = ['cacheName'];

  event.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (cacheKeeplist.indexOf(key) === -1) {
          return caches.delete(key);
        }
      }));
    })
  );
});

1 Ответ

2 голосов
/ 11 июля 2019

Проблема очень проста: ваш код Service Worker не обновляет кэш.

Если вы посмотрите на обработчик fetch, он либо возвратит ответ из кэша или из сети.И если он возвращает ответ из сети, он НЕ помещает новую версию в кеш.

Если вы посмотрите на обработчик install, он кэширует все перечисленные файлы.Эти файлы (по крайней мере, так кажется) имеют все имена, так что имена остаются неизменными от версии к другой.Значение: ваш style.css равен всегда style.css, и когда SW закэширует его, он будет доволен кешированной версией до конца времени.Он не имеет ни малейшего представления, что есть новая версия, потому что имя такое же.

Как это исправить?

Вы можете изменить код SW, чтобы он всегда проверял сеть на наличие новыхобновлений файлов (примеры здесь: https://serviceworke.rs/strategy-cache-and-update.html).. Возможно, вы также захотите иметь уникальные имена для файлов, которые меняются при каждом развертывании.

Другим способом может быть использование библиотеки, которая обрабатывает все это дляВам. Workbox имеет несколько различных стратегий кэширования на выбор (* https://developers.google.com/web/tools/workbox/modules/workbox-strategies).

РЕДАКТИРОВАТЬ: Как обновить приложение, которое было добавлено на домашний экран?

Я не совсем уверен, почему вы добавилиприложение to-the-homescreen не обновляется при повторном его открытии. Возможно, на нем запущена более старая версия, которая все еще имеет более старую версию того или иного. Однако вы можете вручную заставить Service Worker проверять наличие обновлений.можно использовать registration.update() для запуска проверки на наличие новой версии скрипта SW, и, если она найдена, принудительно обновить страницу (location.reload()) или показать пользователю уведомление и запросить обновление.mentation here: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/update

Если у вас есть приложение, которое пользователь долгое время держит открытым (на мобильном телефоне или во вкладке браузера), было бы неплохо автоматически опросить обновления ПО, например,один раз в день или что-то.Вы даже можете проверять наличие обновлений каждый раз, когда вкладка / приложение активируется / фокусируется.Частота, конечно, зависит от вашего приложения, варианта использования и т. Д.:)

...