Pokonywanie barier za pomocą interfejsu DataTransfer API

Zezwól użytkownikowi na udostępnianie danych poza oknem przeglądarki.

Jorik Tangelder
Thomas Steiner

Być może znasz już DataTransfer API, który jest części Interfejs API typu „przeciągnij i upuść” HTML5 i Zdarzenia dotyczące schowka. Może służą do przenoszenia danych między źródłem a celami odbierającymi.

Obsługa przeglądarek

  • Chrome: 3.
  • Krawędź: 12.
  • Firefox: 3.5
  • Safari: 4.

Źródło

Interakcje metodą „przeciągnij, upuść” oraz „kopiuj i wklej” są często używane w obrębie strony aby przenieść zwykły tekst z punktu A do B. Często jednak zapomina się o możliwości wykorzystania te same interakcje poza oknem przeglądarki.

Zarówno funkcja „przeciągnij i upuść”, jak i funkcje kopiowania i wklejania w przeglądarce mogą się komunikować. z innymi aplikacjami, internetowymi lub innymi, i nie są powiązane z żadnym pochodzeniem. Interfejs API obsługuje wiele mogą działać w różny sposób w zależności od tego, gdzie dane zostaną przeniesione. Twoje aplikacja internetowa może wysyłać i odbierać przesłane dane podczas nasłuchiwania zdarzeń przychodzących.

Ta możliwość może zmienić sposób myślenia o udostępnianiu i interoperacyjności w internecie aplikacji na komputerze. Przenoszenie danych między aplikacjami nie wymaga ściśle sprzężone integracje. Zamiast tego możesz dać użytkownikom pełną kontrolę nad przenoszeniem w dowolne miejsce.

Przykład możliwych interakcji przy użyciu interfejsu DataTransfer API. (Film nie zawiera dźwięku).

Przenoszenie danych

Aby rozpocząć, należy wdrożyć metodę przeciągania i upuszczania lub kopiowania i wklejania. Przykłady poniżej widać interakcje metodą „przeciągnij i upuść”, ale proces kopiowania i wklejania jest podobny. Jeśli nie znasz interfejsu API „Przeciągnij i upuść”, znajdziesz świetny artykuł na ten temat Przeciąganie i upuszczanie w HTML5, gdzie wyjaśniamy tajniki technologii HTML5.

Dostarczając dane z kluczem typu MIME, użytkownicy mogą swobodnie korzystać z zewnętrznych aplikacji. Większość edytorów typu WYSIWYG, edytorów tekstu i przeglądarek reaguje na typów MIME używanych w funkcji przykład poniżej.

document.querySelector('#dragSource')
.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('text/plain', 'Foo bar');
  event.dataTransfer.setData('text/html', '<h1>Foo bar</h1>');
  event.dataTransfer.setData('text/uri-list', 'https://example.com');
});

Zwróć uwagę na właściwość event.dataTransfer. Zwraca ono instancję DataTransfer Jako Ten obiekt jest czasem zwracany przez właściwości o innych nazwach.

Odbieranie przenoszenia danych działa prawie tak samo jak jego przekazanie. Nasłuchuj zdarzeń odbierania (drop lub paste) i odczytaj klawisze. Po przeciągnięciu elementu przeglądarka ma dostęp tylko do do kluczy danych type. Same dane są dostępne dopiero po ich spadku.

document.querySelector('#dropTarget')
.addEventListener('dragover', (event) => {
  console.log(event.dataTransfer.types);
  // Without this, the drop event won't fire.
  event.preventDefault();
});

document.querySelector('#dropTarget')
.addEventListener('drop', (event) => {
  // Log all the transferred data items to the console.
  for (let type of event.dataTransfer.types) {
    console.log({ type, data: event.dataTransfer.getData(type) });
  }
  event.preventDefault();
});

W aplikacjach można powszechnie używać 3 typów MIME:

  • text/html: renderuje ładunek HTML w elementach contentEditable i elementach rozszerzonych tekstowych (WYSIWYG), takich jak Dokumenty Google czy Microsoft Word.
  • text/plain: Ustawia wartość elementów wejściowych, zawartość edytorów kodu i wartość zastępczą od text/html.
  • text/uri-list: powoduje przejście do adresu URL po upuszczeniu adresu na pasku adresu lub na stronie przeglądarki. Adres URL skrót zostanie utworzony przy umieszczaniu w katalogu lub na pulpicie.

