Web Share Target API: Register Apps as Receivers

The Web Share Target API allows Progressive Web Apps (PWAs) to register themselves with the host operating system as share targets, enabling them to receive text, links, and media files directly from other native applications or websites. This article explains how the Web Share Target API works, how to configure the Web App Manifest to declare your application as a share receiver, and how to process incoming shared data using standard JavaScript and Service Workers.

What is the Web Share Target API?

The Web Share Target API provides the receiving half of the system-level sharing mechanism on modern operating systems (such as Android, Windows, and ChromeOS). While the standard Web Share API allows a web app to send data to the OS share sheet, the Web Share Target API enables an installed PWA to appear inside the system share sheet alongside native apps, accepting incoming content like URLs, text, and files.

Step 1: Registering via the Web App Manifest

To register your application as a share receiver, you must declare the share_target property in your Web App Manifest (manifest.json). This tells the operating system what types of content your app can handle and where to send that data.

Receiving Links and Text (GET Method)

For basic text, titles, and URLs, you configure a standard GET request. When another application shares data to your PWA, the browser opens the specified action URL with the shared payload passed as URL query parameters.

{
  "name": "My Notes App",
  "short_name": "Notes",
  "start_url": "/",
  "display": "standalone",
  "share_target": {
    "action": "/new-note",
    "method": "GET",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url"
    }
  }
}

Receiving Files and Media (POST Method)

To receive files (such as images, videos, or PDFs), the manifest must use the POST method with an enctype of multipart/form-data and specify an array of accepted file types.

{
  "name": "My Media Editor",
  "short_name": "Editor",
  "start_url": "/",
  "display": "standalone",
  "share_target": {
    "action": "/upload-target",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "title",
      "text": "text",
      "files": [
        {
          "name": "media",
          "accept": ["image/*", ".pdf"]
        }
      ]
    }
  }
}

Step 2: Processing Shared Data in JavaScript

Once the manifest is configured, your web application needs to extract and handle the incoming data based on the HTTP method defined.

Handling GET Requests in the Client

For GET requests, parse the query parameters directly from the window location inside your target page:

window.addEventListener('DOMContentLoaded', () => {
  const urlParams = new URLSearchParams(window.location.search);
  const sharedTitle = urlParams.get('title');
  const sharedText = urlParams.get('text');
  const sharedUrl = urlParams.get('url');

  if (sharedText || sharedUrl) {
    document.getElementById('input-field').value = sharedText || sharedUrl;
  }
});

Handling POST and File Requests in the Service Worker

Because the browser submits a POST request when files are shared, you must intercept the request inside your Service Worker, extract the FormData, and redirect or pass the data to an open app window.

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);

  if (event.request.method === 'POST' && url.pathname === '/upload-target') {
    event.respondWith(
      (async () => {
        const formData = await event.request.formData();
        const sharedFile = formData.get('media');
        const sharedText = formData.get('text');

        // Store the file in Cache Storage or IndexedDB for the client page to read
        const cache = await caches.open('shared-media');
        await cache.put('/shared-file', new Response(sharedFile));

        // Redirect the user to the interactive page
        return Response.redirect('/editor', 303);
      })()
    );
  }
});

Requirements for Activation

For the Web Share Target API to work, the web application must meet the following criteria: - HTTPS: Served over a secure connection. - PWA Installation: The app must be installed on the user’s device (added to the home screen or system application list). - Service Worker: A functional Service Worker must be registered.