Caching Angular CLI PWA-ngsw配置仅缓存CSS中引用的图像
所以这是一个有点奇怪的问题,我似乎找不到任何在线参考。我希望这里有人能解释一下下面的问题,以及可能的解决办法- 我有一个和Angular CLI应用程序,它符合Google的PWA要求。一切正常,但是有些图像没有被服务工作者缓存 这是我的ngsw-config.json-Caching Angular CLI PWA-ngsw配置仅缓存CSS中引用的图像,caching,angular-cli,progressive-web-apps,angular-service-worker,ng-build,Caching,Angular Cli,Progressive Web Apps,Angular Service Worker,Ng Build,所以这是一个有点奇怪的问题,我似乎找不到任何在线参考。我希望这里有人能解释一下下面的问题,以及可能的解决办法- 我有一个和Angular CLI应用程序,它符合Google的PWA要求。一切正常,但是有些图像没有被服务工作者缓存 这是我的ngsw-config.json- { "$schema": "./node_modules/@angular/service-worker/config/schema.json", "index": "/index.html", "asse
{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js",
"../assets/signalR/appHub.js",
"../admin/images/**",
"../manifest/manifest.json"
],
"urls": [
"/api/WhoAmI",
"/api/GetApps"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)",
"../admin/images/**"
]
}
}
]
}
在admin/images文件夹中,有一些背景图像、徽标、微调器、图标等。
然而,当我运行“ng build-prod”时,缓存的唯一图像是CSS背景图像中的引用。任何放在页面上的内容都将被忽略
这将导致脱机页面没有徽标或图标
查看生成的“dist”文件夹,将复制“工作”图像文件并为其提供随机后缀。
在生成的ngsw.json文件中,这些是唯一引用的图像,没有提及丢失的徽标等
{
"configVersion": 1,
"timestamp": 1568879436433,
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"updateMode": "prefetch",
"urls": [
"/favicon.ico",
"/index.html",
"/main-es2015.b125878abf05e7d82b63.js",
"/main-es5.6e9e620d3fbd96496f98.js",
"/polyfills-es2015.4d31cca2afc45cfd85b5.js",
"/polyfills-es5.2219c87348e60efc0076.js",
"/runtime-es2015.703a23e48ad83c851e49.js",
"/runtime-es5.465c2333d355155ec5f3.js",
"/scripts.f616c8c0191ed4649bce.js",
"/styles.a4be089a70c69f63e366.css"
],
"patterns": [
"\\/api\\/WhoAmI",
"\\/api\\/GetApps"
]
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"urls": [
"/assets/signalR/appHub.js",
"/bgrounds-geometric-black.8d983f6875c006eda992.png",
"/bgrounds-geometric-red.1484266e3058319624bd.png",
"/block-spinner-dark.20f05a2ddef506c61f4d.gif",
...
}
...
}
有人能解开这个谜团吗
很抱歉问了这么长的问题,但如果你已经问到这一点,谢谢你:
感谢您的帮助 通过处理一些不同的事情,我找到了一个解决方法——但这并不能解释为什么它最初不起作用 似乎将我的文件夹从admin/images重命名为assets/images并更新相关的resource>files路径使其工作正常 如果有人偶然发现了更多关于这一原因的见解,请告诉我 谢谢,
Rob我在ngsw-config.json的下一行添加了
"/runtime*",
"/main*",
"/style*",
"/polyfill*"
后来看起来是这样的
{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/runtime*",
"/main*",
"/style*",
"/polyfill*",
"/favicon.ico",
"/index.html",
"/css",
"/js"
]
}
}, {
然后它成功了