我有一个使用Angular和PWA的项目。操作系统为Windows10。角核版本为8.2.14,pwa版本为0.803.19。清单文件是
{
"name": "App Name",
"short_name": "App Name",
"theme_color": "#313643",
"background_color": "#fafafa",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "assets/icon/72.png",
"sizes": "72x72",
"type": "image/png"
},
...etc
]
}
当我第一次在桌面上安装pwa时,清单文件是默认的,带有默认图标。然后,我更改了图标文件夹中的图标,并在清单中使用主题颜色更改了它们的路径。我尝试过几次重新安装该应用程序,但是主题和图标与默认设置相同。我检查了控制台-有新图标。提示安装该应用程序的方法相同。但是,当我单击安装时,已安装的应用程序图标和主题默认为angular。我什至试图重命名图标文件夹。它没有帮助。仅当我将主题明确粘贴为index.html主题颜色时,主题才会更改。有两个有趣的事情。首先是当我在已安装的应用程序上尝试使用RMB时,属性->更改图标,它只为我提供一个新图标,而没有角度默认值。但是,如果手动更改它并重新安装该应用程序,则图标再次是角度默认设置。其次,当我们首次尝试在另一台PC上安装该应用程序时,已安装的应用程序带有新图标。在我看来,PC上有某种缓存或某种缓存。我尚未找到有关此问题的任何信息。有人有什么想法吗?在生产中,这可能会成为一个问题,我认为这不是正确的行为。
这是我的ngsw-config.json
{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/manifest.webmanifest",
"/*.css",
"/*.js"
]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
]
}
}
]
}
您如何为ng-sw.config
文件中的图标(静态资产)设置缓存策略?
[如果要手动删除软件缓存,则可以通过开发工具(如果与Chrome一起使用):
然后刷新页面,软件将再次缓存目标资产。然后,您应该看到新图像。
如果您想了解有关PWA的更多信息,have a look at the articles I wrote about them,从理论到具体示例。