Powszechne rozpowszechnienie text/html przez edytorów typu WYSIWYG sprawia, że jest on bardzo przydatny. Tak jak w HTML dokumentów, możesz umieszczać zasoby za pomocą Adresy URL danych lub publiczne dostępne adresy URL. Świetnie sprawdza się to w przypadku eksportowania elementów wizualnych (na przykład z obszaru roboczego) do edytorów, takich jak Dokumenty Google.

const redPixel = 'data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=';
const html = '<img src="' + redPixel + '" width="100" height="100" alt="" />';
event.dataTransfer.setData('text/html', html);

Przenoszenie za pomocą kopiowania i wklejania

Poniżej pokazano, jak używać interfejsu DataTransfer API z kopiowaniem i wklejaniem. Zwróć uwagę, że obiekt DataTransfer jest zwracany przez właściwość clipboardData w przypadku zdarzeń schowka.

// Listen to copy-paste events on the document.
document.addEventListener('copy', (event) => {
  const copySource = document.querySelector('#copySource');
  // Only copy when the `activeElement` (i.e., focused element) is,
  // or is within, the `copySource` element.
  if (copySource.contains(document.activeElement)) {
    event.clipboardData.setData('text/plain', 'Foo bar');
    event.preventDefault();
  }
});

document.addEventListener('paste', (event) => {
  const pasteTarget = document.querySelector('#pasteTarget');
  if (pasteTarget.contains(document.activeElement)) {
    const data = event.clipboardData.getData('text/plain');
    console.log(data);
  }
});

Niestandardowe formaty danych

Nie ograniczasz się do podstawowych typów MIME, ale możesz użyć dowolnego klucza do zidentyfikowania przeniesionych i skalowalnych danych. Może to być przydatne podczas interakcji w różnych przeglądarkach w Twojej aplikacji. Jak pokazano poniżej, może przesyłać bardziej złożone dane za pomocą funkcji JSON.stringify() i JSON.parse().

document.querySelector('#dragSource')
.addEventListener('dragstart', (event) => {
  const data = { foo: 'bar' };
  event.dataTransfer.setData('my-custom-type', JSON.stringify(data));
});

document.querySelector('#dropTarget')
.addEventListener('dragover', (event) => {
  // Only allow dropping when our custom data is available.
  if (event.dataTransfer.types.includes('my-custom-type')) {
    event.preventDefault();
  }
});

document.querySelector('#dropTarget')
.addEventListener('drop', (event) => {
  if (event.dataTransfer.types.includes('my-custom-type')) {
    event.preventDefault();
    const dataString = event.dataTransfer.getData('my-custom-type');
    const data = JSON.parse(dataString);
    console.log(data);
  }
});

Łączenie z internetem

Formaty niestandardowe świetnie nadają się do komunikacji między aplikacjami, nad którymi masz kontrolę, ale także ogranicza liczbę użytkowników podczas przenoszenia danych do aplikacji, które nie korzystają z danego formatu. Jeśli chcesz aby łączyć się z aplikacjami innych firm w internecie, potrzebny jest uniwersalny format danych.

Standard JSON-LD (połączone dane) doskonale się do tego nadaje. Jest jest łatwy w obsłudze i łatwy do odczytu oraz zapisu w języku JavaScript. Schema.org zawiera wiele elementów wstępnie zdefiniowane typy danych, a także niestandardowe definicje schematów.

const data = {
  '@context': 'https://schema.org',
  '@type': 'ImageObject',
  contentLocation: 'Venice, Italy',
  contentUrl: 'venice.jpg',
  datePublished: '2010-08-08',
  description: 'I took this picture during our honey moon.',
  name: 'Canal in Venice',
};
event.dataTransfer.setData('application/ld+json', JSON.stringify(data));

Korzystając z typów Schema.org, możesz zacząć od ogólnego typu Thing, lub użyj czegoś bliższego Twojemu przypadkowi użycia, np. Event, Person, MediaObject, Place, a nawet bardzo szczegółowe typy MedicalEntity w razie potrzeby. Korzystając z TypeScript, możesz użyć parametru definicje interfejsu z definicji typów schema-dts.

Transmitując i odbierając dane JSON-LD, wspierasz silniejszą komunikację i otwartość w internecie. Na mówiących tym samym językiem aplikacji można stworzyć głęboką integrację z zewnętrznymi systemami aplikacji. Nie ma potrzeby skomplikowanych integracji interfejsów API. wszystkie potrzebne informacje ujęte w przesłanych danych.

