in ,

Integrate PWAs into native sharing UIs with Workbox, Hacker News

Integrate PWAs into native sharing UIs with Workbox, Hacker News



          How to get your PWA to show up next to native apps in system-level sharing UIs         



TheWeb Share Target APIlets you display yourProgressive Web Appin a user’s native sharesheetafter it’s been installed. While it works great if you have a server available to receive the request, it’s much harder to get working if you don’t.

In this article we’ll useWorkbox, a set of JavaScript libraries for adding offline support to web apps, to create a share target URL that lives entirely inside yourservice worker. This lets static sites and single-page apps serve as share targets without a dedicated server endpoint.

Android phone with the 'Share via' drawer open.Android phone with the 'Share via' drawer open.    System-level share target picker with an installed PWA called     

Share Target Test
as an option.   
On the same page


Receiving shared data with the Web Share Target APIgives you an in-depth introduction. Here’s a quick review.

There are two parts to implementing web share target functionality. First, update yourweb app manifestto indicate that you want your app to be a share target when installed. The following example directs shares to the/ shareurl via a

request. It is encoded as a multipart form, with title being called
, text being called (description
, and JPEG images being calledphotos
… ****************************************
“share_target”(****************************: ****************************{

**************Android phone with the 'Share via' drawer open.“action”************************: “/ share”********************************************************************

(****************************:**************** POST
**************, (********************************"enctype"
“multipart / form-data”,********************************************************


(****************************: **************************
name ", (****************************** () **************************
files "

************** ()

(****************************** () **************************


********************************(************************************************************ ...

While normally handled by a server endpoint, a neat trick you can do for a share target is to register a route directly in your service worker to handle the request. This will let your app be a share target without a backend.

You do this inWorkboxby registering a route that's handled by your service worker. Start by importing

from 'workbox-routing'
. Notice that it's registered for the
/ share
route, the same one listed in the example web app manifest. In response it callsshareTargetHandler ()

import {registerRoute}fromworkbox-routing '

************************** (

**************************** (**********************************************registerRoute

Android phone with the 'Share via' drawer open./ share '

, (****************************** () **************************** shareTargetHandler

**************; (********************

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

(************** () ****************************************** ({****************************** event******************************{
****************  const) ****************************** (formData) ***************************** (=
*************************** (await) ****************************** (event) **************************. ************************** (request) ****************************** (formData) 


;  (****************************** () **************************  (const) **************************** (mediaFiles) ****************************=(formData) ******************************. ********************getAll

************************** (

**************************** (**********************************************for

************************** (const)  mediaFileof  (mediaFiles

)************************ ({) *****************************

******************************; **************************************************************** (**************************************



You can then do whatever you'd like with these files. You can cache them. You can send them somewhere with a fetch request. You can even use the other manifest options, maybe serving a page with some query parameters for the other shared items or storing the data and pointers to the media in the Cache Storage API


You can try it out on the sample appFugu Journaland see its service worker implementation in itssource code.

One common thing you might do is hold shared resources until better network connections are available. Workbox also supports periodic background sync

. Conclusion (#

) ************************

The Share Target API is a simple way to deeply integrate your Progressive Web App into user's devices, putting them on-par with native applications for the critical task of sharing content between apps. But doing so usually requires a server available to receive the request. By leveraging Workbox to create a share target route directly in your service worker, your app is free of this constraint, allowing Share Target to work for apps while offline and without backends.

Photo byon Unsplash


Brave BrowserRead More

What do you think?

Leave a Reply

Your email address will not be published. Required fields are marked *

GIPHY App Key not set. Please check settings

Files · master AirVPN / hummingbird, Hacker News

Files · master AirVPN / hummingbird, Hacker News

Emirates and flydubai resume flights to Baghdad as situation comes back to normal