缓存图标离子PWA角度

Question

我想知道是否有人可以帮助我。我使用 Ionic + Angular 开发一个 PWA，并使用 Firebase 托管它。事实是，当我失去互联网时，离子图标渴望...我无法弄清楚如何修改我的ngsw-config.json以使其正常工作。

这是我的服务工作进程配置文件

{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/assets/fonts/*",
"node_modules/videogular2/fonts/videogular.css",
"/index.html",
"/*.css",
"/*.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
]
}
}
]
}

Answer 1

添加新部分或扩展现有部分，如下所示：

{
"name": "icons",
"installMode": "prefetch", // Download as soon as possible, may cause big net usage
"updateMode": "prefetch", // Use cached version
"resources": {
"files": [
"/svg/*.svg", // Path or template for your icons (Fetches all of it)
"/svg/concrete.svg" // You may use concrete ones only
]
}
}

如果您有一个大型图标库，最好指定当应用程序处于离线模式时应该可用的图标库。 您可以在此处找到更多信息 Angular 服务工作线程配置指南