PWAのオフラインサポート検出の改善

Improving Progressive Web App offline support detection

以下の記事のまとめやメモです。

developer.chrome.com

記事の内容

WebアプリをPWAとしてインストール可能かの条件として、Chromeではこれまで「fetch イベントを含むサービスワーカーがあること」となっていました。

それが、今後は「オフラインモード時のfetchイベントでHTTP ステータスコード 200を返すこと」となるみたい。

• まず3月にリリース予定のChrome 89から、警告が表示される
  • Lighthouseにもガイドが表示される
• その後、8月にリリース予定のChrome 93から、適用される予定

※ 既にインストールされているPWAには影響しない

実装よりな話

これまでの判定について

これまで、PWA化はmanifest.jsonとほぼ空のService Workerをインストールすればいいので簡単だよ。と言われていましたが、今後はちゃんとオフラインサポートを実装する必要があります。

コード的に見ると、これまでは以下のService WorkerスクリプトでOKだった。

self.addEventListener("fetch", (event) => {});

今後の判定について

今後は、installイベントなどでCache APIを活用してリソースをキャッシュ。fetchイベントでオフライン時はキャッシュからリソースを返す。といった対応が必要になります。どこまでやるかはプロダクトによります。ある程度リソースをキャッシュしてオフラインでも動作するようにするとか。とりあえず静的なHTMLだけ返すとか。

最低限インストール要件を満たすためには、例えば以下のような処理は実装しないといけなそう。

const CACHE_NAME = "cache";
const OFFLINE_URL = "/";

self.addEventListener("install", (event) => {
  event.waitUntil((async () => {
    const cache = await caches.open(CACHE_NAME);
    return cache.add(OFFLINE_URL);
  })());
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    (async () => {
      try {
        const networkResponse = await fetch(event.request);
        return networkResponse;
      } catch (e) {
        const cache = await caches.open(CACHE_NAME);
        const cachedResponse = await cache.match("/");
        return cachedResponse;
      }
    })()
  );
});