Solution
After a lot of attempts, I have noticed that Chrome dev tools Application
tab, warns me about the problem with my manifest:
When I generated all these images here, I listed them in /public/manifest.json
:
{
"short_name": "My App",
"name": "My Cool App",
"icons": [
{
"src": "assets/icon/favicon.png",
"sizes": "64x64",
"type": "image/png"
},
{
"src": "assets/icon/favicon-16x16.png",
"sizes": "16x16",
"type": "image/png"
},
{
"src": "assets/icon/favicon-24x24.png",
"sizes": "24x24",
"type": "image/png"
},
{
"src": "assets/icon/favicon-32x32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "assets/icon/icon.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "maskable"
},
{
"src": "assets/icon/icon-124x124.png",
"type": "image/png",
"sizes": "124x124",
"purpose": "maskable"
},
{
"src": "assets/icon/icon-144x144.png",
"type": "image/png",
"sizes": "144x144",
"purpose": "any"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#ffffff"
}
And everything works!!!
Notice, that PWA related changes in code doesn’t work in dev mode (npm start dev
). In dev mode you haven’t access to file: http://localhost:8100/manifest.webmanifest
. So every time I needed to see changes, I did
ionic build --prod
cd dist
serve .
And only then I could see results of recent code updates. I couldn’t find a better way….
If you migrated a project from ionic/react v6 to v7 as me, be careful to migrate from CRA (react-scripts) to Vite, which is not mentioned in docs. How to do that is described here:
But I just created a new ionic project: ionic start new-project
, and moved all my components from existing project (v6 with CRA) to the new one (v7 with Vite).
I also recommend this article: