PWA || Mistakes While making pwa INSTALLABLE

The Mistakes that make your pwa not valid to install. Or service and manifest does not meet installability

Today,I'm writing the mistake that I created while making my pwas and grabbed some knowledge and now I am sharing that knowledge with you.

M1 : Icons purpose .

In webmanifest we have to declare the purpose of our icon in "icons":[{"purpose":"my purpose"}]
We write purpose maskable but it is not valid for Installiblity. You have to declare purpose to any .

{
...
"icons":[
{
...
"purpose":"any"
}
]
}

M2 : Broken path.

It's more important that you have to write correct path every time.
If you write any broken path it will not meet Installiblity.
Where it's important.

1. While Adding caches(sw.js)
2. While writing paths of icon , scope and start_url.(manifest)

M3 : Path have to smaller case

In my app
I was written
https://formal-stack.netlify.app/APP/
And my folder was also APP but it's important that start_url and scope in manifest have to match with the scope of registration of service worker (with case sensitivity).
I replaced APP with app and my app became installable.

source code

If you want to check pwa example.

Check
https://notableapp.github.io

https://formal-stack.netlify.app

NotableAPP / Formal-stack-pdfs

Make pdf from image , markdown and more is coming...

Formal-stack-pdfs

The app where pdfs created in multiple ways like from markdown text , plain text , images to pdf and many features coming soon.

Formal contribution

if you want to contribute to our app/site then see issue availibility for you and then fork , edit and pr to project.

View on GitHub

NotableAPP / NotableAPP.github.io

The noting app

BOOSTED

App which creates the notes with md.

App is running at : https://NotableAPP.github.io/

View on GitHub

Comments

[ShGI]

Lighthouse can't spot these small mistakes

[ShGI]

Yaa
But in lighthouse pwa section
Needs
purpose:maskable and Installiblity needs purpose:any.
Installiblity and pwa optimization are different I think from my experience.

Yaa,
I know we can debug in application tab
But beginners can't spot exact mistakes in with application
Like case sensitivity and some more mistakes