我已经成功地将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
}
但是,我只是无法在我的应用中显示图片,文件始终为空。