Меняете имя обслуживающего работника?

Я пытаюсь выяснить, что произойдет, если у меня есть сервисный работник, зарегистрированный на живом сайте под названием sw.js, а затем я переименую сервисного работника в service-worker.js. Теперь старый не найден, но он все еще показывает старую кешированную версию.

Сколько времени нужно, чтобы зарегистрировать нового переименованного сервис-воркера или как это вообще работает?

Редактировать

Вот как я зарегистрировал сервис-воркера в приложении реакции:

componentDidMount() {
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker
      .register("/service-worker.js")
      .then(registration => {
        console.info("service worker registration successful: ", registration);
      })
      .catch(err => {
        console.warn("service worker registration failed", err.message);
      });
  }
}

Вы очистили кеш браузера?

Mathias 21.08.2018 23:20

@Mathias, это сработает для меня, но я хочу, чтобы он обновился для всех

Johhan Santana 21.08.2018 23:36

Хорошо, вы не собираетесь менять это часто, верно? Я предполагаю, что большинство людей этого не делают.

Mathias 22.08.2018 00:30

Не совсем, мне просто любопытно, как это изменить на живом сайте на всякий случай.

Johhan Santana 22.08.2018 16:24
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
4
4
2 143
3

Ответы 3

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

var worker = new SharedWorker("ws.js");

Это нужно будет обновить до

var worker = new SharedWorker("service-worker.js");

Как бы вы это сделали в приложении reactjs? Я добавил код, который использую для регистрации ПО, но я никогда не использовал упомянутый вами SharedWorker.

Johhan Santana 21.08.2018 23:42

Где-то в вашем коде, который вы развертываете, есть "ws.js". Это нужно будет изменить на новое имя.

Mathias 22.08.2018 00:29

Это вопрос о ServiceWorkers, а не о WebWorkers.

Tomasz Mularczyk 16.03.2019 16:15

Вновь созданный сервис-воркер (переименованный) не может заменить старый, потому что старый все еще активен и контролирует клиента. новый сервисный воркер (переименованный) будет ждать, пока существующий воркер не будет контролировать нулевых клиентов.

Теперь представьте, что сервис-воркер sw.js установлен и активен (управляет клиентом), Chrome визуализирует процесс для вас, как это

1. Сервисный работник зарегистрирован и активен


2. Теперь переименуем файл сервис-воркера в sw2.js.

Вы можете видеть, что хром сообщает вам, что что-то изменилось в сервис-воркере. но текущий будет продолжать управлять клиентом, пока вы не заставите новый взять управление на себя, нажав кнопку skipWaitting или очистив кеш. нажатие на кнопку приведет к тому, что sw2.js возьмет на себя управление sw1.js.

Теперь, если вам нужно сделать это программно, вы можете сделать это в событии install внутри вашего сервис-воркера, вызвав self.skipWaiting().

self.addEventListener('install', (e) => {

  let cache = caches.open(cacheName).then((c) => {
    c.addAll([
      // my files
    ]);
  });

  self.skipWaiting();
  e.waitUntil(cache);
});

Следующий анимированное изображение из статьи Джейка Арчибальда Жизненный цикл обслуживающего работника может прояснить идею.

Я смог решить эту проблему, настроив сервер, который слушает запросы на получение как /service-worker.js, так и /sw.js.

Поскольку сервисный работник был переименован с sw.js в service-worker.js, он не мог найти старого сервисного работника в http://example.com/sw.js, поэтому я сделал следующее:

createServer((req, res) => {
  const parsedUrl = parse(req.url, true);
  const { pathname } = parsedUrl;
  // new service worker
  if (pathname === "/service-worker.js") {
    const filePath = join(__dirname, "..", pathname);
    app.serveStatic(req, res, filePath);
  // added new endpoint to fetch the new service worker but with the 
  // old path
  } else if (pathname === "/sw.js") {
    const filePath = join(__dirname, "..", "/service-worker.js");
    app.serveStatic(req, res, filePath);
  } else {
    handle(req, res, parsedUrl);
  }
}).listen(port, err => {
  if (err) throw err;
  console.info(`> Ready on http://localhost:${port}`);
});

Как видите, я добавил второй путь для обслуживания того же сервис-воркера, но с конечной точкой /sw.js, один для старого sw.js, а другой - для нового service-worker.js.

Теперь, когда старые посетители, у которых есть старый активный sw.js, загрузят более новый и при повторном посещении они автоматически получат более нового переименованного работника службы service-worker.js.

Почему это не имеет смысла? Когда приходят старые посетители, старый сервисный воркер снова попытается получить старого сервисного воркера (sw.js) и увидит изменения от нового сервисного воркера, который теперь будет обновлен, после обновления он будет извлекать из новой конечной точки новый сервис-работник.

Johhan Santana 24.08.2018 04:50

Другие вопросы по теме