#09 - Creating Application Shortcuts
Tags: pwa, pwabuilder, webdev, beginners
Published: 2022-02-22 20:48:03

---
title: #09 - Creating Application Shortcuts
published: true
description: Let's continue our #30DaysOfPWA journey by learning about a new web capability: App Shortcuts! https://aka.ms/learn-pwa/30days-blog
tags: pwa, pwabuilder, webdev, beginners
canonical_url: https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/advanced-capabilities/02
series: Learn Progressive Web Apps with 30DaysOfPWA
cover_image: https://microsoft.github.io/win-student-devs/30DaysOfPWA/advanced-capabilities/_media/day-02.jpg
---


Welcome to Day 9 of #30DaysOfPWA! New to the series? Three things you can do to catch up:

 * Read the kickoff post below for context.
 * Watch the [GitHub Repository](https://github.com/microsoft/win-student-devs) for updates.
 * Bookmark [#30DaysOfPWA Blog](https://aka.ms/learn-pwa/30Days-blog) for resources.

{% link https://dev.to/azure/welcome-to-30daysofpwa-2e54 %}

This is a shortened version of [this canonical post](https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/advanced-capabilities/02) for the #30DaysOfPWA. 

---

## About The Author

Today's post is authored by _Aaron Gustafson_ - a web standards and accessibility advocate at Microsoft, and a Principal Program Manager on the Microsoft Edge team. Follow Aaron at  [@aarongustafson](https://twitter.com/aarongustafson) or here on dev.to.

{% user aarongustafson %}

---

Welcome to week 2 day 2 of the [30 Days of PWA](https://aka.ms/learn-pwa/30Days-blog) series! Today's blog post will walk you through how to make it easy for your users to jump immediately to common task pages within your app using Shortcuts.

You’re likely already familiar with the concept of shortcuts. If you’ve ever opened the context menu on an app icon, you’ve seen something like this:

![The Twitter PWA context menu in Windows 11, providing quick access to posting a new tweet, direct messages, and more.](https://microsoft.github.io/win-student-devs/30DaysOfPWA/advanced-capabilities/_media/day-02-01.jpg)

Here you can see the Twitter PWA providing quick access to compose a new Tweet, search, and access both mentions and direct messages. But how did they do that? It’s actually a pretty straightforward process in the Web App Manifest:

```json
{
  "name": "My App",
  "shortcuts": [
    /* One or more ShortcutItem objects */
  ]
}
```

The `shortcuts` member allows you to define an array of shortcut items. Each shortcut item is an object:

```json
{
  "name": "Today's agenda",
  "url": "/today",
  "description": "List of events planned for today"
}
```

This is a simple example that defines the `name` of the shortcut (the visible text), where it should navigate the PWA to (`url`), and some descriptive text that may be provided to assistive technologies by the host operating system. You can also define a [`short_name`](https://aka.ms/learn-PWA/30Days-2.2/developer.mozilla.org/en-US/docs/Web/Manifest/short_name) if you need it.

To customize things a bit more, you also have the option of defining a set of `icons` for each shortcut item:

```json
{
  "name": "Today's agenda",
  "url": "/today",
  "description": "List of events planned for today",
  "icons": [
    /* One or more ImageResource objects */
  ]
}
```

Defining these is exactly the same as defining an app icon using the `icons` member, which we covered on [week 1 day 3 - Make PWA Installable](../core-concepts/03.md).

## Putting it all together

As a real-world example, here’s how I’ve implemented shortcuts on my own site:

```json
{
  /* The rest of the Web App manifest is not shown here for brevity */
  "shortcuts": [
    {
      "name": "Notebook",
      "url": "/notebook/",
      "icons": [
        {
          "src": "/i/icons/notebook.svg",
          "type": "image/svg+xml",
          "purpose": "any monochrome"
        },
        {
          "src": "/i/icons/notebook.png",
          "type": "image/png",
          "sizes": "120x120",
          "purpose": "any monochrome"
        }
      ]
    },
    {
      "name": "Speaking",
      "url": "/speaking-engagements/",
      "icons": [
        {
          "src": "/i/icons/mic.svg",
          "type": "image/svg+xml",
          "purpose": "any monochrome"
        },
        {
          "src": "/i/icons/mic.png",
          "type": "image/png",
          "sizes": "120x120",
          "purpose": "any monochrome"
        }
      ]
    },
    {
      "name": "Publications",
      "url": "/publications/",
      "icons": [
        {
          "src": "/i/icons/books.svg",
          "type": "image/svg+xml",
          "purpose": "any monochrome"
        },
        {
          "src": "/i/icons/books.png",
          "type": "image/png",
          "sizes": "120x120",
          "purpose": "any monochrome"
        }
      ]
    },
    {
      "name": "Interviews",
      "url": "/interviews/",
      "icons": [
        {
          "src": "/i/icons/chat.svg",
          "type": "image/svg+xml",
          "purpose": "any monochrome"
        },
        {
          "src": "/i/icons/chat.png",
          "type": "image/png",
          "sizes": "120x120",
          "purpose": "any monochrome"
        }
      ]
    }
  ]
}
```

In this code I’ve defined 4 shortcuts: "Notebook," "Speaking," "Publications," and "Interviews." As the `name` values are brief and straightforward, I didn’t add a `short_name` or `description` for any of them. Each has an associated `url` and I’ve defined two icon options for each: one is crisp, vector SVG and the other is a bitmap PNG. I’ve also let the host operating system know they are monochrome (via [`purpose`](https://aka.ms/learn-PWA/30Days-2.2/developer.mozilla.org/en-US/docs/Web/Manifest/icons#values)) in case it wants to toggle the color to match its own light/dark theme.

## A few final notes

As of the time I’m writing this, shortcuts are supported on Android PWAs installed by Chrome and on desktop OSes (macOS, Windows, and some Linux flavors) for PWAs installed through Chromium-based browsers like Chrome and Edge. PWAs distributed through the Play Store and Microsoft Store can also use shortcuts on Android and Windows, respectively.

On the topic of operating systems, it’s worth noting that each OS is different and will have its own constraints on the number of shortcuts it will render. For this reason, you should be selective about how many shortcuts you list and their order. If you include too many, they may not all be shown. Organize your shortcuts in order of priority, from most important to least important. Browsers are instructed to pay attention to this order and will drop shortcuts from the end of the list first, if it comes to that.

Also, since you have full control over the URL for shortcuts, you might consider adding a query parameter that enables you to track usage of the Shortcuts feature. For example:

```json
{
  "name": "Today's agenda",
  "url": "/today?utm_source=shortcut",
  "description": "List of events planned for today",
  "icons": [ /* One or more ImageResource objects */ ]
}

```

And that’s really it. Shortcuts is a relatively simple, but powerful tool when it comes to providing convenience for your users. You should definitely take advantage of it.

Tune in for the next post in the [series](https://aka.ms/learn-pwa/30Days-blog) tomorrow where we will cover how to share data to and from your PWA.

## Resources

You can find out more about Shortcuts here:

* [Microsoft Edge Developer Docs: Define app shortcuts](https://aka.ms/learn-PWA/30Days-2.2/docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/shortcuts)
* [MDN Web Docs: Shortcuts](https://aka.ms/learn-PWA/30Days-2.2/developer.mozilla.org/en-US/docs/Web/Manifest/shortcuts)

---

Want to read more content from Microsoft technologists? Don't forget to follow Azure right here on dev.to:

{% org azure %}

---