如何更新渐进式Web应用程序的主屏幕图标? [英] How can I update home screen icon of my Progressive Web App?
问题描述
我正在学习渐进式Web应用程序，并且我已经在具有所有PWA配置的angular应用程序上创建了.然后，我将该应用程序托管在firebase上，并在我的android手机上将其打开，并成功收到提示，要求将应用程序添加到主屏幕.
I am learning progressive web apps, and I have created on angular application that has all the PWA configuration. Then I hosted that application on firebase and opened it on my android phone and successfully got the prompt saying add the app to home screen.
但是现在我更改了清单文件和index.html文件中的应用程序图标，然后再次部署了该应用程序，但是手机上的主屏幕图标没有更新.我尝试卸载应用程序，然后重新安装，但仍然在手机上显示旧图标.
But now I have changed the app icon in the manifest file and in the index.html file then deployed the app again but the home screen icon on my phone is not updating. I have tried uninstalling the app then reinstalling but still it displays the old icon on my phone.
所以我的问题是，如何更新用户设备上的主屏幕图标?这是我的配置文件.
So my question is, How to update home screen icon on user device ? here are my configuration files.
manifest.json
{
"short_name": "My Expense",
"name": "Log My Expense",
"start_url": "/",
"theme_color": "#5FD4AF",
"background_color": "#ffffff",
"display": "standalone",
"orientation": "portrait",
"icons": [
{
"src": "/assets/icons/cash-money-wallet_64.png",
"sizes": "64x64",
"type": "image/png"
},
{
"src": "/assets/icons/cash-money-wallet_128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/assets/icons/cash-money-wallet_256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/assets/icons/cash-money-wallet_512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
ngsw-config.json
{
"index": "/index.html",
"assetGroups": [{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html"
],
"versionedFiles": [
"/*.bundle.css",
"/*.bundle.js",
"/*.chunk.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}]
}
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>LogMyExpensePwa</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="/assets/icons/cash-money-wallet_512.png">
<link rel="manifest" href="/manifest.json">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="msapplication-starturl" content="/">
<meta name="theme-color" content="#5FD4AF">
</head>
<body>
<app-root></app-root>
<noscript>
JavaScript is required to run this application.
</noscript>
</body>
</html>
，这里是应用程序链接:- https://logmyexpense.firebaseapp.com/
and here is the application link:- https://logmyexpense.firebaseapp.com/
推荐答案
听起来像上面的评论中您得到了答案，我只是想提出一些对我有所帮助的东西.我的应用程序位于React而不是Angular中(我是一个菜鸟，所以我不知道这是否重要，但是我想做个记录以防万一)并且当我尝试将应用程序图标放在src中时(我的是在像您这样的"/资产"中)，它并没有刷新图标.为了清楚起见，我只尝试了一次-但是DevTools中的application标签也没有看到我的图标.因此，我将图标放在图像文件夹中的公用文件夹中，当我重新安装该应用程序时，它的图标非常完美.我已经有了该文件夹来存放我的标签图标(忘记了该术语的技术术语)，所以我不觉得自己在添加任何会使我的应用程序anything肿的东西，但这是我的看法.
Sounds like in the comments above you got your answer, I just wanted to throw up something that helped me. My app is in React not Angular (and I'm a noob so I don't know if that would matter but I wanted to make note in case it did) and when I tried to have the app icon within the src (mine is in "/assets" like yours) it wasn't updating the icon with a refresh. To be very clear here, I only tried once - but the application tab in DevTools wasn't seeing my icon either. So instead I put the icon in my public folder within an images folder and when I reinstalled the app it had my icon perfect. I already had that folder to house my tab icon (forgot the technical term for that) so I didn't feel like I was adding anything that was bloating my app but that's my opinion.
不知道这是否有帮助，我没有走过这个兔子洞，试图弄清楚为什么我没有在src/assets中捕获图像.
Don't know if that helps, I didn't go down this rabbit hole trying to figure out why mine wasn't catching the image in the src/assets.
这篇关于如何更新渐进式Web应用程序的主屏幕图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
