Exploring Progressive Web App Features Beyond Basics #

PWAs are evolving, with new APIs expanding their capabilities.

1. App Shortcuts for Quick Access #

PWA shortcuts allow users to launch actions directly from the home screen.

Add the following to manifest.json:

"shortcuts": [
  {
    "name": "New Post",
    "short_name": "Post",
    "description": "Create a new post quickly",
    "url": "/posts/new",
    "icons": [{ "src": "/icons/post.png", "sizes": "192x192", "type": "image/png" }]
  }
]

Users can now long-press the app icon to directly access /posts/new.

2. Web Payments API for Seamless Checkout #

The Web Payments API allows direct credit card or Google Pay/Apple Pay payments without leaving the PWA.

Add this to JavaScript inside a Rails checkout page:

if (window.PaymentRequest) {
  const payment = new PaymentRequest(
    [{ supportedMethods: "basic-card" }],
    { total: { label: "Total", amount: { currency: "USD", value: "20.00" } } }
  );

  payment.show().then(response => response.complete("success"));
}

This enables fast, native-like payments inside the browser.

3. Web Authentication API for Passwordless Logins #

Instead of using passwords, PWAs can use biometric logins (Face ID, fingerprint).

1. Update Devise for WebAuthn #

bundle add webauthn
rails generate webauthn:install

2. Allow Biometric Logins #

Modify sessions_controller.rb:

if webauthn_credential
  sign_in user
else
  render json: { error: "Authentication failed" }
end

Users can now log in with their face or fingerprint instead of passwords.