微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决如果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 举报,一经查实,本站将立刻删除。