githubプロジェクトページでsw-precacheを使用した角2+

Question

私は単純なAngularアプリケーションを持っていますが、サービスワーカーの助けを借りてオフライン対応にしようとしています。私は自分の開発マシン上でそれを実行したときにSWとアプリケーション自体が正常に動作し

https://coryrylan.com/blog/fast-offline-angular-apps-with-service-workers

が、私はGithubの上でこれを展開したいと思います：私は、サービス従事者の設定方法については、このチュートリアルに従っていますプロジェクトページ：https://zyxon.github.io/AngTodo/

が原因assetsフォルダの内容に404年代を取得するサービスワーカーが登録に失敗しdistフォルダ（私は私の開発サーバ上で行うのと同じ）の内容をアップロードしました。 /assets/...のファイルを探します。

アプリケーションがWebサーバーROOTでホストされているため、私のdevサーバー上で動作するのが最善の推測ですが、Githubページの場合は.../AngTodoディレクトリでホストされます。

私の質問は次の通りです：sw-precacheを指定して、このSWに付加プレフィックス（私の場合は/AngTodo/assets/...）を出力する方法はありますか？次のように

私sw-precache-config.jsは次のとおりです。

module.exports = { 
    navigateFallback: '/index.html', 
    stripPrefix: 'dist', 
    root: 'dist/', 
    staticFileGlobs: [ 
     'dist/index.html', 
     'dist/**.js', 
     'dist/**.css', 
     'dist/assets/**.js', 
     'dist/assets/**.css', 
     'dist/assets/bootstrap/css/**.css', 
     'dist/assets/bootstrap/js/**.js', 
     'dist/assets/font-awesome/css/**.css', 
     'dist/assets/font-awesome/fonts/*.eot', 
     'dist/assets/font-awesome/fonts/*.svg', 
     'dist/assets/font-awesome/fonts/*.ttf*', 
     'dist/assets/font-awesome/fonts/*.woff*', 
     'dist/assets/font-awesome/fonts/*.woff2*', 
     'dist/assets/font-awesome/fonts/*.otf', 
     'dist/assets/font-awesome/fonts/*.*', 
     'dist/assets/font-awesome/fonts/*.eot', 
     'dist/assets/font-awesome/less/*.less', 
     'dist/assets/font-awesome/scss/*.scss', 
     'dist/assets/img/*.png', 
     'dist/assets/jquery/*.js', 
     'dist/assets/popper/*.js' 
    ] 
    }; 

Answer 1

私は私の問題への解決策を発見しました。 SW-プリキャッシュの文書の引用：

をreplacePrefix [文字列]

はパスURLの実行時にの先頭に指定した文字列を置換します。実行時にビルド時とは異なるディレクトリから静的ファイルを提供する場合は、このオプションを使用します。たとえば、ローカルファイルがdist/app /の下にあり、静的資産ルートが/ public /にある場合は、 'dist/app /'を削除して '/ public /'に置き換えます。

デフォルト： ''

私は私のsw-precache-config.jsを更新する必要がありました：

module.exports = { 
    navigateFallback: '/index.html', 
    stripPrefix: 'dist/', 
    replacePrefix: 'AngTodo/', 
    root: 'dist/', 
    staticFileGlobs: [ 
     'dist/index.html', 
     'dist/**.js', 
     'dist/**.css', 
     'dist/assets/**.js', 
     'dist/assets/**.css', 
     'dist/assets/bootstrap/css/**.css', 
     'dist/assets/bootstrap/js/**.js', 
     'dist/assets/font-awesome/css/**.css', 
     'dist/assets/font-awesome/fonts/*.eot', 
     'dist/assets/font-awesome/fonts/*.svg', 
     'dist/assets/font-awesome/fonts/*.ttf*', 
     'dist/assets/font-awesome/fonts/*.woff*', 
     'dist/assets/font-awesome/fonts/*.woff2*', 
     'dist/assets/font-awesome/fonts/*.otf', 
     'dist/assets/font-awesome/fonts/*.*', 
     'dist/assets/font-awesome/fonts/*.eot', 
     'dist/assets/font-awesome/less/*.less', 
     'dist/assets/font-awesome/scss/*.scss', 
     'dist/assets/img/*.png', 
     'dist/assets/jquery/*.js', 
     'dist/assets/popper/*.js' 
    ] 
    }; 

Answer 2

また、ユーザーは、SWは、そのURL始まる任意のページを制御する範囲

navigator.serviceWorker.register('/service-worker.js').then(function(reg) { 
    scope:'/my-app/' 
}); 

を提供することができますスコープでそれを無視します。したがって、上記の例のためのサービスワーカーは

/私のアプリ/します - >コントロールそれ

/私のアプリ/ハロー/世界 - >コントロールそれ

/- >ありません>これは、複数のプロジェクトは、SAを持っているGitHubのページのために本当に便利になり、それ

を制御できない - >それは/私のアプリ

制御できない - それは

/他のアプリ/制御私の起源。スコープでは、各プロジェクトごとに異なるサービスワーカーを用意できます。デフォルトスコープは、SWスクリプトの場所によって決まります。