Monday , November 30 2020

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

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


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

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

“params”

(****************************:
{****************************)
******************************"title"
(****************************: **************************
name ", (****************************** () **************************
"text"
******************************
“description”
,
****************************
files "
:
[
{
"name":"photos",
"accept":["image/jpeg",".jpg"]

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

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

]
******************************
****************************}

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

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

registerRoute
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
(
'media')
;

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

**************************** (**********************************************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

orIndexedDB.

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


About admin

Leave a Reply

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