Как сообщить о ходе установки обратно в DOM? - PullRequest
Новая
       13

Как сообщить о ходе установки обратно в DOM?

0 голосов
/ 11 июня 2018

Внутри работника сервиса, внутри обработчика "установки", как правильно сообщить DOM, сколько файлов было кэшировано и сколько еще загружается?

Этот вопрос актуален только тогда, когда естьнесколько МБ файлов для кэширования или при медленном соединении.

1 Ответ

0 голосов
/ 11 июня 2018

Существует два способа прямой передачи сообщений от обслуживающего работника на страницы вашего клиента: с помощью postMessage() и с помощью API широковещательного канала .

.API широковещательного канала немного проще для этой цели, но в настоящее время не поддерживается в Safari или Edge.

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

Вот примерный пример того, как может работать подход postMessage(): 

// In your service worker:
self.addEventListener('install', async event => {
  event.waitUntil((async () => {
    const allUrls = [
      '/url1',
      '/url2',
      // etc.
    ];

    const alreadyCached = [];

    const clients = await self.clients.matchAll({
      includeUncontrolled: true,
    });

    const cache = await caches.open('my-cache-name');
    for (const url of allUrls) {
      await cache.add(url);
      alreadyCached.push(url);
      for (const client of clients) {
        client.postMessage({
          // Put whatever info you want here.
          alreadyCached,
          allUrls,
        });
      }
    }
  })());
});

// In your client pages:
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.addEventListener('message', event => {
    // event.data will contain {alreadyCached, allUrls}.
  });
}
...