How to share to/through your PWA?

Sharing on the mobile or desktop device should be as simple as clicking the Share button, choosing an app, and choosing who to share with. As an example, you may want to share an interesting article, either by emailing it or tweeting it to friends.

Before, only platform-specific apps were capable of registering with the operating system to receive shares from other installed apps. In addition, with the Web Share Target API application, installed web apps can register with the underlying system as a share target to receive information about sharing.

Register your app as a share target

It is necessary to register your app as an share target, it must meet Chrome`s installability criteria. After the user can share to your app, they must add it to home screen. A combination of this, it prevents sites from randomly add themselves to the user`s share intent selection and ensures that sharing is something that users want to do with your application.

Update your web app manifest

When registering your app as a share target, add a share_target entry to its web manifest. Anyway, this is what the operating system will tell you to include your application as an option in the intent choicer. In addition, what you add to the manifest controls the data that your app will accept. For the share_target entry, there are three common scenarios.

• Accepting basic information
• Accepting application changes
• Accepting files

Accepting basic information

If your target app is merely accepting basic information such as data, links, and text, add the following to the manifest.json file:

"share_target": {

  "action": "/share-target/",
  "method": "GET",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url"
  }
}

If your application has the share URL scheme, you can replace the data with existing search parameter. If it is not available for use, you can change the value of the params to your existing one. As an example, if your share URL scheme uses body instead of text, you can replace "text": the text" with “body” and replace "text": "text".

The value of the method defaults to "GET" if not provided. According to the enctype field, not shown in this example, indicates the type of encoding for the data. The enctype field, not shown in this example, indicates the type of encoding for the. If you set the "GET" method, enctype defaults to "application/x-www-form-urlencoded" and is ignored if it`s set to anything else.

Accepting application changes

If the shared data changes the target app in some way—for example, saving a bookmark in the target application—set the method value to "POST" and include the enctype field. The example below creates a bookmark in the target app, so it uses "POST" for the method and "multipart/form-data" for the enctype:

{
  "name": "Bookmark",
  "share_target": {
    "action": "/bookmark",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "url": "link"
    }
  }
}

Accepting files

As with application changes, accepting files requires that method be "POST" and that the enctype be present. Additionally, enctype must be "multipart/form-data", and a files entry must be added.

You must also add a files array defining the types of files your app accepts. The array elements are entries with two members: a name field and an accept field. The accept field takes a MIME type, a file extension, or an array containing both. It`s best to provide an array that includes both a MIME type and a file extension since operating systems differ in which they prefer.

{
  "name": "Aggregator",
  "share_target": {
    "action": "/cgi-bin/aggregate",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "name",
      "text": "description",
      "url": "link",
      "files": [
        {
          "name": "records",
          "accept": ["text/csv", ".csv"]
        },
        {
          "name": "graphs",
          "accept": "image/svg+xml"
        }
      ]
    }
  }
}

Handle the incoming content

How you deal with the incoming shared data is up to you and depends on your app. For example:

• An email client could draft a new email using title as the subject of an email, with text and url concatenated together as the body.
• A social networking app could draft a new post ignoring title, using text as the body of the message, and adding url as a link. If text is missing, the app might use url in the body as well. If url is missing, the app might scan text looking for a URL and add that as a link.
• A photo sharing app could create a new slideshow using title as the slideshow title, text as a description, and files as the slideshow images.
• A text messaging app could draft a new message using text and url concatenated together and dropping title.

Processing POST shares

If your method is "POST", as it would be if your target app accepts a saved bookmark or shared files, then the body of the incoming POST request contains the data passed by the sharing application, encoded using the enctype value provided in the manifest.

The foreground page cannot process this data directly. Since the page sees the data as a request, the page passes it to the service worker, where you can intercept it with a fetch event listener. From here, you can pass the data back to the foreground page using postMessage() or pass it on to the server:

self.addEventListener(`fetch`, event => {
  const url = new URL(event.request.url);
  // If this is an incoming POST request for the
  // registered "action" URL, respond to it.
  if (event.request.method === `POST` &&
      url.pathname === `/bookmark`) {
    event.respondWith((async () => {
      const formData = await event.request.formData();
      const link = formData.get(`link`) || ``;
      const responseUrl = await saveBookmark(link);
      return Response.redirect(responseUrl, 303);
    })());
  }

ritnikotkata.com