Angular:服务人员配置 [英] Angular : service worker configuration
问题描述
我正在尝试向在angular 8上运行的网站添加pwa功能. 我遵循了很多教程,包括官方和非官方的教程,但我不明白自己在做错什么.
I'm trying to add pwa capabilities to a website running on angular 8. I followed a lot of tutorials, official and unofficial ones and I don't understand what I'm doing wrong.
ngsw-config.json就像这样:
ngsw-config.json is like this :
{
"$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",
"/*.min.js"
],
"urls": [
"https://fonts.googleapis.com/**"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
]
}
}
]
}
我可以在Chrome开发者控制台的应用程序"标签中看到服务工作者已注册并正在运行.
I can see in Chrome dev console Application tab that the service worker is registered and running.
但是我有两个主要问题.
But I've got two main problems.
- 当我以离线模式通过浏览器并重新加载页面时,我收到了chrome错误消息:
- When I pass my browser in offline mode and reload the page, I've got a chrome error message :
似乎无法提供索引页面,服务工作者仍处于注册和运行状态.
It seems the index page can't be served, the service worker is still registered and running.
我可以在联机模式下看到我从服务工作者那里获得索引页面,为什么它不能在脱机模式下工作?
I can see in online mode that I get the index page from the Service worker, so why is it not working in offline mode ?
- 在联机模式下,我可以从网络标签中看到每个请求都被缓存,即使是来自api的请求也是如此.但是我没有在ngsw-config.json中配置dataGroups,为什么会这样呢? 与未在assetGroups的url数组中指定的外部js文件相同.
- In online mode, I can see from the network tab that every requests are cached, even the ones from the api. But I did not configure dataGroups in ngsw-config.json so why is this happening ? Same for external js files not specified in the url array of assetGroups.
可以在此处测试该站点: https://dev.ecni.fr/
The site can be tested here : https://dev.ecni.fr/
谢谢!
在两台运行Windows的计算机上尝试使用不同的最新浏览器时,同样的问题. 但是,在Mac上使用chrome可以正常工作. Windows计算机怎么了?
EDIT : Same problem when trying with different up to date browsers on two computer running windows. However, working fine with chrome on a mac. What's happening with windows computers ?
推荐答案
我可以在Chrome离线模式下看到您的网站,看起来不错.我还与我的ngsw-config.json
文件进行了比较:
I can see your website in Chrome offline mode, it looks fine. I also compared with my ngsw-config.json
file:
{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"updateMode": "prefetch",
"resources": {
"files": [
"/index.html",
"/manifest.json",
"/browserconfig.xml",
"/assets/images/favicon/**",
"/*.css",
"/*.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.woff",
"/*.woff2",
"/*.svg",
"/*.ttf",
"/*.eot"
]
}
}]
}
除了manifest.json
以外,其他所有内容看起来都非常相似.您有一种新格式吗?我还将共享我的manifest.json
文件以使其完整,这可能会有用:
Everything looks pretty similar except the manifest.json
. Is what you have a new format? I'll also share my manifest.json
file to be complete, it may be useful:
{
"name": "ClubUp! Volley Network",
"short_name": "ClubUp!",
"theme_color": "#00aeef",
"background_color": "#ffffff",
"display": "standalone",
"scope": "/",
"start_url": "/search?utm_source=homescreen",
"dir": "ltr",
"lang": "it",
"orientation": "portrait",
"description": "Cerchi un giocatore o una squadra? Fai un salto in ClubUp! per trovare il tuo team ideale. Provalo, è semplice da usare.",
"related_applications": [],
"prefer_related_applications": false,
"icons": [
{
"src": "assets/images/pwa/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "assets/images/pwa/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "assets/images/pwa/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "assets/images/pwa/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "assets/images/pwa/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "assets/images/pwa/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "assets/images/pwa/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "assets/images/pwa/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
如果要比较网络"选项卡中正在发生的事情,则相关网站是以下网站: https://clubup.it/
The related website is this if you want to compare what's happening in the network tab: https://clubup.it/
这篇关于Angular:服务人员配置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!