CODEWITHSUNDEEP
angularprogressive-web-appsfirebase-hosting
HirenParekh
HirenParekh

Reputation: 3735

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/

Upvotes: 10

Views: 14416

Answers (1)

Haugstack
Haugstack

Reputation: 49

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.

Upvotes: 0

Related Questions