Angular 2+ 使用带有 github 项目页面的 sw-precache

Question

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

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

当我在自己的开发机器上运行时，软件和应用程序本身运行良好，但我想将其部署在 Github 项目页面上：https://zyxon.github.io/AngTodo/

上传 dist 文件夹的内容（与我在开发服务器上所做的一样）后，Service Worker 无法注册，因为 assets 文件夹的内容出现 404。它在/assets/... 中查找文件。

我最好的猜测是它可以在我的开发服务器上运行，因为该应用程序托管在 Web 服务器 ROOT 中，但对于 Github 页面，它托管在 .../AngTodo 目录中。

所以我的问题如下：如何指定 sw-precache 以输出带有附加前缀（在我的情况下为/AngTodo/assets/...）的 SW？

我的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

用户也可以提供范围

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

软件将控制 URL 以范围开头的任何页面，并忽略不以范围开头的页面。因此，对于上面的示例，服务人员将

/my-app/ --> 控制它

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

/ --> 不控制它

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

/my-app --> 不控制它

这对于多个项目具有相同来源的 GitHub 页面非常方便。范围允许您为每个项目使用不同的服务人员。默认范围由 SW 脚本的位置决定。

Answer 2

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

替换前缀 [字符串]

在运行时替换路径 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'
    ]
  };