Как удалить работника службы, зарегистрированного в предыдущем развертывании, из браузеров пользователей с недавно развернутой версией сайта (Firebase)?

Я развернул новую версию своего сайта (она была на Polymer, теперь на Vue.js) в Firebase поверх существующего проекта.

Я использую шаблон Vue.js по умолчанию с Webpack (vue init webpack my-project) в новом проекте

Теперь, когда я развернул новую версию, когда я открываю сайт, я вижу только кэшированную оболочку, я предполагаю, что это ошибка работника сервиса

Для того, чтобы получить актуальные текущие файлы из Firebase I (и всех предыдущих посетителей) теперь нужно каждый раз обновлять сайт (Ctrl+F5 в Firefox)

Приставка

Теперь в консоли браузера (вкладка сеть) я вижу:

  • Работник службы в красном, он говорит: (failed) net::ERR_INSECURE_RESPONSE когда я обычно открываю сайт (без жесткого обновления)

  • Некоторые из файлов имеют свойство size (from ServiceWorker) - эти файлы имеют cache-control:max-age=3600 но прошло уже больше часа с тех пор, как я развернул новую версию сайта. Похоже, что сам сервисный работник не имеет никаких заголовков, может быть, поэтому он продолжает загружать старые файлы

Я добавил этот код в firebase.json, затем npm run build пытаюсь удалить сервисного работника, но у меня все еще есть проблема

Firebase.json

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      { "source":"/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}] }
    ]
  }
}

Сервисный код работника из предыдущего проекта

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

Я использовал компонент sw-precache по умолчанию из библиотеки платформы Polymer 1.0, который был встроен в предварительно настроенный шаблон Polymer Starter Kit, который я использовал. Сервисный работник был создан во время сборки

В комплекте> service-worker.js: https://jsfiddle.net/uydjzw13/

Unbundled> service-worker.js: https://jsfiddle.net/t42fdgow/

Вопрос:

Есть ли способ удалить этого старого работника сервиса из всех браузеров посетителей сайта, чтобы они всегда получали только что развернутую версию? Может быть, я могу сделать это с Webpack или Firebase как-нибудь?

Это будет исправлено, если я просто удалю ранее развернутую версию с сервисным работником из Firebase?

Или, может быть, я мог бы развернуть другую версию с работником сервиса, который имеет единственную функцию, которая удаляет весь предыдущий кеш и отменяет регистрацию предыдущего работника сервиса, если это возможно?

Или я могу использовать что-то вроде этого? https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/unregister

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

Источник

2 ответа

Решение

Я наконец нашел решение!

Так что, если у вас есть та же проблема, просто сделайте это:

1 Установите этот плагин webpack (если вы используете webpack в своем проекте)

npm install webpack-remove-serviceworker-plugin

2 Создайте константу в файле webpack.prod.conf.js (или как там называется ваша производственная конфигурация)

const RemoveServiceWorkerPlugin = require('webpack-remove-serviceworker-plugin')

3 Добавьте плагин в плагины: [ ] в этом файле (не ставьте ; там, если вы не используете их в своем проекте):

new RemoveServiceWorkerPlugin({ filename: 'service-worker.js' });

4 измените имя этого файла service-worker.js на то, что ранее назывался вашим сервисным работником (тот, который вам нужно удалить. Вы можете найти его имя на вкладке сети инструментов разработчика при загрузке страницы)

5 Создайте проект снова и разверните

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

registration.unregister().then(async () => {
  // optionally, get controlled pages to refresh:
  for (const client of await clients.matchAll()) {
    client.navigate(client.url);
  }
});
Источник

Взгляните на этот объединенный запрос на вытягивание, где был реализован флаг--skip-plugins где вы можете указать названия плагинов, которые хотите игнорировать во время npm run buildили что-то подобное. Отключение плагина PWA кажется хорошей идеей.

Источник

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

Что такое сервисный работник?

Сервисный работник находится между клиентом и сервером и находится внутри браузера пользователя. Они имеют несколько ролей и могут выполнять множество задач. Одной из таких задач является кеширование скрипта / кода с сайта (это оболочка).

Историческое сравнение

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

Риск

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

Тем не менее, существует огромный риск. Если сервисный работник не настроен правильно, когда пользователь посещает URL, сервисный работник всегда будет сначала указывать на кэшированную версию веб-сайта. Это означает, что независимо от того, какой код вы изменяете или предоставляете клиенту, он никогда не запрашивает его.

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

Источник
Другие вопросы по тегам