Angular 2+ 将 sw-precache 与 github 项目页面一起使用

Question

我有一个简单的 Angular 应用程序，我正试图在 Service Worker 的帮助下使其支持离线。我已按照本教程学习如何设置服务人员：

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

当我运行在我自己的开发机器上时，软件和应用程序本身工作正常，但我想在 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'
    ]
  };

Answer 1

我找到了解决问题的方法。引用 sw-precache 文档：

replacePrefix [String]

Replaces a specified string at the beginning of path URL's at runtime. Use this option when you are serving static files from a different directory at runtime than you are at build time. For example, if your local files are under dist/app/ but your static asset root is at /public/, you'd strip 'dist/app/' and replace it with '/public/'.

Default: ''

我必须更新我的 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

用户也可以提供范围

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

SW 将控制其 URL 以范围开头的任何页面，并忽略不这样做的页面。所以，对于上面的例子，service worker 将

/my-app/ --> 控制它

/my-app/hello/world --> 控制它

/ --> 管不了

/another-app/ --> 不受控制

/my-app --> 不受控制

这对于多个项目具有相同来源的 GitHub 页面非常方便。作用域让您可以为每个项目配备不同的 service worker。默认范围由 SW 脚本的位置决定。

Angular 2+ 将 sw-precache 与 github 项目页面一起使用

Angular 2+ using sw-precache with github project pages

github-pages

service-worker

sw-precache

angular