web-dev-qa-db-ja.com

プログレッシブウェブアプリの「オフラインで機能しない」エラー

利用可能なすべてのガイドと例に従ってプログレッシブWebアプリを作成しましたが、何らかの理由でAdd to homescreenボタン、この不思議なエラーが発生し続けます。

Site cannot be installed: does not work offline

私のPWAと例の主な違いは、鉱山はドメインの非ルートパスで純粋に実行されているため、さまざまな場所の構成に追加のパスを追加して、アプリが非ルートに制限されていることですフォルダ。

Google Lighthouse サイトもあまり役に立たず、非常によく似たメッセージが表示されます。

誰かがこのエラーの原因を示唆していますか？

javascriptandroidgoogle-chromeprogressive-web-appslighthouse
7
StampyCode

したがって、数時間かかりましたが、サービスワーカーに接続するときにクライアントJavaScriptで指定する必要があるscopeパラメーターがルートで実行されていない場合（/）パス。

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js?v2', {
        scope: '.' // <--- THIS BIT IS REQUIRED
    }).then(function(registration) {
        // Registration was successful
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
        // registration failed :(
        console.log('ServiceWorker registration failed: ', err);
    });
}

あなたはここで作業中の製品を見ることができます：

私の痛みが誰か他の人を救うことを願っています。

23
StampyCode

また、Service Workerファイルでfetchリスナーを定義する必要があります。

this.addEventListener('fetch', function (event) {
    // it can be empty if you just want to get rid of that error
});
14
mixel