Использование сервисных работников для использования кеша * и * обновления в фоновом режиме - PullRequest
Новая
       7

Использование сервисных работников для использования кеша * и * обновления в фоновом режиме

0 голосов
/ 30 марта 2020

Я понимаю, что ServiceWorkers может получать ответы из кэшированных сетевых запросов.

При этом возможно ли, чтобы эти работники продолжали обновлять кэш в фоновом режиме?

Рассмотрим следующий сценарий: пользователь входит в приложение, в котором он кэшировал данные, и сразу же получает "Welcome, <cached_username>!"

Возможно ли, чтобы работник службы продолжал заставлять сетевой запрос после обслуживания совпадения кеша? Пользователь мог бы обновить свое имя пользователя до new_username на другом устройстве, и было бы замечательно, чтобы в конечном итоге пользовательский интерфейс был согласованным.

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

1 Ответ

1 голос
/ 31 марта 2020

То, что вы описываете, очень похоже на стратегию stale-while-revalidate .

Рецепт basi c в этой кулинарной книге не содержит никакого кода для наличия работник службы уведомляет клиентские страницы, когда шаг повторной проверки находит обновление, однако.

Если бы вы использовали Workbox внутри вашего работника службы, вы могли бы выполнить sh это уведомление шаг, используя workbox-broadcast-update модуль вместе с несколькими другими модулями:

В вашем сервисном работнике : 

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {BroadcastUpdatePlugin} from 'workbox-broadcast-update';

registerRoute(
  // Adjust this to match your cached data requests:
  new RegExp('/api/'),
  new StaleWhileRevalidate({
    plugins: [
      new BroadcastUpdatePlugin(),
    ],
  })
);

В ваше веб-приложение : 


navigator.serviceWorker.addEventListener('message', async (event) => {
  // Optional: ensure the message came from workbox-broadcast-update
  if (event.data.meta === 'workbox-broadcast-update') {
    const {cacheName, updatedUrl} = event.data.payload;

    // Do something with cacheName and updatedUrl.
    // For example, get the cached content and update
    // the content on the page.
    const cache = await caches.open(cacheName);
    const updatedResponse = await cache.match(updatedUrl);
    const updatedText = await updatedResponse.text();
  }
});
...