1. Anuncie Aqui ! Entre em contato fdantas@4each.com.br
Anuncie aqui Patrocinador Anuncios

How can I update home screen icon of my Progressive Web App?

Discussão em 'Angular' iniciado por HirenParekh, Outubro 4, 2024 às 22:43.

  1. HirenParekh

    HirenParekh Guest

    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/

    Continue reading...
    HirenParekh, Outubro 4, 2024 às 22:43
    #1

Compartilhe esta Página