web-dev-qa-db-ja.com

Vue PWAが更新後に新しいコンテンツを取得しない

Vueを初めて使用し、PWA Service-workerプラグインを使用してプロジェクトを作成しました。新しいバージョンのアプリをデプロイした後、コンソールに次のメッセージが表示されます：

Failure

ページを更新した後（F5）、これらのメッセージは同じように表示され、アプリはまだ古い状態です。キャッシュをクリアするためにあらゆることを試みましたが、それでも新しいコンテンツは読み込まれません。

プロジェクトを作成した後、デフォルトの構成から何も変更しておらず、サービスワーカーとやり取りするコードを追加していません。何が問題になっていますか？何か不足していますか？

javascriptvue.jsvuejs2service-workerprogressive-web-apps
18
user5242820

私が理解したように、この質問は実際にはPWAの初心者にのみ関連しており、これを実現するためにPWAを構成できる（および必要がある）ことを知りません。今対処したと感じた場合（およびVueJSを使用している場合）、次のことを覚えておいてください。

新しいコンテンツを自動的にダウンロードするには、PWAを構成するために必要が必要です。私の場合（VueJS）、これは私のプロジェクトのルートディレクトリに_vue.config.js_ファイルを作成することによって行われます（_package.json_と同じレベル）。

このファイル内には、次のものが必要です。

_module.exports = {
    pwa: {
        workboxOptions: {
            skipWaiting: true
        }
    }
}
_

検出された場合、新しいコンテンツが自動的にダウンロードされます。ただし、コンテンツはダウンロード後に更新する必要があるため、コンテンツはまだクライアントに表示されません。 _registerServiceWorker.js_ディレクトリの_src/_にwindow.location.reload(true)を追加してこれを行いました：

_updated () {
    console.log('New content is available: Please refresh.')
    window.location.reload(true)
},
_

サービスワーカーが新しいコンテンツを検出すると、自動的にダウンロードされ、後でページが更新されます。

27
user5242820