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

Question

我在渐进式网络应用程序中实现了拖放，如下所示 example w3学校的。在 Google Chrome 中，您可以在拖动时看到该元素，而在安装的 Google Chrome Web 应用程序中，您只能看到一个世界的图标。

(左侧:Google Chrome 桌面网络应用程序，右侧: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

Answer 1

您需要指示服务工作人员哪些 Assets 可以在离线模式下使用。否则这些资源将不可用。

使用下面的代码，您可以在安装软件时缓存一些资源(在您的情况下是图像)。因此，一旦在客户端注册了软件，目标资源将在缓存中可用，并且即使没有网络连接也可以提供:

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