[英]How to make an Angular PWA installable?
我正在尝试使用 Angular 制作可安装的 PWA。
按照文档,我运行ng add @angular/pwa
以使我的应用程序成为 PWA。 它工作得很好。 然后我使用ng build
构建它并使用http-server
提供构建服务。
服务人员似乎工作正常,它缓存资产,在我禁用互联网时继续工作,等等。
但是,此时我希望它会询问用户是否要安装该应用程序,但事实并非如此。 我查看了MDN 指南,该应用程序似乎满足了所有要求。 另一方面,这个web.dev 页面说要满足的安装标准之一是满足给定的用户参与启发式。
所以我不知道安装提示没有显示的原因,它可以是:
如果有帮助,以下是一些相关文件:
manifest.webmanifest
{
"name": "SiAQ",
"short_name": "siaq",
"description": "Aplicativo móvel do Sistema de Atendimento aos Queimados (SiAQ)",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"scope": "./",
"start_url": "./",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
}
]
}
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/**",
"/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
]
}
}
]
}
看起来你做的一切都很好。 @angular/pwa
应该从盒子里完成所有的工作。 我唯一的猜测是你正在构建你的应用程序,而不是在prod
模式下。
尝试按照以下步骤操作:
ng build --prod
cd dist/<proj_name>
http-server
显然,我的 PWA 收到了警告,因为manifest.webmanifest
中我将图标的目的设置为"maskable any"
。 只需从所有图标中删除此属性(恢复为默认值)即可正常工作。
您可以通过打开开发工具并转到应用程序 -> 清单来检查您的 PWA 是否一切正常。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.