Добавьте приглашение "Обновление доступно, пожалуйста, обновите" в PWABuilder Cache-first сервисный работник

Question

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

Эти реализации являются хорошим примером:

1. Служебный работник Mozilla

2. Подход № 3 в этой статье.

Я использую кеш-сервисный работник, предоставленный PWABuilder. Работает хорошо, но не предлагает пользователю доступных обновлений.

Я пытался скопировать код из статей выше, но не смог заставить его работать.

Вот репо сервисного работника, которого я сейчас использую.

Код, который я пытаюсь добавить в сценарий рабочего сервиса:

addEventListener('message', messageEvent => {
  if (messageEvent.data === 'skipWaiting') return skipWaiting();
});

Скрипт, который я пытаюсь добавить на веб-страницу:

/ reload once when the new Service Worker starts activating
var refreshing;
navigator.serviceWorker.addEventListener('controllerchange',
  function() {
    if (refreshing) return;
    refreshing = true;
    window.location.reload();
  }
);
function promptUserToRefresh(reg) {
  // this is just an example
  // don't use window.confirm in real life; it's terrible
  if (window.confirm("New version available! OK to refresh?")) {
    reg.waiting.postMessage('skipWaiting');
  }
}
listenForWaitingServiceWorker(reg, promptUserToRefresh);

Если я просто добавлю этот код к работнику сервиса и веб-странице с уважением, работник сервиса будет работать нормально. Но подсказка обновления не работает.

Я получаю эту ошибку в консоли:

Uncaught ReferenceError: reg is not defined
    at (index):231

Answer 1

Что ж, ваша проблема не обязательно связана с работниками сервиса:). Если вы внимательно посмотрите на сообщение об ошибке (показано в консоли), вы увидите, что оно ясно говорит о том, что переменная с именем reg не определена. Другими словами, где-то в вашем коде вы пытаетесь сослаться на переменную с именем "reg", но "reg" там не существует.

Кажется, что код, вставленный в ваш вопрос, это еще не все, но я подозреваю, что проблема заключается здесь:

listenForWaitingServiceWorker(reg, promptUserToRefresh);

В любом случае, сообщение об ошибке говорит вам, что проблема возникает в строке 231 в вашем HTML-файле, так что проверьте это.