Skip to main content

How to make your PWA display alongside native apps in system-level sharing UIs

The Web Share Destination API allows you to display your Progressive web app on a user's native share bed sheet after it has been installed. While it works great if you have a server available to receive the request, it is much more difficult to get down to business if you don't.

In this article we will use
Workbox, a set of JavaScript libraries to add offline support to web applications, to create a shared destination URL that is completely within your service worker. This allows static sites and single page applications to serve as destinations for sharing without a dedicated server endpoint.

wst-send-4566275

System level shared destination selector with an installed PWA named
Share Target Test as an option.

In the same page

If you are unfamiliar with how Web Share Target works, Receive Shared Data with the Web Share Target API gives you a detailed introduction. Here's a quick review.

There are two parts to implementing the web share target functionality. First, update your web application manifest to indicate that you want your application to be a shared destination when it is installed. The following example directs actions to /Compartir URL via POST request. It is coded as a multi-part form, and the title is called
yam, text called description, and JPEG images are called photos.

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

Service worker shares goals with Workbox

Although normally handled by a server endpoint, a good trick you can do for a shared target is to register a route directly to your service worker to handle the request. This will allow your application to be a target for sharing without a backend.

You do this in Workbox logging a route driven by your service worker. Start by importing
registerRoute from 'workbox-routing'. Please note that you are registered to
/Compartir route, the same one that appears in the manifest for the sample web application. In response, call shareTargetHandler ().

import { registerRoute } from 'workbox-routing' ;

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

the shareTargetHandler () The function is asynchronous and takes the event, waits for the form data, and then retrieves the media files from that.

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

for ( const mediaFile of mediaFiles ) {
} ) ;


} ;

You can then do whatever you want with these files. You can cache them. You can send them somewhere with a recovery request. You can even use the other manifest options, perhaps serving a page with some query parameters for the other shared items or storing the data and pointers to the media in the Caching API
or IndexedDB.

You can try it in the sample app Fugu's Diary and view your service worker implementation in your source code.

One common thing you can do is keep shared resources until better network connections are available. Workbox also supports periodic synchronization in the background.

conclusion

The Share Target API is an easy way to deeply integrate your progressive web application on user devices, putting them on par with native applications for the critical task of sharing content between applications. But doing so usually requires a server available to receive the request. By leveraging Workbox to create a shared destination path directly in your service worker, your application is free from this restriction, allowing Share Target to work for offline and backend-less applications.

Photo by Elaine casap in Unsplash

R Marketing Digital