Skip to content

Add home-screen shortcut for Send Payment via PWA #807

Description

@Mystery-CLI

Background

Progressive Web Apps (PWAs) support app shortcuts — configurable entries in the device home-screen long-press or right-click context menu that allow users to jump directly to a specific page or flow within the application. FuTuRe is already configured as a PWA, but the manifest.json does not define any shortcuts. Adding a shortcut directly to the Send Payment flow is the highest-value entry point to expose, as sending payments is the most frequent high-intent action users take.

Problem

Without home-screen shortcuts, users who install FuTuRe to their device must:

  1. Open the application from the home screen icon.
  2. Wait for the dashboard to load.
  3. Navigate to the send payment flow manually.

This three-step process adds unnecessary friction for the most common power-user action. Competing wallets offer home-screen shortcuts and users notice the difference. Additionally:

  • No differentiation from browser bookmark. Without shortcuts, the installed PWA behaves identically to opening the site via a browser shortcut — it provides none of the contextual richness that app shortcuts enable.
  • Missed engagement opportunity. Home-screen shortcut labels appear in Android and iOS share sheets and context menus, providing additional surface area for brand and feature visibility.
  • Developer discovery gap. Contributors unfamiliar with the PWA shortcut API are unlikely to add shortcuts in future without an established pattern.

Proposed Solution

Register one or more shortcuts in manifest.json using the Web App Manifest shortcuts array. The initial shortcut should deep-link to the send payment flow. Each shortcut entry requires:

  • name: The label displayed on the home screen (e.g. "Send Payment").
  • short_name: An abbreviated label for space-constrained contexts (e.g. "Send").
  • description: A description for accessibility contexts.
  • url: The URL path that opens the send payment flow directly (e.g. /send).
  • icons: A set of shortcut icons in required sizes (96x96 and 192x192 at minimum).

The send payment deep-link URL must be handled by the React Router configuration so that navigating directly to it opens the send payment page rather than showing a 404 or redirecting to the dashboard.

Implementation Steps

  1. Determine the correct URL for the send payment page and verify it resolves correctly when opened directly (without first visiting the dashboard).
  2. Design or export shortcut icons (96x96 and 192x192) for the send payment action.
  3. Add the shortcuts array to public/manifest.json with the send payment entry.
  4. Verify that the shortcut appears in Chrome for Android's app context menu after reinstalling the PWA.
  5. Test deep-link routing — navigating to /send directly should open the correct component and handle unauthenticated users by redirecting to the login page.
  6. Consider adding a second shortcut for "Transaction History" as a lower-priority addition.

Acceptance Criteria

  • manifest.json contains a shortcuts array with at least one entry pointing to the send payment flow.
  • The shortcut icon renders correctly at 96x96 and 192x192.
  • Long-pressing the PWA icon on Android shows the shortcut in the context menu.
  • Tapping the shortcut navigates directly to the send payment flow.
  • Unauthenticated deep-link access redirects to login and then back to send after authentication.

Notes

iOS Safari supports the shortcuts manifest field as of iOS 16.4. Test on both Android (Chrome) and iOS (Safari) to confirm behaviour. The shortcut URL should be a relative path from the manifest's start_url to work correctly with sub-path deployments.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions