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.
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