Progressive Web App - Points to note when setting PWA and service worker.

Since this site is a blog, there is no need to make it a PWA.

But it was my first experience with PWA, so I gave it a try.

When I introduced PWA and service worker, the following error occurred in Litehouse, but there was a problem that I could not solve easily, so I will introduce it.

Manifest doesn't have a maskable icon.

Manifest.json that solves this error in Litehouse is below.

{
"name": "TECH BLOG",
"short_name": "TECH BLOG",
"id": "/",
"start_url": "/",
"categories": ["developer","development","developer tools","design","lifestyle"],
"description": "TECH BLOG is a blog that publishes web development and a part of life.In web development, Python, Django, Figma, SEO are the main categories.",
"display": "standalone",
"background_color": "#161719",
"theme_color": "#161719",
"icons": [
	{
		"src": "/media/icon-s.png",
		"sizes": "192x192",
		"type": "image/png",
		"purpose": "any"
	},
	{
		"src": "/media/icon-s.png",
		"sizes": "192x192",
		"type": "image/png",
		"purpose": "maskable"
	},
	{
		"src": "/media/icon-b.png",
		"sizes": "512x512",
		"type": "image/png",
		"purpose": "any"
	},
	{
		"src": "/media/icon-b.png",
		"sizes": "512x512",
		"type": "image/png",
		"purpose": "maskable"
	}
]
}

Instead of "purpose": "any maskable" like this, at least for now, it seems necessary to set "purpose": "any" and "purpose": "maskable" separately.

In addition, it was pointed out that the id was not specified in Application>Manifest>App manifest of the Google developer tool, so I fixed it as well.

If you use PWA, please try it.