Chrome93のPWA基準へのたぶん一番簡単な対処

chrome系のブラウザでWebページをホームへインストールするための基準が少し厳しくなる。service workerのfetchイベントが空だと現在以下の警告が出る。

Site cannot be installed: Page does not work offline. Starting in Chrome 93, the installability criteria is changing, and this site will not be installable. See https://goo.gle/improved-pwa-offline-detection for more information.

https://goo.gle/improved-pwa-offline-detection

オフラインに対応していなければ、2021年8月のChrome93からはインストールがブロックされるとのこと。とはいえ完全に動作する必要はなくフォールバックページなどが提供されればいいそうだ。

サーバ通信前提のWebページをオフライン対応するのは現実的ではないので、その方向で回避してみることにする。（オンライン前提のWebページをインストール可能にする必要があるのかというのもあるが、そこは色々な事情があるのだ）

対応

serviceworker.js

var _cashVersion = "cashe0.0.0.1"
var _offlinePage = '/offline.html'

self.addEventListener("install", function(event) {
    console.log("service worker call install.", event)

    event.waitUntil(
        caches.open(_cashVersion)
            .then(function (cache) {
                cache.add(_offlinePage);
            })
        );
})

self.addEventListener('fetch', function(event) {
    const url = new URL(event.request.url)

    if(url.pathname == "/"){
        if(!navigator.onLine){ 
            event.respondWith(caches.match(_offlinePage))
        } else {
            let ret = fetch(event.request).then(res=>{
                return res
            }).catch(e=>{
                return caches.match(_offlinePage)
            })
            event.respondWith(ret)
        }
    }
})

チェックは疑似オフライン状態でトップページ（manifest.jsonのstart_url？）のリクエストに対して、200のレスポンスが返ってくるかどうかで判断しているようだ。なのでオフライン用のページ（offline.html）を用意してトップページのリクエストに対して返すようにする。

installイベント

service workerの登録時に、offline.htmlをキャッシュする。なおoffilne.htmlはほぼ更新されないようなものをイメージしている。

fetchイベント

トップページへのリクエストが来たら、オフラインの場合キャッシュからoffline.htmlを返す。

これだけでもよさそうだが、警告表示は消えなかった。どうやら可否チェックの時はnavigater.onLineはtrueのままのようだ。なのでサーバへfetchを投げてエラーになった場合にもoffline.htmlを返すようにする。

以上

これでオフラインの場合には専用ページが表示され、警告も現状は出なくなった。実際にChrome93でインストール基準を満たすかはリリースされるまで確証はないが。