gpt4 book ai didi

angular - 如何更新 Progressive Web App 的主屏幕图标?

转载 作者:太空狗 更新时间:2023-10-29 19:33:40 24 4
gpt4 key购买 nike

我正在学习渐进式 Web 应用程序,并且我创建了具有所有 PWA 配置的 Angular 应用程序。然后我在 firebase 上托管该应用程序并在我的 android 手机上打开它并成功收到提示说将应用程序添加到主屏幕。

但现在我已经更改了 list 文件和 index.html 文件中的应用程序图标,然后再次部署了该应用程序,但我手机上的主屏幕图标没有更新。我尝试卸载该应用程序然后重新安装,但它仍然在我的手机上显示旧图标。

所以我的问题是,如何更新用户设备上的主屏幕图标?这是我的配置文件。

list .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/

最佳答案

听起来您在上面的评论中得到了答案,我只是想抛出一些对我有帮助的东西。我的应用程序在 React 而不是 Angular 中(我是菜鸟所以我不知道这是否重要但我想记下以防万一)以及当我尝试在 src 中放置应用程序图标时(我的是在像你这样的“/assets”中)它没有通过刷新来更新图标。在这里非常清楚,我只尝试了一次 - 但 DevTools 中的应用程序选项卡也没有看到我的图标。因此,我将图标放在图像文件夹内的公共(public)文件夹中,当我重新安装应用程序时,它使我的图标完美无缺。我已经有了那个文件夹来存放我的选项卡图标(忘记了它的技术术语),所以我不觉得我在添加任何使我的应用程序膨胀的东西,但这是我的意见。

不知道这是否有帮助,我没有深入这个兔子洞试图弄清楚为什么我的没有捕捉到 src/assets 中的图像。

关于angular - 如何更新 Progressive Web App 的主屏幕图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48135690/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com