如何在 PWA 中显示共享照片？答案

【问题标题】：How to display shared photo in PWA?如何在 PWA 中显示共享照片？
【发布时间】：2019-12-10 14:18:21
【问题描述】：

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

manifest.json 中的share_target

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

我正在使用 CodeIgniter，所以我添加了 photos/shared 作为路线

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

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

public function sharedPhoto () {

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

    }

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

经过一番阅读，我发现了这个：

前台页面无法直接处理此数据。自页面将数据视为请求，页面将其传递给服务工作者，您可以在其中使用 fetch 事件侦听器拦截它。

在this 网站上，所以我已将此代码添加到我的服务人员（我关注了this tutorial）

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
       }

之后，我在我的 javascript 文件中添加了用于发布消息的事件监听器

    navigator.serviceWorker.addEventListener('message', event => {
    // this is triggered but file is always empty
    const file = event.data.file;
    const img  = new Image();
    const url = URL.createObjectURL(file);
    img.src = url;
    document.body.append(img);
  });

但是，我无法让图像显示在我的应用程序中，文件总是空的。

【问题讨论】：

标签： javascript codeigniter manifest service-worker progressive-web-apps

【解决方案1】：

好的，清单和服务工作者的最新更改（我已经更新了我的问题）确实有效。我唯一要做的就是更改消息事件侦听器中的代码，以便能够看到图像。

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>');

});

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

【讨论】：