Local share target handler with workbox ony works if PWA recently active

问题

I use workbox in my serviceworker to handle requests to a share-target url (defined in manifest.json) locally (offline). On Android, once added to home screen (A2HS) from Chrome, my app is available as share-target, for image files, to other apps.

The implementation generally works perfect. my share-target handler stores the received files in browser-cache and redirects to a follow-up /share route (which then handles pictures from cache) locally.

But from time to time, the serviceworker seems to either not pick up on the /share-target request or somehow causes it to lookup the route on the Net. In this situation, I can clearly see a POST request coming in (with path /share-target) on the backend, which of course should never reach the backend.

The problem only seems to arise when the App wasn't open for a while and suddenly is receiving files from other apps.

Any idea why this could happen?

Please see below async share target handler, which should always redirect, even in case of an error. This handler, though seems to be only called when the app was running recently.

The code is based on this SO Answer)

manifest.json

{
   "share_target":{
      "action":"/share-target",
      "enctype":"multipart/form-data",
      "method":"POST",
      "params":{
         "files":[
            {
               "accept":[
                  "image/bmp",
                  "image/gif",
                  "image/jpeg",
                  "image/png",
                  "image/webp",
                  ".png",
                  ".jpg",
                  ".jpeg",
                  ".gif",
                  ".bmp"
               ],
               "name":"pictures"
            }
         ],
         "text":"Upload Pictures and let your friends join your best moments",
         "title":"Share with others!"
      }
   }
      
}

serviceworker.js

  registerRoute(
    new RegExp('.*/share-target'),
    shareTargetHandler,
    'POST'
  );

  async function shareTargetHandler({event}) {
    try {
      const formData = await event.request.formData();
      const files = formData.getAll('pictures');
      const cache = await caches.open('share');
    
      await Promise.allSettled(
        files.map((f, i) => {
          return cache.put(
            `/file_${i}`,
            new Response(f, {
                headers: {
                  'content-length': f.size,
                  'content-type': f.type,
                }
              }
            )
          );
        })
      );
    
      console.info(`stored ${files.length} files for share-target in cache`)
      return Response.redirect('/share', 303);
    } catch(err) {
      console.error("error in share-target (serviceworker)", err)
      return Response.redirect('/', 303);
    }

  };

来源：https://stackoverflow.com/questions/64679799/local-share-target-handler-with-workbox-ony-works-if-pwa-recently-active

标签

android

progressive-web-apps

service-worker

workbox