Weź pod uwagę wszystkie możliwości przenoszenia danych między dowolną aplikacją (internetową) Ograniczenia: udostępnianie wydarzeń z kalendarza w ulubionej aplikacji Do zrobienia, dołączanie plików wirtualnych e-maile, udostępnianie kontaktów. To byłoby świetnie, prawda? Zacznij od Ciebie. 🙌

Potencjalne problemy

Chociaż interfejs DataTransfer API jest dostępny już dziś, należy pamiętać o kilku kwestiach przed jego integracją.

Zgodność z przeglądarką

Wszystkie przeglądarki na komputerze obsługują opisaną powyżej technikę, podczas gdy na urządzeniach mobilnych Nie. Technika została przetestowana na wszystkich najpopularniejszych przeglądarkach (Chrome, Edge, Firefox, Safari) oraz systemów operacyjnych (Android, ChromeOS, iOS, macOS, Ubuntu Linux i Windows), ale niestety Android oraz iOS nie zaliczyły testu. Chociaż przeglądarki wciąż się rozwijają, na razie technika jest ograniczona tylko w przeglądarkach na komputerach.

Widoczność kanału i treści

Przeciąganie i kopiowanie i wklejanie to interakcje na poziomie systemu podczas pracy na komputerze. sięgamy do pierwszych faktur GUI ponad 40 lat temu. Zastanów się, ile razy wykorzystujemy te interakcje do porządkowania plików. Nie jest to jeszcze zbyt powszechne w internecie.

Trzeba będzie poinformować użytkowników o tej nowej interakcji i opracować wzorce UX, i rozpoznawalna zwłaszcza w przypadku osób, które do tej pory korzystały z komputerów wyłącznie na urządzeniach mobilnych.

Ułatwienia dostępu

Przeciąganie nie jest bardzo dostępną metodą, ale interfejs DataTransfer API obsługuje kopiowanie i wklejanie. Pamiętaj, aby słuchać zdarzeń typu kopiuj i wklej. Nie wymaga to wiele dodatkowej pracy, a użytkownicy będziemy wdzięczni za jego dodanie.

Bezpieczeństwo i prywatność

Korzystając z tej metody, musisz pamiętać o pewnych kwestiach związanych z bezpieczeństwem i prywatnością.

  • Dane schowka są dostępne dla innych aplikacji na urządzeniu użytkownika.
  • Aplikacje internetowe, które przeciągasz, mają dostęp do klawiszy typów, a nie danych. Tylko dane staje się dostępna po upuszczeniu lub wklejeniu.
  • Odebrane dane powinny być traktowane tak jak wszystkie inne dane wejściowe użytkownika. jego dezynfekcję i kontrolę przed użyciem.

Pierwsze kroki z biblioteką pomocniczą Transmat

Czy chcesz korzystać z interfejsu DataTransfer API w swojej aplikacji? Przyjrzyj się Biblioteka Transmat w GitHubie. Ta biblioteka open source dostosowuje ustawienia przeglądarki różnic, udostępnia narzędzia JSON-LD, zawiera obserwatora, który odpowiada na zdarzenia transferu wyróżnienia obszarów upuszczania i umożliwia integrowanie operacji przenoszenia danych pomiędzy istniejącymi elementami implementacji.

import { Transmat, TransmatObserver, addListeners } from 'transmat';

// Send data on drag/copy.
addListeners(myElement, 'transmit', (event) => {
  const transmat = new Transmat(event);
  transmat.setData({
    'text/plain': 'Foobar',
    'application/json': { foo: 'bar' },
  });
});

// Receive data on drop/paste.
addListeners(myElement, 'receive', (event) => {
  const transmat = new Transmat(event);
  if (transmat.hasType('application/json') && transmat.accept()) {
    const data = JSON.parse(transmat.getData('application/json'));
  }
});

// Observe transfer events and highlight drop areas.
const obs = new TransmatObserver((entries) => {
  for (const entry of entries) {
    const transmat = new Transmat(entry.event);
    if (transmat.hasMimeType('application/json')) {
      entry.target.classList.toggle('drag-over', entry.isTarget);
      entry.target.classList.toggle('drag-active', entry.isActive);
    }
  }
});
obs.observe(myElement);

Podziękowania

Baner powitalny autorstwa Luba Ertel w Odchylenie.