@AlTerminator

Как заставить PWA работать без интернета?

Создаю локальный сервер, добавляю локальный сайт на андроиде через хром на рабочий стол телефона. Отключаю интернет, захожу в приложение и в приложении получаю сообщение со скриншота:

671e0ad281ce8348577446.jpeg

А ниже содержимое файлов.

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"
  }
 ]
}
  • Вопрос задан
  • 90 просмотров
Пригласить эксперта
Ответы на вопрос 1
@vozvratiKota
В слушателе фетча вы забыли открыть кэш caches.open()
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы