mono/pwa-sharing.md at master

2026-02-08 15:09:32 +01:00

2.2 KiB

Raw Permalink Blame History

Overview

We have implemented a Progressive Web App (PWA) with the Web Share Target API to allow sharing text, images, and videos from mobile apps directly to the Polymech Pics app.

Implementation Details

1. Manifest

The manifest is manually managed in public/manifest.webmanifest. It includes the share_target configuration:

"share_target": {
    "action": "/upload-share-target",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
        "title": "title",
        "text": "text",
        "url": "url",
        "files": [
            {
                "name": "file",
                "accept": ["image/*", "video/*"]
            }
        ]
    }
}

2. Service Worker (`src/sw.ts`)

The Service Worker intercepts POST requests to /upload-share-target:

Catches the request.
Parses FormData (files, title, text).
Stores data in IndexedDB (using idb-keyval, key: share-target).
Redirects the user to /new?shared=true.

3. Frontend (`src/pages/NewPost.tsx`)

On the "New Post" page:

Checks for ?shared=true.
Reads from IndexedDB (share-target).
Pre-loads the images/text into the wizard.
Clears the IndexedDB entry.

4. Build Configuration (`vite.config.ts`)

vite-plugin-pwa is configured with manifest: false to respect the manual file in public/.
Strategy is injectManifest using src/sw.ts.
Updates are handled via workbox-core's skipWaiting() and clientsClaim() for immediate activation.

Installation (Add to Home Screen)

The app meets the criteria for "Add to Home Screen" (A2HS):

Manifest: Correctly linked with name, icons (192px/512px), start_url, and display: standalone.
Service Worker: Registered and functioning offline (precaching cached assets).
HTTPS: Required for PWA installation (ensure your deployment provider supports this).

Testing A2HS

Desktop Chrome: Look for the "Install" icon in the address bar.
Android: Open Chrome -> Menu -> "Add to Home screen".
iOS: Open Safari -> Share button -> "Add to Home Screen" (Note: iOS doesn't prompt automatically).

2.2 KiB Raw Permalink Blame History

PWA Sharing & Mobile Integration Options