如何在桌面 PWA 中显示拖放图像？答案

【问题标题】：How to display drag and drop image in a desktop PWA?如何在桌面 PWA 中显示拖放图像？
【发布时间】：2019-10-26 04:34:43
【问题描述】：

我在我的渐进式网络应用程序中实现了拖放，就像 w3school 的 example 一样。在 Google Chrome 中，您可以在拖动时看到元素，在已安装的 Google Chrome Web App 中，您只能看到一个世界图标。

（左侧：Google Chrome Desktop Web App，右侧：Google Chrome 浏览器）

有谁知道我怎样才能在我的桌面网络应用程序中获得与浏览器中相同的行为？

到目前为止，这是我的代码：

import React from 'react'

export function Selector({ id, onDragStart }) {

return (
        <div
            id={id}
            className="selector px-3 py-2"
            draggable={true}
            onDragStart={event => {
                onDragStart()
                event.dataTransfer.setData('chart_type', event.target.id)
            }}
            style={{ cursor: 'pointer' }}
        >
        <Icon className="chart" /> Line Chart <Icon className="menu" />
        </div>
    )
}

项目源码：Source Code

【问题讨论】：

您是在桌面应用程序上通过互联网连接还是离线进行测试？我曾经在我的 PWA 中遇到过类似的问题，当时并非所有资产都被他的 Service Worker 正确缓存。您可以发布您所涉及的代码部分吗？
@Francesco 感谢您的回复。我将我的代码添加到问题中。我尝试将 setDragImage 与目标以及一个简单的图像等一起使用，但它只是不会在桌面 pwa 中显示它。到目前为止，我只离线测试了它。我还没有在我的服务工作者中实现任何缓存逻辑。
@Francesco 我想知道是否有在 chrome 桌面 pwa 中工作的 <div draggable="true" > Drag me!</div> 的简单示例。我无法真正弄清楚，因为我认为他们使用相同的引擎等，就像在浏览器中一样。缓存是唯一不同的地方，但没有要缓存的图像。

标签： javascript drag-and-drop progressive-web-apps

【解决方案1】：

您需要告知服务人员哪些资产可以在离线模式下可用。否则这些资源将不可用。

使用下面的代码，您可以在 SW 安装时缓存一些资源（在您的情况下为图像）。因此，一旦在客户端注册了 SW，目标资产将在缓存中可用，即使没有网络连接也可以提供：

var CACHE_NAME = 'my-cache';
var assetsToCache = [
  '/assets/myImage.png'
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Access the cache...');
        return cache.addAll(assetsToCache);
      })
  );
});

如果您对 PWA 感兴趣，I wrote a series of articles about them，从基础开始，然后涵盖更复杂的主题。

【讨论】：