Question

我可以将我的Progressive Web App注册为share target for images（supported from Chrome Android 76）：

"share_target": {
    "action": "/share-target",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "files": [
        {
          "name": "myImage",
          "accept": ["image/jpeg", "image/png"]
        }
      ]
    }
  }

然后我可以拦截尝试在服务工作者中与应用共享图像的尝试：

self.addEventListener('fetch', e => {
  if (e.request.method === 'POST' && e.request.url.endsWith('/share-target')) {
    // todo
  }
})

如何在离线PWA中显示共享图像？

Answer 1

这里有几个不同的步骤。

我在https://web-share-offline.glitch.me/整理了一个工作示例，在https://glitch.com/edit/#!/web-share-offline整理了源代码

确保您的网络应用可离线使用

这是先决条件，我通过生成将使用Workbox预缓存我的HTML，JS和CSS的服务工作程序来实现它。

加载首页时运行的JS使用缓存存储API读取已缓存的图像URL的列表，以在每个页面对应的页面上创建<img>元素。

创建将缓存图像的共享目标处理程序

我也为此使用了Workbox，但这涉及更多。重点是：

确保您拦截了POST个针对配置的共享目标URL的请求。
由您决定读取共享图像的正文并将其使用Cache Storage API写入本地缓存中。
将共享图像保存到缓存后，最好用HTTP 303 redirected response响应POST，以便浏览器将显示Web应用程序的实际主页。

这是我用来处理此问题的Workbox配置代码：

const shareTargetHandler = async ({event}) => {
  const formData = await event.request.formData();
  const cache = await caches.open('images');

  await cache.put(
      // TODO: Come up with a more meaningful cache key.
      `/images/${Date.now()}`,
      // TODO: Get more meaningful metadata and use it
      // to construct the response.
      new Response(formData.get('image'))
  );

  // After the POST succeeds, redirect to the main page.
  return Response.redirect('/', 303);
};

module.exports = {
  // ... other Workbox config ...
  runtimeCaching: [{
    // Create a 'fake' route to handle the incoming POST.
    urlPattern: '/share-target',
    method: 'POST',
    handler: shareTargetHandler,
  }, {
    // Create a route to serve the cached images.
    urlPattern: new RegExp('/images/\\d+'),
    handler: 'CacheOnly',
    options: {
      cacheName: 'images',
    },
  }],
};

如何在PWA共享目标中脱机处理图像？

1 个答案:

确保您的网络应用可离线使用

创建将缓存图像的共享目标处理程序