Как отобразить перетаскивание изображения в настольном PWA? - PullRequest
Новая
       22

Как отобразить перетаскивание изображения в настольном PWA?

0 голосов
/ 24 октября 2019

Я реализовал перетаскивание в моем прогрессивном веб-приложении, как в этом примере в w3school. В Google Chrome вы можете видеть элемент при перетаскивании, в установленном Google Chrome Web App вы видите только значок мира.

enter image description here (Левая сторона: 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>
    )
}

Исходный код проекта: Исходный код

1 Ответ

1 голос
/ 25 октября 2019

Вам необходимо указать работнику службы поддержки, какие активы следует сделать доступными в автономном режиме. В противном случае эти ресурсы будут недоступны.

С помощью приведенного ниже кода вы можете кэшировать некоторые ресурсы (изображения в вашем случае) во время установки ПО. Поэтому после регистрации ПО на стороне клиента целевые активы будут доступны в кеше и готовы к предоставлению даже без сетевого подключения: 

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, Я написал серию статей о них , начиная с основ и заканчивая более сложными темами.

...