Integrate PWAs into built-in sharing UIs with Workbox

Registering a PWA as a system-level share target with Workbox

The Web Share Target API lets an installed Progressive Web App appear as a destination in a device's native share sheet. The usual implementation relies on a server endpoint that receives the shared payload, which rules out static sites and single-page apps that have no backend. Using Workbox, you can register a route inside your service worker that handles the share request directly, so the PWA can act as a share target without any server-side code.

How Web Share Target routing works

Two pieces are needed to support Web Share Target. First, the web app manifest declares the app as a share target. In the example below, shares are sent to /share via a POST request encoded as multipart form data. The manifest maps the incoming title field to name, the text field to description, and any JPEG images to photos:

…
"share_target": {
  "action": "/share",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "title": "name",
    "text": "description",
    "files": [
      {
        "name": "photos",
        "accept": ["image/jpeg", ".jpg"]
      }
    ]
  }
}
…

Handling share requests entirely in the service worker

Instead of pointing that manifest entry at a server, you can register a Workbox route in the service worker for the same /share URL. The handler function processes the request and passes it to a custom shareTargetHandler():

import { registerRoute } from 'workbox-routing';

registerRoute(
  '/share',
  shareTargetHandler,
  'POST'
);

That handler is asynchronous. It takes the request event, awaits the parsed form data, and then extracts the media files from the photos field:

async function shareTargetHandler ({event}) {
  const formData = await event.request.formData();
  const mediaFiles = formData.getAll('media');

  for (const mediaFile of mediaFiles) {
    // Do something with mediaFile
    // Maybe cache it or post it back to a server
  });

  // Do something with the rest of formData as you need
  // Maybe save it to IndexedDB
};

Once the files are extracted, you can decide what happens next. Options include writing them to the Cache Storage API or IndexedDB, uploading them elsewhere with a fetch() call, or serving a page that uses query parameters for the other shared fields. A working example is available in the Fugu Journal sample app, with its service worker logic in the open-source repository.

A common pattern is to buffer shared resources until connectivity improves, which Workbook extends with support for periodic background sync.

Why service worker-based share targets matter

Web Share Target gives PWAs the same level of integration with the operating system's sharing flow that native apps enjoy. The catch is that most implementations expect a reachable server to receive the post. Registering the share handler as a Workbox route removes that dependency, letting a PWA accept shares while it is offline or when it has no backend at all.