Question

我有一个简单的Angular应用程序，并且我试图在服务工作者的帮助下使其脱机。我已经按照本教程介绍了如何设置服务工作者：

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'
    ]
  };

Answer 1

用户还可以提供范围

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

SW会控制其网址以作用域开头的任何网页，并且会忽略该网页。因此，对于上面的示例，服务工作者将

/ my-app / - ＆gt;控制它

/ my-app / hello / world - ＆gt;控制它

/ - ＆gt;不控制它

/ another-app / - ＆gt;不控制它

/ my-app - ＆gt;不控制它

对于多个项目具有相同来源的GitHub页面，这变得非常方便。范围允许您为每个项目拥有不同的服务工作者。默认范围由SW脚本的位置决定。

Answer 2

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

replacePrefix [String]

在运行时替换路径URL开头的指定字符串。在运行时从其他目录提供静态文件时，请使用此选项，而不是在构建时。例如，如果您的本地文件位于dist / app /下，但您的静态资源根目录位于/ public /，则您可以删除＆dist; / app /＆＃39;并将其替换为＆＃39; / public /＆＃39;。

默认：＆＃39;＆＃39;

我必须更新$table.Add("123", "VM0004", "Pete")：

sw-precache-config.js

Angular 2+使用sw-precache和github项目页面

2 个答案: