Service Worker: как создать свежую версию веб-сайта для каждого нового развертывания?

Проблема

У меня возникла проблема с веб-сайтом (созданным с использованием шаблона Polymer Shop) в производстве, который обслуживает старые версии кода, несмотря на мои новые и улучшенные развертывания.

Я использую команду Polymer CLI $ polymer build вместе с командой Firebase Tools $ firebase deploy для отправки изменений в Firebase Hosting. После завершения развертывания я перехожу на веб-сайт только для того, чтобы увидеть, что изменения не обновляются:

  • Chrome: я сначала вижу старую версию веб-сайта, и мне нужно "аппаратно обновить", чтобы изменения отобразились.

  • FireFox: я сначала вижу старую версию веб-сайта, и мне нужно "аппаратно обновить", чтобы изменения появились.

Вот кадры до и после:

введите описание изображения здесь

Рабочий процесс сервисного работника?

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

без необходимости аппаратного обновления или использования режима инкогнито.

Нужно ли мне...

  • Удалить сервис-воркера и развернуть новую версию без него (плохая идея)?
  • Создайте «Новый проект» в консоли Firebase и повторно свяжите личный домен (утомительно)?
  • Найдите «волшебную кнопку», которую нужно нажать внутри консоли Firebase для сброса (существует ли она)?
  • Отредактировать файл sw-precache-config.js (не знаю как)?
  • Обработать это в $ polymer build для настройки sw-precache (не знаю как)?
  • Что-то потрясающее, о чем даже не знают ¯\_(ツ)_/¯ ?

Я знаю, что проблема существует внутри файла sw-precache-config.js, но я не уверен, что именно здесь мне следует исправлять это.

module.exports = {
  staticFileGlobs: [
    '/index.html',
    '/manifest.json',
    '/bower_components/webcomponentsjs/webcomponents-lite.min.js',
    '/images/*'
  ],
  navigateFallback: '/index.html',
  navigateFallbackWhitelist: [/^(?!.*\.html$|\/data\/).*/],
  runtimeCaching: [
    {
      urlPattern: /\/data\/images\/.*/,
      handler: 'cacheFirst',
      options: {
        cache: {
          maxEntries: 200,
          name: 'items-cache'
        }
      }
    },
    {
      urlPattern: /\/data\/.*json/,
      handler: 'fastest',
      options: {
        cache: {
          maxEntries: 100,
          name: 'data-cache'
        }
      }
    }
  ]
};

Service Worker — замечательный инструмент, и я определенно хочу использовать его в своих проектах. Мне просто нужно научиться приручать зверя.


service-worker polymer sw-precache polymer-cli firebase-polymer
person Oneezy    schedule 06.11.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я не знаю насчет полимера, но это то, что я обычно делаю с сервисными работниками.
- В клиенте я проверяю, есть ли обновление, приложение уведомляет пользователя, если он / она хочет обновить.< br/> - Пользователь принимает новую версию, затем клиент отправляет сообщение sw на skipWating.
client.js:

navigator.serviceWorker.register('/serviceWorker.js').then(function(reg) {
    reg.addEventListener('updatefound', function() {

      reg.installing.addEventListener('statechange', function() {

        if (reg.installing.state == 'installed') {
          // Notify the user, there is a app new version.
          // User accept
           reg.installing.postMessage({msg: 'skipwaiting'});
        }
      });
    });
});

– В сервис-воркере прослушайте сообщение и пропустите, если пользователь примет новую версию.
serviceWorker.js:

self.addEventListener('message', function(event) {
  if (event.data.msg === 'skipwaiting') {
    self.skipWaiting();
  }
});

Клиент обновляет приложение после изменения состояния работника службы. client.js:

let refreshing;

navigator.serviceWorker.addEventListener('controllerchange', function() {
    if (refreshing) 
    return;
    window.location.reload();
    refreshing = true;
});

Может быть, это может дать вам идею.

person Hosar    schedule 06.11.2016
comment
В итоге я установил оба обработчика: networkFirst, и это решило проблему. Это был мой план с самого начала… но я хотел задать несколько вопросов, прежде чем начать крутить ручки. - person Oneezy; 08.11.2016