Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle Sheets iconSwift icon
Published at
Updated at
Reading time
2min
This post is a note that includes my thoughts about something I found online. Check it out yourself!

I'm not following what's happening in the progressive web app space because I don't think every website needs to be an offline-ready PWA. But today, I learned about two valuable new PWA features while skipping through Önder Ceylan's PWA summit slides "Make your PWAs Look and Launch Beautifully".

Progressive web apps are configured via a web app manifest that you define in an HTML link element.

<link rel="manifest" href="manifest.json">

This manifest JSON file holds information such as the app name, its icons and, as I learned today, screenshots and shortcuts. 😲

PWA installation screenshots

It's possible to define screenshots that show up when people install your progressive web app. Define a screenshots property in the manifest file, and the installation dialog will look more polished. I like that!

Example showing how a PWA installation screen with screenshots looks like.

App screenshots make PWAs feel more "app-like" and give users an idea of included app features.

{
  "screenshots" : [
    {
      "src": "screenshot1.webp",
      "sizes": "1280x720",
      "type": "image/webp"
    },
    {
      "src": "screenshot2.webp",
      "sizes": "1280x720",
      "type": "image/webp"
    }
  ]
}

PWA shortcuts

I don't use app shortcuts on my Android, but they're surely another way to give progressive web apps a native feeling. Add a shortcut configuration to your web app manifest and give your users superpowers!

Examples of PWA app shortcuts that show up on Android and Windows.

{
  "shortcuts" : [
    {
      "name": "Today's agenda",
      "url": "/today",
      "description": "List of events planned for today"
    },
    {
      "name": "New event",
      "url": "/create/event"
    }
  ]
}

I love that every shortcut is a URL definition. That's the beauty of the web in action!

Önder's slide deck includes many more helpful tips. Make sure to check it out. Thanks, Önder!

Was this post helpful?
Yes? Cool! You might want to check out Web Weekly for more WebDev shenanigans. The last edition went out 3 days ago.

Related Topics

Related Articles