如何在PWA中显示共享照片?

我已经成功地将PWA添加到设备的共享选项中,问题是我不知道如何在PWA中接收/显示共享照片

manifest.json中的share_target

TensorFlow

我正在使用CodeIgniter,所以我添加了 照片/共享的 作为路线

"share_target": {
      "action": "/photos/shared","method": "POST","enctype": "multipart/form-data","params": {
        "files": [{
            "name": "file","accept": ["*/*"]
        }]
      }
    }

并希望在我的控制器中接收共享照片的发布数据

$route['photos/shared']['post'] = 'webapp/PhotosController/sharedPhoto';

但是,不幸的是,它是空的。

经过一番阅读,我发现了这一点

  

前台页面无法直接处理此数据。自页面   将数据视为请求,页面将其传递给服务人员,   您可以在其中使用获取事件监听器拦截它。

this网站上,所以我已将此代码添加到我的服务工作者中(我关注了this tutorial

public function sharedPhoto () {

            echo "<pre>";
                die(var_dump( $_POST )); // empty!
            echo "</pre>";

    }

此后,我已将事件消息侦听器添加到我的javascript文件中

self.addEventListener('fetch',function(event) {
  if (event.request.clone().method === 'POST') {
       const url = new URL(event.request.clone().url);
       console.log( 'URL' );
       console.log( url );
       if (event.request.clone().url.endsWith('/photos/shared') || url.pathname == '/photos/shared') {
            event.respondWith(Response.redirect('./'));

            event.waitUntil(async function () {
                const data = await event.request.formData();
                console.log( data );
                const client = await self.clients.get(event.resultingClientId);
                console.log( client );
                const file = data.get('file');
                client.postMessage( {file});
            }());
       } else {
       // do other non related stuff
       }

但是,我只是无法在我的应用中显示图片,文件始终为空。

dyr91 回答:如何在PWA中显示共享照片?

好的,所以清单和服务工作者(我已经更新了我的问题)的最新更改实际上是有效的。我唯一要做的就是在消息事件侦听器中更改代码以查看图像。

navigator.serviceWorker.addEventListener('message',event => {

 const file = event.data.file;
 const img  = new Image();
 const url = URL.createObjectURL(file);
 img.src = url;
 $("body").empty();
 $("body").append(img);
 $("body").append(url);
 $("body").append('<h1>test</h1>');

});

现在,我可以在应用程序中访问照片了,终于可以对它进行必要的操作了。

本文链接:https://www.f2er.com/2948535.html

大家都在问