Hrithwik Bharadwaj
Hrithwik Bharadwaj

Hrithwik Bharadwaj

How to add Modern Installation UI for your PWA

How to add Modern Installation UI for your PWA

Hrithwik Bharadwaj's photo
Hrithwik Bharadwaj
ยทMay 28, 2022ยท

2 min read

Featured on daily.dev

Subscribe to my newsletter and never miss my upcoming articles

Play this article

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

image.png

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

Did you find this article valuable?

Support Hrithwik Bharadwaj by becoming a sponsor. Any amount is appreciated!

See recent sponsors |ย Learn more about Hashnode Sponsors
ย 
Share this