Как сделать экран отсутствия интернета?

Question

[Kozlov]

Как сделать свой экран, если нет интернета? Как на пример в вк

Скрин

Comments

[Kozlov]

Незнаю почему, но не захотел работать код из ссылки https://tproger.ru/translations/browser-offline-page/. Вот этот полностью рабочий.
На странице сайта в футер кидаем

код

if ('serviceWorker' in navigator) {
		navigator.serviceWorker.register('./serviceworker.js').then(function(registration) {
		console.log('ServiceWorker registration successful with scope: ', registration.scope);
	}).catch(function(err) {
		console.log('ServiceWorker registration failed: ', err);
		});
	}

В файл serviceworker.js пишем

код

'use strict';
var cacheVersion = 1;
var currentCache = {
  offline: 'offline-cache' + cacheVersion
};
const offlineUrl = 'offline.html';
this.addEventListener('install', event => {
  event.waitUntil(
    caches.open(currentCache.offline).then(function(cache) {
      return cache.addAll([
          offlineUrl
      ]);
    })
  );
});
this.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
        event.respondWith(
          fetch(event.request.url).catch(error => {
              // Return the offline page
              return caches.match(offlineUrl);
          })
    );
  }
  else{
        event.respondWith(caches.match(event.request)
                        .then(function (response) {
                        return response || fetch(event.request);
                    })
            );
      }
});

Все файлы в корне сайта, offline.html - страница которая показывается при выключенном интернете.

Answer 1

[hzzzzl]

есть событие offline
https://developer.mozilla.org/en-US/docs/Web/API/W...
-
https://developer.mozilla.org/en-US/docs/Web/API/N...

Comments

[Kozlov]

Спасибо

Answer 2

[ed]

https://tproger.ru/translations/browser-offline-page/

Comments

[Kozlov]

Спасибо что так подробно все изложено!