What is "Installed Apps Badging Shortcuts" about?

Get Installed Related Apps detects your native app. App Badging puts a count on the icon. App Shortcuts add a right-click menu. All three work on installed PWAs only.

What topics does "Installed Apps Badging Shortcuts" cover?

This article covers: getInstalledRelatedApps, App Badging API, navigator.setAppBadge, App Shortcuts PWA, PWA badge icon, Smart App Banner iOS.

Installed Apps, App Badging, and App Shortcuts in PWAs

Install a native app and the OS treats it like a first-class citizen. A badge on the icon when you have unread messages. A right-click menu with shortcuts to the most common actions. Awareness of whether a companion app is already installed.

A PWA gets all of that.

Your company probably has both a website and a native app. When a user visits your website on mobile, you might want to promote your app -- unless they already have it. Prompting users to install something they already have installed is friction.

JavaScript

const relatedApps = await navigator.getInstalledRelatedApps()

const isInstalled = relatedApps.some(app =>
  app.id === 'com.mycompany.myapp'
)

if (isInstalled) {
  showOpenInAppButton()
} else {
  showInstallAppBanner()
}

For this to work, you declare the relationship in your web app manifest:

JSON

{
  "related_applications": [
    {
      "platform": "play",
      "url": "https://play.google.com/store/apps/details?id=com.mycompany.myapp",
      "id": "com.mycompany.myapp"
    }
  ]
}

And the native Android app verifies the relationship by including a .well-known/assetlinks.json file on your domain. The browser does the handshake -- it checks the .well-known file to confirm the website and the app belong to the same owner.

This also works for detecting an installed PWA (not just a native app). If your own PWA is already installed, the API returns it.

Support: Android with Chrome. Not available on iOS.

iOS doesn't have getInstalledRelatedApps. It has a different mechanism: a meta tag that shows a banner in Safari.

HTML

<meta name="apple-itunes-app" content="app-id=1234567890">

When Safari sees this tag, it shows a banner at the top of the page prompting the user to open or install your app. This appears whether or not the app is installed -- Safari handles both cases.

For deep linking (opening a specific screen in the native app from a web URL), use the app-argument attribute:

HTML

<meta name="apple-itunes-app" content="app-id=1234567890, app-argument=myapp://recipe/bolognese">

When the user taps "Open" on the banner, the native app opens at myapp://recipe/bolognese -- the URL scheme handler in the native app picks up the path.

App Badging

A number on the app icon. The 15 in a red circle you see on the Messages app when you have unread texts. Your PWA can set that.

JavaScript

// Set a badge count
await navigator.setAppBadge(5)   // show "5" on the icon

// Clear the badge
await navigator.clearAppBadge()

// Setting to 0 also clears the badge
await navigator.setAppBadge(0)

No permission dialog. No user approval. The API simply sets a number.

Platform behavior varies:

Windows and macOS (Chrome/Edge): The number is shown on the taskbar/dock icon, just like native apps.
Android: Shows a notification dot -- not a number. Some launchers (Samsung, for example) do show numbers, but it is not guaranteed.
iOS/iPadOS (from 16.4): Numbers shown on the home screen icon for installed PWAs. One restriction: on iOS, you can only update the badge after the PWA receives a push notification. You cannot update it silently via a background sync.

The badge persists across app restarts. It does not reset automatically when the user opens the app -- you need to call clearAppBadge() when the user has consumed the content.

Support: Installed PWA on all major desktop platforms and Android. iOS from 16.4 with the push notification restriction.

JavaScript

if ('setAppBadge' in navigator) {
  // App Badging API is available
}

ExpandGet Installed Related Apps, App Badging, and App Shortcuts: three home-screen-level OS integrations

App Shortcuts

Right-click on a native app icon on desktop and you get a context menu with quick actions. Long-press on an Android app icon and the same thing appears. A PWA can have that menu.

JSON

{
  "shortcuts": [
    {
      "name": "New Recipe",
      "short_name": "New",
      "description": "Start a blank recipe",
      "url": "/recipe/new",
      "icons": [{ "src": "/icons/new-recipe.png", "sizes": "96x96" }]
    },
    {
      "name": "My Favorites",
      "short_name": "Favorites",
      "url": "/favorites",
      "icons": [{ "src": "/icons/favorites.png", "sizes": "96x96" }]
    }
  ]
}

Each shortcut navigates the PWA to a different URL when activated. The url must be within the app scope. You can define up to (typically) five shortcuts, though the OS may show fewer depending on available space.

Shortcuts are static. You cannot update them dynamically from JavaScript. To change shortcuts, you update the manifest and the user's OS picks up the change on the next app install or update. Do not design a feature that requires dynamic shortcut content.

Support: Desktop (Chrome/Edge on Windows/macOS) and Android. Not iOS.

That Is the Last of the 36

That completes the OS integration chapter -- and the full series on web capabilities.

The APIs covered here are the ones most frontend developers have never reached for. Sensors, Bluetooth, NFC, speech, camera, gamepads, serial ports, and now OS integration. There is a broader landscape of APIs beyond these 36 -- networking, storage, authentication, graphics -- covered in The APIs Not Covered Here.

The Essentials

Get Installed Related Apps: navigator.getInstalledRelatedApps() checks if your related native app is installed, via a .well-known/assetlinks.json handshake. Android + Chrome only. iOS uses <meta name="apple-itunes-app"> instead.
app-argument on the iOS Smart App Banner enables deep linking -- opens the native app directly at a specific screen.
App Badging: navigator.setAppBadge(n) / navigator.clearAppBadge(). No permission required. Android shows a dot (not a number). iOS requires a push notification before you can update the badge.
App Shortcuts: "shortcuts" array in manifest -- static quick actions that appear on right-click/long-press. Desktop Chrome/Edge and Android only. Up to ~5 items.
All three APIs are installed PWA only -- no effect in a browser tab.

Installed Apps Badging Shortcuts

iOS: Smart App Banner

App Badging

App Shortcuts

That Is the Last of the 36

The Essentials

Further Reading and Watching