Ionic React v7 PWA doesn't work

Ionic Framework
1

Hi. I did everything from Vite section here:

And I see that ionic build --prod generates PWA files:

Screenshot from 2023-07-26 17-03-23

Then I deploy them to Firebase hosting, and web app works. But I don’t see “install button” or invitation popup neither on mobile chrome nor on desktop…

Also I see that server returns right mime type for manifest.webmanifest:

Screenshot from 2023-07-26 17-10-01

Does someone know how to fix that?

2

You need to build that popup, it is not out of the box.

3

I agree with popup. But “install” in chrome also doesn’t appear anywhere. Isn’t it out of the box?
Screenshot from 2023-07-26 17-31-27

4

As for the install on chrome button in the search box; not sure, but for mobile no it’s not.

5

Shouldn’t this appear after steps that I made (that described above)?

photo1690378549
photo1690378549420×1280 45.5 KB

Thank you for answering.

6

Yes it should, and on ios as well. you’re welcome!

1 Like
7

Solution

After a lot of attempts, I have noticed that Chrome dev tools Application tab, warns me about the problem with my manifest:

Screenshot from 2023-07-26 23-21-40
Screenshot from 2023-07-26 23-21-40847×340 55 KB

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:

2 Likes