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

Question

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

（左侧：Google Chrome桌面网络应用，右侧：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>
    )
}

项目的源代码：Source Code

Answer 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，从基础知识开始，然后涵盖更复杂的主题。