0

我有一个简单的 Angular 应用程序，我正在尝试在 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 以输出带有附加前缀（/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'
    ]
  };
4

2 回答 2

1

用户还可以提供范围

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

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

/my-app/ --> 控制它

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

/ --> 不控制它

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

/my-app --> 不控制它

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

于 2017-09-02T15:09:58.140 回答
0

我找到了解决我的问题的方法。引用 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'
    ]
  };
于 2017-09-01T11:08:09.897 回答