How can I update home screen icon of my Progressive Web App?
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.
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>
and here is the application link:- https://logmyexpense.firebaseapp.com/
angular progressive-web-apps firebase-hosting asked Jan 7 '18 at 8:52
HirenParekhHirenParekh
1,08711224
add a comment |
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.
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>
and here is the application link:- https://logmyexpense.firebaseapp.com/
angular progressive-web-apps firebase-hosting asked Jan 7 '18 at 8:52
HirenParekhHirenParekh
1,08711224
2
Updating app's icon was sited in the documentation.Changing your icon or name in the manifest will update the icon on the home screen after the user has subsequently opened the site.Also, try to check Android Intent Filters if you are missing something.
– MαπμQμαπkγVπ.0
Jan 7 '18 at 23:27
I just uninstall the app and tried to add it to homescreen again. And surprisingly this time it's added with the new icon. I'll definitely try the documentation way too, after changing the icon one more time. Thanks for your comment. It was useful.
– HirenParekh
Jan 8 '18 at 0:21
add a comment |
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.
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>
and here is the application link:- https://logmyexpense.firebaseapp.com/
angular progressive-web-apps firebase-hosting asked Jan 7 '18 at 8:52
HirenParekhHirenParekh
1,08711224
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.
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>
and here is the application link:- https://logmyexpense.firebaseapp.com/
angular progressive-web-apps firebase-hosting angular progressive-web-apps firebase-hosting asked Jan 7 '18 at 8:52
HirenParekhHirenParekh
1,08711224
asked Jan 7 '18 at 8:52
HirenParekhHirenParekh
1,08711224
asked Jan 7 '18 at 8:52
HirenParekhHirenParekh
1,08711224
asked Jan 7 '18 at 8:52
HirenParekhHirenParekh
1,08711224
asked Jan 7 '18 at 8:52
HirenParekhHirenParekh
1,08711224
1,08711224
2
Updating app's icon was sited in the documentation.Changing your icon or name in the manifest will update the icon on the home screen after the user has subsequently opened the site.Also, try to check Android Intent Filters if you are missing something.
– MαπμQμαπkγVπ.0
Jan 7 '18 at 23:27
I just uninstall the app and tried to add it to homescreen again. And surprisingly this time it's added with the new icon. I'll definitely try the documentation way too, after changing the icon one more time. Thanks for your comment. It was useful.
– HirenParekh
Jan 8 '18 at 0:21
add a comment |
2
Updating app's icon was sited in the documentation.Changing your icon or name in the manifest will update the icon on the home screen after the user has subsequently opened the site.Also, try to check Android Intent Filters if you are missing something.
– MαπμQμαπkγVπ.0
Jan 7 '18 at 23:27
I just uninstall the app and tried to add it to homescreen again. And surprisingly this time it's added with the new icon. I'll definitely try the documentation way too, after changing the icon one more time. Thanks for your comment. It was useful.
– HirenParekh
Jan 8 '18 at 0:21
2
2
Updating app's icon was sited in the documentation.
Changing your icon or name in the manifest will update the icon on the home screen after the user has subsequently opened the site. Also, try to check Android Intent Filters if you are missing something.– MαπμQμαπkγVπ.0
Jan 7 '18 at 23:27
Updating app's icon was sited in the documentation.
Changing your icon or name in the manifest will update the icon on the home screen after the user has subsequently opened the site. Also, try to check Android Intent Filters if you are missing something.– MαπμQμαπkγVπ.0
Jan 7 '18 at 23:27
I just uninstall the app and tried to add it to homescreen again. And surprisingly this time it's added with the new icon. I'll definitely try the documentation way too, after changing the icon one more time. Thanks for your comment. It was useful.
– HirenParekh
Jan 8 '18 at 0:21
I just uninstall the app and tried to add it to homescreen again. And surprisingly this time it's added with the new icon. I'll definitely try the documentation way too, after changing the icon one more time. Thanks for your comment. It was useful.
– HirenParekh
Jan 8 '18 at 0:21
add a comment |
1 Answer
1
active
oldest
votes
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.
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.
answered Nov 15 '18 at 22:56
HaugstackHaugstack
243
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f48135690%2fhow-can-i-update-home-screen-icon-of-my-progressive-web-app%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
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.
answered Nov 15 '18 at 22:56
HaugstackHaugstack
243
add a comment |
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.
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.
answered Nov 15 '18 at 22:56
HaugstackHaugstack
243
add a comment |
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.
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.
answered Nov 15 '18 at 22:56
HaugstackHaugstack
243
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.
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.
answered Nov 15 '18 at 22:56
HaugstackHaugstack
243
answered Nov 15 '18 at 22:56
HaugstackHaugstack
243
answered Nov 15 '18 at 22:56
HaugstackHaugstack
243
answered Nov 15 '18 at 22:56
HaugstackHaugstack
243
243
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f48135690%2fhow-can-i-update-home-screen-icon-of-my-progressive-web-app%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Updating app's icon was sited in the documentation.
Changing your icon or name in the manifest will update the icon on the home screen after the user has subsequently opened the site.Also, try to check Android Intent Filters if you are missing something.– MαπμQμαπkγVπ.0
Jan 7 '18 at 23:27
I just uninstall the app and tried to add it to homescreen again. And surprisingly this time it's added with the new icon. I'll definitely try the documentation way too, after changing the icon one more time. Thanks for your comment. It was useful.
– HirenParekh
Jan 8 '18 at 0:21