PWA не кэшируется при обновлении в режиме полета - PullRequest
Новая
       8

PWA не кэшируется при обновлении в режиме полета

0 голосов
/ 17 декабря 2018

Я читал Интернет-учебник о прогрессивных веб-приложениях со следующими примерами (MWE важных файлов):

service-worker.js: 

var dataCacheName = 'template-pwa';
var cacheName = 'template-pwa';
var filesToCache = [
  './',
 "./fonts",
 "./fonts/roboto",
 "./fonts/roboto/Roboto-Bold.woff",
 "./fonts/roboto/Roboto-Bold.woff2",
 "./images",
 "./images/icons",
 "./images/icons/icon-128x128.png",
 "./index.html",
 "./manifest.json",
 "./scripts",
 "./scripts/app.js",
 "./scripts/jquery-3.3.1.js",
 "./scripts/materialize.js",
 "./service-worker.js",
 "./styles",
 "./styles/materialize.css",
 "./styles/style.css"
];

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    }).catch(reason => console.error(reason))
  );
});

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== cacheName && key !== dataCacheName) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
  return self.clients.claim();
});

self.addEventListener('fetch', function(e) {
  console.log('[Service Worker] Fetch', e.request.url);
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

manifest.json: 

{
  "name": "Template PWA",
  "short_name": "Template PWA",
  "icons": [{
    "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }, 
    }],
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2"
}

app.js: 

(function() {
  'use strict';

  window.onload = function() {
    let message = localStorage.getItem("message") || 'Your message will display here';
    $('#message').html(message);
    $('#display').html(message);
  }

  $('#button').click(() => {
    console.log('click')
    let message = $('#message').val();
    console.log(message);
    $('#display').html(message);
    localStorage.setItem("message", message);
  });

  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
             .register('./service-worker.js')
             .then(function() { console.log('Service Worker Registered'); });
  }
})();

Когда я запускаю PWA на своем веб-сайте, захожу в PWA со своим смартфоном и добавляю PWA на домашний экран. Я могу использовать его какожидается.Когда я выхожу в автономный режим (режим полета), я все еще могу использовать PWA, как и ожидалось.Однако, когда я перетаскиваю экран (обновляю), в PWA отображается сообщение «сайт недоступен».

Разве прогрессивное веб-приложение не должно быть полностью кэшировано для использования в автономном режиме?

1 Ответ

0 голосов
/ 14 февраля 2019

Не так много документации о том, как отладить поддержку PWA, так как это относительно новое поле, и примеров, которые вы можете использовать, не так много.Я предлагаю вам взглянуть на некоторые примеры, сделанные Rajat S Построение PWA, оптимизированного для поисковых систем, с Angular - часть 2

Особенно в последней части, которая объясняет в некоторых деталях, какреализовать PWA.Я бы посоветовал вам следовать всему учебнику, если хотите, чтобы понять тонкие детали процесса реализации приложения.

Чтобы приложение было настоящим "PWA", оно должно быть в состоянии обработать запрос "обновить";в противном случае это не PWA.

Вот еще одна возможная причина такого поведения: Ошибка PWA в автономном режиме

...