如果PWA最近处于活动状态,则具有工作区的本地共享目标处理程序有效

问题描述

我在服务工作人员中使用工作箱来本地(离线)处理对共享目标网址(在manifest.json中定义)的请求。 在Android上,一旦从Chrome添加到主屏幕(A2HS),我的应用就可以作为共享目标,用于图像文件和其他应用。

该实现通常可以完美完成。我的共享目标处理程序将接收到的文件存储在浏览器缓存中,并重定向到本地的后续/share路由(然后处理来自缓存的图片)。

但有时,服务工作人员似乎没有接听/share-target请求,或者以某种方式导致其在网上查找路由。在这种情况下,我可以清楚地看到后端有一个POST请求(路径为/share-target),这当然永远不会到达后端。

该问题似乎仅在该应用一段时间未打开并突然从其他应用接收文件时出现。

知道为什么会发生这种情况吗?

请参见下面的异步共享目标处理程序,即使发生错误,该处理程序也应始终重定向。尽管似乎仅在应用程序最近运行时才调用此处理程序。

代码基于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);
    }

  };

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)