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...
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.
Top comments (2)
Yaa
But in lighthouse pwa section
Needs
purpose:maskableand 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