DEV Community

Cover image for PWA || Mistakes While making pwa INSTALLABLE

Posted on


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 .

Enter fullscreen mode Exit fullscreen mode

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
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.


GitHub logo NotableAPP / Formal-stack-pdfs

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


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 (4)

lukeshiru profile image
Luke Shiru

Tip: Use lighthouse to figure out what's wrong with your WebApp and how to solve it. You can also use, which will give you similar results.


shubham_ingale profile image

Lighthouse can't spot these small mistakes

lukeshiru profile image
Luke Shiru • Edited

It does spot this mistakes (under the PWA section). You can also debug them in the "Application" tab in Chrome ^_^

Thread Thread
shubham_ingale profile image
ShGI • Edited

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

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