Создаю локальный сервер, добавляю локальный сайт на андроиде через хром на рабочий стол телефона. Отключаю интернет, захожу в приложение и в приложении получаю сообщение со скриншота:
А ниже содержимое файлов.
index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="manifest.json"/>
<title>TestPWA</title>
</head>
<body>
<video controls></video>
<script>
if (navigator.serviceWorker)
{
navigator.serviceWorker.register('./sw.js');
}
</script>
</body>
</html>
sw.js:
addEventListener('install', installEvent => {
installEvent.waitUntil(
caches.open('Johnny')
.then( JohnnyCache => {
JohnnyCache.addAll([
'./index.html',
'./manifest.json',
'./icon32.png',
'./icon512.png',
'./sw.js',
]); // конец addAll
}) // конец open.then
); // конец waitUntil
}); // конец addEventListener
// Всегда, когда файл запрашивается
addEventListener('fetch', fetchEvent => {
const request = fetchEvent.request;
fetchEvent.respondWith(
// Сначала попытка запросить его из Сети
fetch(request)
.then( responseFromFetch => {
return responseFromFetch;
}) // конец fetch.then
// Если не сработало, то...
.catch( fetchError => {
// пытаемся найти в кеше
caches.match(request)
.then( responseFromCache => {
if (responseFromCache) {
return responseFromCache;
// если не сработало и...
} else {
// это запрос к веб-странице, то...
if (request.headers.get('Accept').includes('text/html')) {
// покажите вашу офлайн-страницу
return caches.match('./index.html');
} // 1конец if
} // конец if/else
}) // конец match.then
}) // конец fetch.catch
); // конец respondWith
}); // конец addEventListener
manifest.json:
{
"name": "testpwa",
"short_name": "testpwa",
"start_url": "./index.html",
"lang": "ru",
"theme_color": "silver",
"background_color": "black",
"display": "standalone",
"icons":
[
{
"src": "./icon512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "./icon32.png",
"sizes": "32x32",
"type": "image/png"
}
]
}
Средний
