CODEWITHSUNDEEP
progressive-web-appsmediasharing
Nouroz Khan
Nouroz Khan

Reputation: 1

How can I handle Media sharing in my PWA app when sharing media from another app into my app?

I am working on a Progressive web app that works on both web version and mobile version. I am sharing media files with others apps but when I share media from another app (Or any other social like Facebook, Messenger, LinkedIn) into my app after selecting my app it just opens up and turns into a black screen. I need help with how I can forward the screen into my share list screen and the data which is shared by another app how can I access them. Any Help?

Upvotes: 0

Views: 457

Answers (1)

Adriana Jara
Adriana Jara

Reputation: 74

Double check your method is "POST" and that enctype is present. enctype must be "multipart/form-data", and a files entry must be added in your manifest where you specify your share_target. files is an array that specifies the types of files your app accepts.

more info from: https://web.dev/web-share-target/

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);
        })());
      }
    });

Upvotes: 0

Related Questions