シンプルな Angular アプリケーションがあり、Service Worker の助けを借りてオフライン対応にしようとしています。Service Worker の設定方法については、次のチュートリアルに従いました。
https://coryrylan.com/blog/fast-offline-angular-apps-with-service-workers
SW とアプリケーション自体は、自分の開発マシンで実行すると問題なく動作しますが、これを Github プロジェクト ページhttps://zyxon.github.io/AngTodo/にデプロイしたいと考えています。
フォルダーのコンテンツをアップロードするdist
と (開発サーバーで行っているのと同じ)、assets
フォルダーのコンテンツで 404 が取得されるため、サービス ワーカーは登録に失敗します。でファイルを探します/assets/...
。
アプリケーションが Web サーバー ROOT でホストされているため、私の開発サーバーで動作すると推測されますが、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'
]
};