App Shortcuts and Maskable Icons: Play It Like Twitter

Follow the Twitter example to add app shortcuts and maskable icons to your progressive web apps

Photo by Ravi Sharma on Unsplash

We recently added app shortcuts and maskable icons to DeckDeckGo. While I was reading tutorials to implement these features, I came across some questions regarding design, such as:

• What’s the size of the safe area?
• Should the shortcut icon colors be contrasting?
• Are shortcut icons maskable icons or regular ones?
• Can both maskable and regular icons find a place together?

While I would probably have been able to solve these questions by myself, by reading the related blog posts and documentation more carefully, I had the idea instead to do what also works well in such a situation: be a copycat.

Twitter, which I am using on a daily basis, is a great example of progressive web apps. Moreover, I’m guessing that they have some budget to invest in UX and design development. Therefore, why not use their best practices to unleash our features instead of reinventing the wheel?

Thank you, Twitter!

Sneak Peek