How to add Modern Installation UI for your PWA

A few days back, I uninstalled the Twitter app and switched to the web app and I noticed something,

Twitter had like a different/modern Installation UI for its PWA. (Know more about PWAs here.)

tapthelink(4).png

I was like, Woah, this looks so dope and better than that boring installation screen, which most of the PWAs have, This is also similar to Playstore like UI with an image carousel

If you didn't know, here is how most of the PWA Installation Screen Look

tapthelink(6).png

Now I wanted this installation UI for my PWA too, so started digging and Initially, I thought this might be some custom implementation of the Installation UI but then, I visited https://twitter.com/manifest.json.

and I noticed a new property called screenshots in the manifest JSON file, and the src property had the same images which we saw in the installation screen.

Turns out, there is an option to turn this new Installation UI by just adding a bunch of screenshots of your app.

I just copied the same width and height of screenshots from twitter and created some images on Canva

ezgif.com-gif-maker(1).gif

you can follow any height and width which falls under this critera.

Now, time to add the screenshots property with images we created into the manifest.json

 "screenshots": [
    {
      "src": "https://abs.twimg.com/responsive-web/client-web/twitter-lite-data-saver-marketing.68059867.png",
      "sizes": "586x1041",
      "type": "image/png"
    },
    {
      "src": "https://abs.twimg.com/responsive-web/client-web/twitter-lite-explore-marketing.fd45b027.png",
      "sizes": "586x1041",
      "type": "image/png"
    },
    {
      "src": "https://abs.twimg.com/responsive-web/client-web/twitter-lite-timeline-marketing.befcdb47.png",
      "sizes": "586x1041",
      "type": "image/png"
    }
  ],

Replace the src and sizes according to your image location and size. The Image can be either a CDN link or can be in your public folder.

Final Result

Yay, Even my PWA has the same UI now.

tapthelink(7).png

That's it folks, I hope you update your PWA with this new UI and share this with your friends.

Also if you know any creators who make YouTube videos, tell them to checkout tapthe.link

How to add Modern Installation UI for your PWA

Comments (2)

More from this blog

You don't have to remember Linux commands anymore

Why I built my own node-schedule alternative

One Year Journey as a Software Developer

3 Basic Things you can do to improve API Performance in Node.Js

Final Result

Command Palette

Comments (2)

More from this blog

Final Result