0

私はバニラ JavaScript を使用して SPA を作成しており、現在リソースのキャッシュを処理するためにsw-precacheをセットアップしています。Service Worker はgulpビルドの一部として生成され、正常にインストールされます。オフラインでルート URL ( http://127.0.0.1:8080/ ) に移動すると、App Shell が表示され、リソースが実際にキャッシュされていることが示されます。

私は今、SW に失敗することなく内部ルーティングを処理させようとしています。http://127.0.0.1:8080/dashboard_indexオフラインで に移動すると、「サイトにアクセスできません」というメッセージが表示されます。

アプリは、ユーザー アクションの一連のイベント リスナーを介して、または [戻る] ボタンを使用する場合は URL を介して、クライアント側でこのルーティングを処理します。これらの URL の 1 つにアクセスするときは、サーバーを呼び出してはなりません。そのため、Service Worker は、これらのリンクがクライアント側のコードに「フォール スルー」することを許可する必要があります。

私はいくつかのことを試しましたが、この Q/Aで問題が解決することを期待していました。gulp タスクの現在の状態を含めました。generate-service-workerこのセットアップでは、オフラインでアクセスできると期待しています/dashboard_index。これが機能したら、ソリューションを適応させて他のルートをカバーできます。

どんな助けでも大歓迎です。

gulp.task('generate-service-worker', function(callback) {
  var  rootDir = './public';

  swPrecache.write(path.join(rootDir, 'sw.js'), {
    staticFileGlobs: [rootDir + '/*/*.{js,html,png,jpg,gif,svg}',
                      rootDir + '/*.{js,html,png,jpg,gif,json}'],
    stripPrefix: rootDir,
    navigateFallback: '/',
    navigateFallbackWhitelist: [/\/dashboard_index/],
    runtimeCaching: [{
      urlPattern: /^http:\/\/127\.0\.0\.1\:8080/getAllData, // Req returns all data the app needs
      handler: 'networkFirst'
    }],
    verbose: true
  }, callback);
});

アップデート

アプリケーションのコードはここにあります。

オプションを削除してnavigateFallbackWhitelistも結果は変わりません。

オフライン/dashboard_index中に移動すると、コンソールに次のように出力されます。

An unknown error occurred when fetching the script.Chrome デバッグ ツールの [アプリケーション] > [サービス ワーカー] タブでも同じことが繰り返されます。

runtimeCachingオプションは、そのルートから返された json 応答をキャッシュしていないことにも注意してください。

4

1 に答える 1