Add support for App Shortcuts when building Trusted Web Activity apps via CloudAPK

[andreban]

Web App Manifests support a shortcut field that can be used to generate shortcuts on the app launcher. Those shortcuts can be implemented in applications using Trusted Web Activity via Android App shortcuts.

Bubblewrap has support for shortcuts, but when PWABuilder invokes the APK generation on CloudAPK, the shortcuts item is sent as empty.

The Manifest file for https://sadchonks.com/ contains app shortcuts. When generating the app via PWA Builder, the shortcuts field is an empty string:

{
    "packageId": "com.sad_chonks.twa",
    "host": "sadchonks.com",
    "name": "Sad Chonks",
    "themeColor": "#3f51b5",
    "navigationColor": "#3f51b5",
    "backgroundColor": "#3f51b5",
    "startUrl": "/saved",
    "iconUrl": "https://sadchonks.com/kitteh-512.png",
    "maskableIconUrl": null,
    "appVersion": "1.0.0",
    "useBrowserOnChromeOS": true,
    "splashScreenFadeOutDuration": 300,
    "enableNotifications": false,
    "shortcuts": [],
    "signingInfo": {
        "fullName": "John Doe",
        "organization": "Contoso",
        "organizationalUnit": "Engineering Department",
        "countryCode": "US"
    }
}

The shortcuts section generated by Bubblewrap looks like the following:

  "shortcuts": [
    {
      "name": "New Chonks",
      "shortName": "New",
      "url": "https://sadchonks.com/?shortcut",
      "chosenIconUrl": "https://sadchonks.com/favicon.png"
    },
    {
      "name": "Saved Chonks",
      "shortName": "Saved",
      "url": "https://sadchonks.com/saved?shortcut",
      "chosenIconUrl": "https://sadchonks.com/favicon.png"
    }
  ],

[ghost]

Thanks for submitting a new feature request! I've automatically added a vote 👍 reaction to help get things started. Other community members can vote to help us prioritize this feature in the future.

[JudahGabriel]

We'd be glad to support this. Especially since Microsoft was the driver in getting shortcuts into the app manifest standard. 😊

I understand Chromium Canary supports shortcuts on desktop now, too, so it seems this feature is picking up steam.

[andreban]

Here's how the implementation on Bubblewrap looks like to generate the markup it consumes: https://github.com/GoogleChromeLabs/bubblewrap/blob/master/packages/core/src/lib/TwaManifest.ts#L207-L234

Happy to extract that to a separate method if you'd like to re-use.

[beaufortfrancois]

For info, I'd love to mention PWABuilder in https://web.dev/app-shortcuts/#trusted-web-activity-support

[JudahGabriel]

@beaufortfrancois By all means, please do... once we get app shortcut support in. I'll see if I can make this happen today.

[beaufortfrancois]

@JudahGabriel Let me know when it's done and I'll update the article. Yeah!

[JudahGabriel]

I've submitted a PR for this: https://github.com/pwa-builder/PWABuilder/pull/775

[beaufortfrancois]

I've noticed app shortcuts are displayed as "Object" in https://www.pwabuilder.com/generate.

You can try it by entering https://app-shortcuts.glitch.me/ in https://www.pwabuilder.com/

[beaufortfrancois]

I'm not sure if it's deployed yet as I'm getting a 500 HTTP Server Error when trying to generate a TWA for this website. WAI?

Updated: It is not returning a 500 HTTP Server Error today, but still no app shortcuts in the TWA APK file.

[JudahGabriel]

Hang tight - we're ironing out some hanging issues. We'll update here when it's ready.

[JudahGabriel]

OK folks, thanks for the wait. We've got all the pieces in place for this, and it's deployed to preview.pwabuilder.com. We'll publish this update to production as part of a larger rollout in mid June.

[beaufortfrancois]

@JudahGabriel What is the current status?

[JudahGabriel]

We just deployed support for shortcuts this morning. 😎

To see it in action:

1. Go to pwabuilder.com
2. Analyze a PWA with shortcuts (e.g. sadchonks.com)
3. Build My PWA
4. Download for Android package

The resulting package will have shortcuts enabled on Android:

[beaufortfrancois]

Thank you @JudahGabriel I'm updating web.dev article at https://github.com/GoogleChrome/web.dev/pull/3384

[JudahGabriel]

Thank you!