Обнаружение онлайн статуса при использовании сервисного работника не работает - PullRequest
Новая
       83

Обнаружение онлайн статуса при использовании сервисного работника не работает

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

Я использую рабочую коробку Google, чтобы сделать некоторые материалы в автономном режиме доступными для работников сферы обслуживания. Автономная часть работает как задумано. Но я хотел бы дать пользователю сообщение (например, с помощью всплывающего окна или), когда у клиента снова будет доступ к сети. Я пытался добиться этого с помощью онлайн-прослушивателя событий браузера. Я открыл страницу с помощью chrome, затем перевел chrome в автономный режим. После этого я перехожу к index2.htm и отображается автономный контент (= работает). Затем я снова включил chrome в онлайн-режим, но онлайн-событие не срабатывает. Кто-нибудь знает, почему и как это исправить?

Мои файлы:

sw. js

importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js');
if (workbox) {
    precaching.precacheAndRoute([{
        url: 'https://playground.test/index2.htm',
        revision: 1
    }]);
    self.addEventListener('fetch', (event) => {
        fetch(event.request)
            .catch(function (e) {
                return caches.match(event.request);
            });
    });
}

index.htm 

<!DOCTYPE html>
<html>
<head>
    <title>Page 1</title>
</head>
<body>
    <a href="index2.htm">Index2</a>
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js');
            });
        }
    </script>
</body>
</html>

index2.htm 

<!DOCTYPE html>
<html>
<head>
    <title>Page 2</title>
    <script src="offline.js"></script>
</head>
<body>
    <h1>Page 2</h1>
</body>
</html>

офлайн. js 

window.addEventListener('load', () => {
    const handleNetworkChange = () => {
        if (navigator.onLine) {
            alert('You are online again!');
        }
    };
    window.addEventListener('online', handleNetworkChange);
});
...