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.
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 (4)
Tip: Use lighthouse to figure out what's wrong with your WebApp and how to solve it. You can also use web.dev, which will give you similar results.
Cheers!
Lighthouse can't spot these small mistakes
It does spot this mistakes (under the PWA section). You can also debug them in the "Application" tab in Chrome ^_^
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