HTML страница об отсутствии интернета вместо гугловской

Question

HTML страница об отсутствии интернета вместо гугловской

Рейтинг: 2Ответов: 1Опубликовано: 18.02.2023

Сегодня читал в интернете разнообразные статейки, как обычно начал открывать страницы по ссылкам в новых вкладках группы и вижу что у меня нет интернета, но суть в том что сайт "hi-tech.mail.ru" показал свою HTML страницу, вместо той что в Google Chrome по умолчанию (то есть та что с динозавриком) и мне теперь интересно, как это сделали?

Скриншоты прилагаю:

P.s.Сразу говорю, это не тот случай, когда страница успела загрузиться и JS изменил её, так как нет подключения к интернету.

html google-chrome

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

Вот пример работы Service Worker для отображения сообщения об оффлайне.
Больше - в этой статье.

index.html:

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SW test</title>
</head>

<body>
    <h1>You are ONLINE</h1>
</body>

</html>

<script>
    const registerSW = async () => {
        if ('serviceWorker' in navigator) {
            await navigator.serviceWorker.register('./sw.js')
            const worker = await navigator.serviceWorker.ready
        }
    }

    registerSW()
</script>

sw.js:

function offlineResponse() {
    return new Response('<h1>you are offline</h1>', {
        headers: {
            'Content-Type': 'text/html; charset=utf-8'
        }
    });
}

function useCache(request) {
    return caches.open('offline-cache').then((cache) =>
        cache.match(request).then((matching) =>
            matching || Promise.reject('no-match')
        ));
}

self.addEventListener('install', (event) => {
    event.waitUntil(
        caches
            .open('CACHE')
            .then(() => self.skipWaiting())
    );
});

self.addEventListener('activate', (event) => {
    event.waitUntil(self.clients.claim());
});

self.addEventListener('fetch', function (event) {
    event.respondWith(
        fetch(event.request)
            .then((response) => response.ok ? response : useCache(request))
            .catch(() => offlineResponse())
    )
});

Протестировать можно при помощи DevTools

HTML страница об отсутствии интернета вместо гугловской

Ответы