要解决Angular服务工作线程序部署到Github页面(子目录)不缓存资源的问题,可以通过在Angular应用的service worker配置中添加版本号或哈希值来实现。下面是一个可能的解决方案:
ngsw-config.json
文件。assetGroups
数组中找到resources
对象。resources
对象中添加一个versionedFiles
属性,该属性是一个字符串数组,用于指定希望在每次部署时更新的文件。versionedFiles
数组中。示例代码如下所示:
{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/*.css",
"/*.js",
"/favicon.ico",
"/index.html",
"/main.*.js", // 添加需要版本化的文件
"/polyfills.*.js", // 添加需要版本化的文件
"/runtime.*.js", // 添加需要版本化的文件
"/styles.*.css" // 添加需要版本化的文件
],
"versionedFiles": [
"/main.*.js", // 添加需要版本化的文件
"/polyfills.*.js", // 添加需要版本化的文件
"/runtime.*.js", // 添加需要版本化的文件
"/styles.*.css" // 添加需要版本化的文件
]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}
]
}
在上述示例中,versionedFiles
数组中的文件将在每次部署时以新的哈希值进行更新,从而避免浏览器缓存旧的资源文件。
请记住,当你进行新的部署时,需要生成新的构建文件以更新哈希值,并将构建文件部署到Github页面的子目录上。