logo

Hur man enkelt gör PWA-kompatibel med offlineskärm

Hallå. Plötsligt är PWA:s offlinevisningsstöd obligatoriskt.

Chrome-uppdateringen kommer att granska kriterierna för att installera webbappar som PWA.

Meddelande från Google

  • Börjar med Chrome 89 , om PWA inte returnerar ett giltigt svar när det är offline, kommer en varning att visas i utvecklarverktygens konsol.
  • Börjar med Chrome 93 (planerad att släppas senare i år), webbappar som inte fungerar korrekt offline kan inte längre installeras som PWA.

Med andra ord, gör den tillgänglig offline. Det är rätt.
För närvarande finns det inte många PWA-webbplatser som stöder offline, så vi bör vidta omedelbara åtgärder.

Det är väldigt enkelt att komma runt det här problemet, bara ha en offlinesida. Jo, naturligtvis.
Så den här gången kommer jag att göra en mall för offlinesupport med HTML + JS.

Implementering

Obs

SSL-stöd krävs för PWA. Var försiktig. (För tillfället fungerar localhost även med icke-SSL)

Konstitution

html
├ img
│ └ logo.png
├ index.html
└ sw.js

manifest.json

Skapa den vanliga manifest.json för att känna igen den som en PWA. Nedan är mallen. 

{
    "name": "PWA Offline Test",
    "short_name": "PWA",
    "icons": [
        {
            "src": "/img/icon.png",
            "sizes": "144x144",
            "type": "image/png"
        }
    ],
    "start_url": "/",
    "display": "standalone",
    "theme_color": "#99d9ea"
}

Det finns många detaljerade sätt att skriva Manifest.json, så vänligen hänvisa till det.

ServiceWorker

Skriv den Service Worker som krävs för att PWA ska fungera. 

// Version definition
var CACHE_VERSION = 'ca-v1';
var DISP_VERSION = 'ca-d-v1';

// Directory to be cached (css / js is added individually)
var resources = [
  '/',
  '/img'
];

// Add cache
self.addEventListener('install', function (event) {
  console.log('ServiceWorker Install');
  event.waitUntil(
    caches.open(CACHE_VERSION)
      .then(function (cache) {
        console.log('cache.addAll');
        cache.addAll(resources);
      })
  );
});
// Shiw cash
self.addEventListener('fetch', function (event) {
  console.log('ServiceWorker fetch');
  event.respondWith(
    // Check if cache exists
    caches.match(event.request)
      .then(function (response) {
        if (response) {
          return response;
        } else {
          // If there is no cache, put it in the cache
          return fetch(event.request)
            .then(function (res) {
              return caches.open(DISP_VERSION)
                .then(function (cache) {
                  console.log('cache.put');
                  cache.put(event.request.url, res.clone());
                  return res;
                });
            })
            .catch(function () {
              // do nothing
            });
        }
      })
  );
});
// Delete old cache
self.addEventListener('activate', function (event) {
  console.log('activate ServiceWorker');
  event.waitUntil(
    caches.keys()
      .then(function (keyList) {
        return Promise.all(keyList.map(function (key) {
          if (key !== CACHE_VERSION && key !== DISP_VERSION) {
            console.log('cache.delete');
            return caches.delete(key);
          }
        }));
      })
  );
  return self.clients.claim();
});

HTML-mall

Skriv HTML för att visa offline. På den tiden, låt oss läsa den jag skrev tidigare.
Nedan mall 

<head>
    <link rel="manifest" href="/manifest.json">
    <!-- Character code setting & mobile support -->
    <meta charset="utf8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script>
        // Load ServiceWorker
        window.addEventListener('load', function () {
            if ('serviceWorker' in navigator) {
                navigator.serviceWorker.register('/sw.js')
                    .then(function (registration) {
                        return registration.pushManager.getSubscription().then(function (subscription) {
                            console.log("subscription", subscription)
                            if (subscription) {
                                return subscription
                            }
                            return registration.pushManager.subscribe({
                                userVisibleOnly: true
                            })
                        })
                    }).then(function (subscription) {
                        var endpoint = subscription.endpoint
                        console.log("pushManager endpoint:", endpoint)
                    }).catch(function (error) {
                        console.log("serviceWorker error:", error)
                    })
            }
        })
    </script>
</head>
<body>
    PWA offline display test (front page)
    <br>
    <a href="https://hoge.com/index2.html">To the second page</a>
    <!-- You can also transition pages.  At that time, it may not work well unless Service Worker is loaded on the transition destination page as well. -->
    <br>
    <img src="/icon.png">
</body>
</html>

Du kan också byta sidor. Vid den tidpunkten kanske det inte fungerar bra om inte Service Worker också är inläst på målsidan för övergången.

Detta slutför implementeringen.
Låt oss prova det.

Funktionskontroll

Ett popup-fönster som uppmanar dig att installera kommer att visas längst ned på skärmen, så försök att installera det.

När installationen är klar visas ett meddelande. Öppna den och kontrollera displayen.

Om du kan visa den korrekt, försök att ställa in den i flygplansläge.
Det är OK om du kan visa det utan problem även om du öppnar applikationen med detta.

Du kan visa det korrekt. Det är inga problem med sidövergångar.
Kolla gärna även bloggen och Twitter om du vill :D
Twitter @tomox0115
Min BLOGG