0

シンプルな 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'
    ]
  };
4

2 に答える 2