Funkcja ClipboardItem.supports() jest teraz dostępna w wersji Baseline Newly

Thomas Steiner

Data publikacji: 30 kwietnia 2025 r.

Gratulacje: ta funkcja internetowa jest teraz dostępna we wszystkich 3 głównych silnikach przeglądarek i od 30 marca 2025 r. stanie się nowością w wersji podstawowej.

Interfejs Async Clipboard API znacznie ułatwia korzystanie ze schowka. Zamiast poprzednich metod zarządzania schowka możesz teraz wywoływać navigator.clipboard.writeText() w przypadku zwykłego tekstu lub navigator.clipboard.write() w przypadku „prawie wszystkiego” innego, np. obrazów, tekstu lub kodu HTML.

Do tej pory brakowało jednak informacji o tym, jak zdefiniować „prawie”. Nie wiesz na przykład, czy interfejs API obsługuje format SVG, dopóki nie spróbujesz. W przypadku braku obsługi możesz złapać wyjątek. Nie był to zbyt ergonomiczny sposób określania obsługi, dlatego określono stałą funkcję ClipboardItem.supports().

Funkcja osiągnęła stan „Nowo dostępne” w ramach punktu odniesienia, co oznacza, że korzystanie z Schowka jest jeszcze lepsze. Aby sprawdzić, czy przeglądarka obsługuje dany format, przekaż funkcji typ MIME interesującego Cię formatu.

const format = 'image/svg+xml';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does support image/svg+xml."

Wcześniej napisałem „prawie” wszystko, a teraz zaczyna się prawdziwa zabawa. Niestandardowe formaty internetowe umożliwiają pracę z formatami, których przeglądarka nie obsługuje natywnie. Na przykład domyślnie przeglądarka nie obsługuje obrazów AVIF.

const format = 'image/avif';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does not support image/avif."

Dzięki niestandardowym formatom internetowym możesz jednak pracować z obrazami AVIF i swobodnie je kopiować i wklejać, o ile odbiorca również wie, jak obsługiwać niestandardowe formaty internetowe.

const format = 'web image/avif';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does support web image/avif."

Dzięki funkcji ClipboardItem.supports() możesz teraz prawidłowo wykrywać obsługę schowka w przypadku niestandardowego formatu internetowego i upewnić się, że działa ona prawidłowo.

if (ClipboardItem.supports('web image/avif')) {
  // Fetch remote AVIF image and obtain its blob representation.
  const blob = await fetch('image.avif').then((response) => response.blob());

  try {
    // Write the image data to the clipboard, prepending the blob's actual
    // type (`"image/avif"` with the string `"web "`, so it becomes
    // `"web image/avif"`.
    const clipboardItem = new ClipboardItem({
      'web image/avif': blob,
    });
    await navigator.clipboard.write([clipboardItem]);
  } catch (err) {
    console.error(err.name, err.message);
  }
}

Dzięki funkcji ClipboardItem.supports(), która jest teraz dostępna w wersji podstawowej, deweloperzy internetowi mogą niezawodnie wykrywać obsługę schowka w przypadku różnych typów MIME, w tym formatów internetowych niestandardowych. Dzięki temu korzystanie z Schowka jest bardziej niezawodne i przewidywalne, co poprawia komfort korzystania z przeglądarek.