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

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

（左侧：Google Chrome桌面Web应用程序，右侧：Google Chrome浏览器）

有人知道我如何在桌面web应用程序中获得与浏览器中相同的行为吗

以下是我迄今为止的代码：

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>
    )
}

从“React”导入React
导出函数选择器（{id，onDragStart}）{
返回(
{
onDragStart（）
event.dataTransfer.setData（'chart_type'，event.target.id）
}}
style={{cursor:'指针'}}
>
折线图
)
}

---

项目源代码：

您需要指导服务人员在脱机模式下提供哪些资产。否则，这些资源将不可用

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

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

---

如果您对PWAs感兴趣，请从基础开始，然后介绍更复杂的主题。

您是在连接internet的桌面应用程序上测试还是脱机测试？我曾经在PWA中遇到过类似的问题，当时he服务人员并没有正确缓存所有资产。你能发布你的代码部分吗？@Francesco谢谢你的回复。我在问题中添加了我的代码。我试着用setDragImage处理目标和一个简单的图像等，但它只是不能在桌面pwa中显示。到目前为止，我只是离线测试。我还没有在我的服务人员中实现任何缓存逻辑。@Francesco我想知道是否有任何简单的

拖拽我的例子在chrome桌面pwa中工作。我真的搞不懂，因为我以为他们用的是同一个引擎等等，就像在浏览器里一样。缓存是唯一可以不同的东西，但没有要缓存的图像。