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.
- While Adding caches(sw.js)
- 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...
NotableAPP / NotableAPP.github.io
The noting app
BOOSTED
App which creates the notes with md.
App is running at : https://NotableAPP.github.io/
Top comments (2)
Yaa
But in lighthouse pwa section
Needs
purpose:maskable
and Installiblity needspurpose: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
Lighthouse can't spot these small mistakes