bugfix> vue.js > 投稿

サポートするためのベストプラクティス(およびその方法)オフライン 使用時のモードhtml5履歴API URLの書き換えのために?

たとえば、(仮に)PWA SPAアプリケーションがありますhttps://abc.xyz このリンクにアクセスすると、Vueルーター(理想的にはフレームワーク-vue、react、angularなど)にリダイレクトされます。https://abc.xyz/ en

これは私がオンラインのときに完全に機能します(もちろん、Webサーバーはこのリダイレクトを処理しているため、上記のリンクに直接アクセスしてもアプリは機能します)。

ただし、オフラインのときは話が異なります。 Service Workerはすべてのリソースを正しくキャッシュするため、URLにアクセスするとhttps://abc.xyz すべてが期待どおりにロードされます。ただし、URLを手動で入力すると、https://abc.xyz/ en、アプリの読み込みに失敗します。

これを達成する方法についてのポインタはありますか?

githubの同じ質問へのリンク:https://github.com/vuejs-templates/pwa/issues/188

回答 1 件
  • はい、これはService Workerで非常に簡単に可能です。あなたがしなければならないのは、 navigateFallback を設定することです   sw-precache のプロパティ  正しく。それを指す必要がありますキャッシュされたアセット サービスワーカーがキャッシュミスを検出した場合にフェッチするようにします。

    投稿したテンプレートで、SWPrecache Webpack Pluginを次のように設定する場合は準備ができているはずです。

    new SWPrecacheWebpackPlugin({
        ...
        navigateFallback: '/index.html'
        ...
    })
    
    

    繰り返しますが、あなたが navigateFallback の中に置くことは絶対に必須です  サービスワーカーによって既にキャッシュされています。そうでない場合、サイレントに失敗します。

    webpackで生成された service-worker.js の2つのことをチェックすることで、すべてが正しく構成されたかどうかを確認できます。 :

    precacheConfig配列には ['/index.html', ...] が含まれます

    サービスワーカーのフェッチインターセプター(ファイルの下部)で、変数 navigateFallback  設定した値に設定されます

    最終的なアプリがサブディレクトリでホストされている場合(Githubページでホストしている場合など)、 stripPrefix も構成する必要があります  および replacePrefix  正しくオプション。

あなたの答え