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

Question

我有一个简单的Angular应用程序，我试图让它脱机 - 可以在服务人员的帮助下完成。我按照有关如何设置服务工作者本教程：

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

的SW和应用程序本身工作正常，当我在我自己的开发机器上运行它，但我想在Github上部署该项目页面：https://zyxon.github.io/AngTodo/

已经上传的文件夹dist（因为我在我的开发服务器上做相同）的服务人员无法注册的内容，由于得到404的上assets文件夹的内容。它在/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-预缓存文件：

replacePrefix [字符串]

取代在路径的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' 
    ] 
    }; 

Answer 2

用户也可以提供一个范围

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

的SW将控制其URL开头的任何页面与一个范围，并会忽略不这样做。所以，上面的例子中的服务人员将

/我的应用程序内/ - >控制它

/我的应用程序内/你好/世界 - >控制它

/- 不>控制它

/另一个应用程序内/ - >无法控制它

/我 - 应用程序 - >无法控制它

这将成为非常方便的在多个项目中有SA GitHub的页面我出身。范围允许您为每个项目提供不同的服务人员。默认范围由SW脚本的位置确定。