1. Wprowadzenie i konfiguracja
Funkcje internetowe
Chcemy zlikwidować różnice w możliwościach między internetem a aplikacjami natywnymi i ułatwić deweloperom tworzenie świetnych treści w otwartej sieci. Uważamy, że każdy deweloper powinien mieć dostęp do funkcji, których potrzebuje, aby tworzyć świetne strony internetowe. Zależy nam na tym, aby internet oferował większe możliwości.
Niektóre funkcje, takie jak dostęp do systemu plików i wykrywanie braku aktywności, są dostępne w aplikacjach natywnych, ale nie w internecie. Brak tych funkcji oznacza, że niektórych typów aplikacji nie można udostępniać w internecie lub są one mniej przydatne.
Nowe funkcje będziemy projektować i rozwijać w otwarty i przejrzysty sposób, korzystając z dotychczasowych procesów standardów otwartej platformy internetowej. Będziemy też zbierać opinie od programistów i innych dostawców przeglądarek, aby w trakcie prac nad projektem zapewnić interoperacyjność.
Co utworzysz
W tym laboratorium kodowania zapoznasz się z wieloma interfejsami API, które są zupełnie nowe lub dostępne tylko za flagą. Dlatego w tych ćwiczeniach z programowania skupimy się na samych interfejsach API i na przypadkach użycia, które umożliwiają, a nie na tworzeniu konkretnego produktu końcowego.
Czego się nauczysz
Z tych ćwiczeń z programowania dowiesz się, jak działają niektóre najnowocześniejsze interfejsy API. Pamiętaj, że te mechanizmy nie są jeszcze ostateczne. Będziemy wdzięczni za Twoją opinię na temat procesu tworzenia aplikacji.
Czego potrzebujesz
Interfejsy API, które są omawiane w tym laboratorium, są bardzo nowoczesne, więc wymagania dotyczące każdego z nich są różne. Uważnie przeczytaj informacje o zgodności na początku każdej sekcji.
Jak korzystać z tego laboratorium
Nie musisz wykonywać zadań w tej kolejności. Każda sekcja reprezentuje niezależny interfejs API, więc możesz stosować cherry picking w odniesieniu do tego, co Cię najbardziej interesuje.
2. Badging API
Interfejs Badging API ma na celu zwrócenie uwagi użytkowników na działania wykonywane w tle. Aby uprościć demonstrację w tym laboratorium, użyjemy interfejsu API, aby zwrócić uwagę użytkowników na coś, co dzieje się na pierwszym planie. Następnie możesz przenieść to na rzeczy, które dzieją się w tle.
Instalowanie Airhornera
Aby ten interfejs API działał, musisz mieć zainstalowaną na ekranie głównym aplikację PWA. Pierwszym krokiem jest więc zainstalowanie aplikacji PWA, np. słynnej na całym świecie airhorner.com. Kliknij przycisk Zainstaluj w prawym górnym rogu lub użyj menu z 3 kropkami, aby zainstalować aplikację ręcznie.
Pojawi się prośba o potwierdzenie. Kliknij Zainstaluj.
W docku systemu operacyjnego pojawi się nowa ikona. Kliknij ją, aby uruchomić PWA. Będzie mieć własne okno aplikacji i będzie działać w trybie samodzielnym.
|
|
Ustawianie plakietki
Po zainstalowaniu PWA potrzebujesz danych liczbowych (identyfikatory mogą zawierać tylko liczby), które będą wyświetlane na identyfikatorze. W przypadku aplikacji The Air Horner łatwo jest policzyć, sigh, ile razy została użyta. Po zainstalowaniu aplikacji Airhorner spróbuj użyć klaksonu i sprawdź plakietkę. Zlicza każde użycie klaksonu.
Jak to działa? Kod wygląda tak:
let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
navigator.setExperimentalAppBadge(++hornCounter);
});
Kilka razy użyj klaksonu i sprawdź ikonę PWA: będzie się ona aktualizować za każdym razem, gdy usłyszysz dźwięk klaksonu. To takie proste.
Usuwanie plakietki
Licznik rośnie do 99, a potem zaczyna od początku. Możesz też zresetować go ręcznie. Otwórz kartę Konsola w Narzędziach deweloperskich, wklej poniższy wiersz i naciśnij Enter.
navigator.setExperimentalAppBadge(0);
Możesz też usunąć plakietkę, jawnie ją czyszcząc, jak pokazano w tym fragmencie kodu. Ikona PWA powinna teraz wyglądać tak jak na początku – być wyraźna i nie zawierać plakietki.
navigator.clearExperimentalAppBadge();
Prześlij opinię
Co sądzisz o tym interfejsie API? Pomóż nam, odpowiadając na pytania w tej ankiecie:
Czy ten interfejs API był intuicyjny w użyciu?
Czy udało Ci się uruchomić przykład?
Chcesz coś jeszcze dodać? Czy brakowało jakichś funkcji? Przekaż nam swoją opinię w tej ankiecie. Dziękujemy!
3. Native File System API
Interfejs Native File System API umożliwia deweloperom tworzenie zaawansowanych aplikacji internetowych, które wchodzą w interakcję z plikami na urządzeniu lokalnym użytkownika. Gdy użytkownik przyzna aplikacji internetowej dostęp, ten interfejs API umożliwi jej odczytywanie lub zapisywanie zmian bezpośrednio w plikach i folderach na urządzeniu użytkownika.
Odczytywanie pliku
W przypadku interfejsu Native File System API „Hello, world” oznacza odczytanie pliku lokalnego i pobranie jego zawartości. Utwórz zwykły plik .txt i wpisz w nim tekst. Następnie otwórz dowolną zabezpieczoną witrynę (czyli witrynę wyświetlaną przy użyciu protokołu HTTPS), np. example.com, i otwórz konsolę Narzędzi deweloperskich. Wklej w konsoli ten fragment kodu. Interfejs Native File System API wymaga gestu użytkownika, dlatego do dokumentu dołączamy moduł obsługi dwukrotnego kliknięcia. Uchwyt pliku będzie nam później potrzebny, więc ustawiamy go jako zmienną globalną.
document.ondblclick = async () => {
window.handle = await window.chooseFileSystemEntries();
const file = await handle.getFile();
document.body.textContent = await file.text();
};
Gdy klikniesz dwukrotnie dowolne miejsce na stronie example.com, pojawi się okno wyboru plików.
Wybierz utworzony wcześniej plik .txt. Zawartość pliku zastąpi rzeczywistą zawartość body domeny example.com.
Zapisywanie pliku
Teraz chcemy wprowadzić kilka zmian. Dlatego sprawimy, że plik body będzie edytowalny, wklejając do niego poniższy fragment kodu. Teraz możesz edytować tekst tak, jakby przeglądarka była edytorem tekstu.
document.body.contentEditable = true;
Teraz chcemy zapisać te zmiany w oryginalnym pliku. Dlatego potrzebujemy dostępu do zapisu w uchwycie pliku, który możemy uzyskać, wklejając w konsoli poniższy fragment kodu. Ponownie potrzebujemy gestu użytkownika, więc tym razem czekamy na kliknięcie w głównym dokumencie.
document.onclick = async () => {
const writer = await handle.createWriter();
await writer.truncate(0);
await writer.write(0, document.body.textContent);
await writer.close();
};
Gdy teraz klikniesz (nie dwukrotnie) dokument, pojawi się prośba o przyznanie uprawnień. Gdy przyznasz uprawnienia, zawartość pliku będzie taka, jak po edycji na urządzeniu body. Sprawdź zmiany, otwierając plik w innym edytorze (lub rozpocznij proces od nowa, ponownie klikając dwukrotnie dokument i otwierając plik).
Gratulacje! Właśnie udało Ci się utworzyć najmniejszy edytor tekstu na świecie [citation needed].
Prześlij opinię
Co sądzisz o tym interfejsie API? Pomóż nam, odpowiadając na pytania w tej ankiecie:
Czy ten interfejs API był intuicyjny w użyciu?
Czy udało Ci się uruchomić przykład?
Chcesz coś jeszcze dodać? Czy brakowało jakichś funkcji? Przekaż nam swoją opinię w tej ankiecie. Dziękujemy!
4. Shape Detection API
Interfejs Shape Detection API zapewnia dostęp do akcelerowanych detektorów kształtów (np. twarzy ludzkich) i działa w przypadku zdjęć statycznych lub strumieni obrazów na żywo. Systemy operacyjne mają wydajne i wysoce zoptymalizowane detektory funkcji, takie jak FaceDetector na Androidzie. Interfejs Shape Detection API udostępnia te natywne implementacje za pomocą zestawu interfejsów JavaScript.
Obecnie obsługiwane funkcje to wykrywanie twarzy za pomocą interfejsu FaceDetector, wykrywanie kodów kreskowych za pomocą interfejsu BarcodeDetector oraz wykrywanie tekstu (optyczne rozpoznawanie znaków) za pomocą interfejsu TextDetector.
Wykrywanie twarzy
Ciekawą funkcją interfejsu Shape Detection API jest wykrywanie twarzy. Aby to sprawdzić, potrzebujemy strony z twarzami. Dobrym początkiem będzie ta strona z twarzą autora. Będzie wyglądać podobnie jak na zrzucie ekranu poniżej. W obsługiwanej przeglądarce zostaną rozpoznane ramka ograniczająca twarz i punkty charakterystyczne twarzy.
Aby zobaczyć, jak niewiele kodu było potrzebne do osiągnięcia tego efektu, zmiksuj lub edytuj projekt Glitch, a zwłaszcza plik script.js.
Jeśli chcesz w pełni dynamicznie pracować nie tylko z twarzą autora, otwórz tę stronę wyników wyszukiwania Google pełną twarzy w prywatnej karcie lub w trybie gościa. Na tej stronie otwórz Narzędzia deweloperskie w Chrome. Aby to zrobić, kliknij prawym przyciskiem myszy w dowolnym miejscu, a następnie kliknij Zbadaj. Następnie na karcie Konsola wklej poniższy fragment kodu. Kod wyróżni wykryte twarze półprzezroczystym czerwonym polem.
document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
try {
const faces = await new FaceDetector().detect(img);
faces.forEach(face => {
const div = document.createElement('div');
const box = face.boundingBox;
const computedStyle = getComputedStyle(img);
const [top, right, bottom, left] = [
computedStyle.marginTop,
computedStyle.marginRight,
computedStyle.marginBottom,
computedStyle.marginLeft
].map(m => parseInt(m, 10));
const scaleX = img.width / img.naturalWidth;
const scaleY = img.height / img.naturalHeight;
div.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
div.style.position = 'absolute';
div.style.top = `${scaleY * box.top + top}px`;
div.style.left = `${scaleX * box.left + left}px`;
div.style.width = `${scaleX * box.width}px`;
div.style.height = `${scaleY * box.height}px`;
img.before(div);
});
} catch(e) {
console.error(e);
}
});
Zauważysz, że pojawiają się komunikaty DOMException, a nie wszystkie obrazy są przetwarzane. Dzieje się tak, ponieważ obrazy widoczne na ekranie są wstawiane jako identyfikatory URI danych i dlatego są dostępne, a obrazy niewidoczne na ekranie pochodzą z innej domeny, która nie jest skonfigurowana do obsługi CORS. Na potrzeby prezentacji nie musimy się tym przejmować.
Wykrywanie punktów charakterystycznych twarzy
Oprócz samych twarzy system macOS obsługuje też wykrywanie punktów charakterystycznych twarzy. Aby przetestować wykrywanie punktów charakterystycznych twarzy, wklej do konsoli ten fragment kodu: Przypominamy, że lista punktów orientacyjnych nie jest idealna ze względu na błąd crbug.com/914348, ale możesz zobaczyć, w jakim kierunku zmierza ta funkcja i jakie możliwości może Ci dać.
document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
try {
const faces = await new FaceDetector().detect(img);
faces.forEach(face => {
const div = document.createElement('div');
const box = face.boundingBox;
const computedStyle = getComputedStyle(img);
const [top, right, bottom, left] = [
computedStyle.marginTop,
computedStyle.marginRight,
computedStyle.marginBottom,
computedStyle.marginLeft
].map(m => parseInt(m, 10));
const scaleX = img.width / img.naturalWidth;
const scaleY = img.height / img.naturalHeight;
div.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
div.style.position = 'absolute';
div.style.top = `${scaleY * box.top + top}px`;
div.style.left = `${scaleX * box.left + left}px`;
div.style.width = `${scaleX * box.width}px`;
div.style.height = `${scaleY * box.height}px`;
img.before(div);
const landmarkSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
landmarkSVG.style.position = 'absolute';
landmarkSVG.classList.add('landmarks');
landmarkSVG.setAttribute('viewBox', `0 0 ${img.width} ${img.height}`);
landmarkSVG.style.width = `${img.width}px`;
landmarkSVG.style.height = `${img.height}px`;
face.landmarks.map((landmark) => {
landmarkSVG.innerHTML += `<polygon class="landmark-${landmark.type}" points="${
landmark.locations.map((point) => {
return `${scaleX * point.x},${scaleY * point.y} `;
}).join(' ')
}" /></svg>`;
});
div.before(landmarkSVG);
});
} catch(e) {
console.error(e);
}
});
Wykrywanie kodów kreskowych
Drugą funkcją interfejsu Shape Detection API jest wykrywanie kodów kreskowych. Podobnie jak wcześniej potrzebujemy strony z kodami kreskowymi, np. tej. Gdy otworzysz go w przeglądarce, zobaczysz zdekodowane kody QR. Zremiksuj lub edytuj projekt Glitch, a zwłaszcza plik script.js, aby zobaczyć, jak to zrobić.
Jeśli chcesz czegoś bardziej dynamicznego, możesz ponownie skorzystać z wyszukiwarki obrazów Google. Tym razem w przeglądarce otwórz tę stronę wyników wyszukiwania Google na karcie prywatnej lub w trybie gościa. Teraz wklej poniższy fragment kodu na karcie Konsola w Narzędziach deweloperskich w Chrome. Po chwili rozpoznane kody kreskowe zostaną oznaczone surową wartością i typem kodu kreskowego.
document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
try {
const barcodes = await new BarcodeDetector().detect(img);
barcodes.forEach(barcode => {
const div = document.createElement('div');
const box = barcode.boundingBox;
const computedStyle = getComputedStyle(img);
const [top, right, bottom, left] = [
computedStyle.marginTop,
computedStyle.marginRight,
computedStyle.marginBottom,
computedStyle.marginLeft
].map(m => parseInt(m, 10));
const scaleX = img.width / img.naturalWidth;
const scaleY = img.height / img.naturalHeight;
div.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
div.style.position = 'absolute';
div.style.top = `${scaleY * box.top + top}px`;
div.style.left = `${scaleX * box.left - left}px`;
div.style.width = `${scaleX * box.width}px`;
div.style.height = `${scaleY * box.height}px`;
div.style.color = 'black';
div.style.fontSize = '14px';
div.textContent = `${barcode.rawValue}`;
img.before(div);
});
} catch(e) {
console.error(e);
}
});
Wykrywanie tekstu
Ostatnią funkcją interfejsu Shape Detection API jest wykrywanie tekstu. Znasz już procedurę: potrzebujemy strony z obrazami zawierającymi tekst, np. tej z wynikami skanowania z Książek Google. W obsługiwanych przeglądarkach zobaczysz rozpoznany tekst i ramkę ograniczającą wokół fragmentów tekstu. Zremiksuj lub edytuj projekt Glitch, a zwłaszcza plik script.js, aby zobaczyć, jak to zrobić.
Aby przetestować to dynamicznie, otwórz tę stronę wyników wyszukiwania w karcie prywatnej lub w trybie gościa. Teraz wklej poniższy fragment kodu na karcie Konsola w Narzędziach deweloperskich w Chrome. Po chwili część tekstu zostanie rozpoznana.
document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
try {
const texts = await new TextDetector().detect(img);
texts.forEach(text => {
const div = document.createElement('div');
const box = text.boundingBox;
const computedStyle = getComputedStyle(img);
const [top, right, bottom, left] = [
computedStyle.marginTop,
computedStyle.marginRight,
computedStyle.marginBottom,
computedStyle.marginLeft
].map(m => parseInt(m, 10));
const scaleX = img.width / img.naturalWidth;
const scaleY = img.height / img.naturalHeight;
div.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
div.style.position = 'absolute';
div.style.top = `${scaleY * box.top + top}px`;
div.style.left = `${scaleX * box.left - left}px`;
div.style.width = `${scaleX * box.width}px`;
div.style.height = `${scaleY * box.height}px`;
div.style.color = 'black';
div.style.fontSize = '14px';
div.innerHTML = text.rawValue;
img.before(div);
});
} catch(e) {
console.error(e);
}
});
Prześlij opinię
Co sądzisz o tym interfejsie API? Pomóż nam, odpowiadając na pytania w tej ankiecie:
Czy ten interfejs API był intuicyjny w użyciu?
Czy udało Ci się uruchomić przykład?
Chcesz coś jeszcze dodać? Czy brakowało jakichś funkcji? Przekaż nam swoją opinię w tej ankiecie. Dziękujemy!
5. Web Share Target API
Web Share Target API umożliwia zainstalowanym aplikacjom internetowym rejestrowanie się w systemie operacyjnym jako miejsce docelowe udostępniania, aby otrzymywać udostępnione treści z Web Share API lub zdarzeń systemowych, takich jak przycisk udostępniania na poziomie systemu operacyjnego.
Instalowanie PWA, do której chcesz udostępnić
Na początek potrzebujesz aplikacji PWA, którą możesz udostępnić. Tym razem Airhorner (na szczęście) nie będzie odpowiednim narzędziem, ale aplikacja w wersji demonstracyjnej Web Share Target Ci pomoże. Zainstaluj aplikację na ekranie głównym urządzenia.
Udostępnianie czegoś w aplikacji PWA
Następnie musisz mieć coś do udostępnienia, np. zdjęcie ze Zdjęć Google. Użyj przycisku Udostępnij i wybierz PWA Notatnik jako miejsce docelowe udostępniania.
Gdy klikniesz ikonę aplikacji, przejdziesz bezpośrednio do PWA Notatnika, a zdjęcie będzie już tam.
Jak to działa? Aby się tego dowiedzieć, zapoznaj się z plikiem manifestu aplikacji internetowej Scrapbook PWA. Konfiguracja umożliwiająca działanie interfejsu Web Share Target API znajduje się we właściwości "share_target" pliku manifestu, który w polu "action" wskazuje adres URL uzupełniany o parametry wymienione w "params".
Strona udostępniająca wypełnia ten szablon URL odpowiednimi danymi (za pomocą działania udostępniania lub programowo przez dewelopera przy użyciu interfejsu Web Share API), aby strona odbierająca mogła następnie wyodrębnić parametry i wykonać z nimi jakieś działanie, np. wyświetlić je.
{
"action": "/_share-target",
"enctype": "multipart/form-data",
"method": "POST",
"params": {
"files": [{
"name": "media",
"accept": ["audio/*", "image/*", "video/*"]
}]
}
}
Prześlij opinię
Co sądzisz o tym interfejsie API? Pomóż nam, odpowiadając na pytania w tej ankiecie:
Czy ten interfejs API był intuicyjny w użyciu?
Czy udało Ci się uruchomić przykład?
Chcesz coś jeszcze dodać? Czy brakowało jakichś funkcji? Przekaż nam swoją opinię w tej ankiecie. Dziękujemy!
6. Wake Lock API
Aby uniknąć rozładowania baterii, większość urządzeń szybko przechodzi w stan uśpienia, gdy nie są używane. W większości przypadków jest to w porządku, ale niektóre aplikacje muszą utrzymywać ekran lub urządzenie w stanie aktywności, aby dokończyć pracę. Interfejs Wake Lock API umożliwia zapobieganie przyciemnianiu i blokowaniu ekranu urządzenia oraz przechodzeniu urządzenia w tryb uśpienia. Ta funkcja umożliwia korzystanie z nowych rozwiązań, które do tej pory wymagały aplikacji natywnej.
Konfigurowanie wygaszacza ekranu
Aby przetestować interfejs Wake Lock API, musisz najpierw upewnić się, że urządzenie przejdzie w stan uśpienia. Dlatego w panelu ustawień systemu operacyjnego włącz wybrany wygaszacz ekranu i upewnij się, że uruchamia się po 1 minucie. Sprawdź, czy działa, zostawiając urządzenie w spokoju na dokładnie ten czas (wiem, to trudne). Poniższe zrzuty ekranu przedstawiają macOS, ale możesz oczywiście wypróbować tę funkcję na urządzeniu mobilnym z Androidem lub na dowolnej obsługiwanej platformie na komputery.
Ustawianie blokady uśpienia ekranu
Teraz, gdy wiesz już, że wygaszacz ekranu działa, użyjesz blokady uśpienia typu "screen", aby uniemożliwić mu działanie. Otwórz aplikację w wersji demonstracyjnej Wake Lock i kliknij Aktywuj .
screen Zaznacz pole wyboru Wake Lock (Blokada uśpienia).
Od tego momentu blokada uśpienia jest aktywna. Jeśli poczekasz minutę, nie dotykając urządzenia, zobaczysz, że wygaszacz ekranu się nie uruchomił.
Jak to działa? Aby się tego dowiedzieć, otwórz projekt Glitch z aplikacją w wersji demonstracyjnej Wake Lock i sprawdź plik script.js. Najważniejsze informacje o kodzie znajdziesz w poniższym fragmencie. Otwórz nową kartę (lub użyj dowolnej otwartej karty) i wklej poniższy kod w konsoli Narzędzi deweloperskich w Chrome. Po kliknięciu okna powinien pojawić się blokada uśpienia, która będzie aktywna przez dokładnie 10 sekund (patrz dzienniki konsoli), a wygaszacz ekranu nie powinien się włączyć.
if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {
let wakeLock = null;
const requestWakeLock = async () => {
try {
wakeLock = await navigator.wakeLock.request('screen');
wakeLock.addEventListener('release', () => {
console.log('Wake Lock was released');
});
console.log('Wake Lock is active');
} catch (e) {
console.error(`${e.name}, ${e.message}`);
}
};
requestWakeLock();
window.setTimeout(() => {
wakeLock.release();
}, 10 * 1000);
}
Prześlij opinię
Co sądzisz o tym interfejsie API? Pomóż nam, odpowiadając na pytania w tej ankiecie:
Czy ten interfejs API był intuicyjny w użyciu?
Czy udało Ci się uruchomić przykład?
Chcesz coś jeszcze dodać? Czy brakowało jakichś funkcji? Przekaż nam swoją opinię w tej ankiecie. Dziękujemy!
7. Contact Picker API
Interfejsem API, który nas bardzo interesuje, jest selektor kontaktów. Umożliwia aplikacji internetowej dostęp do kontaktów z natywnego menedżera kontaktów na urządzeniu, dzięki czemu aplikacja internetowa ma dostęp do imion i nazwisk, adresów e-mail i numerów telefonów Twoich kontaktów. Możesz określić, czy chcesz uzyskać informacje o jednym czy wielu kontaktach, a także czy chcesz otrzymać wszystkie pola, czy tylko podzbiór nazw, adresów e-mail i numerów telefonów.
Kwestie dotyczące prywatności
Gdy otworzy się selektor, możesz wybrać kontakty, które chcesz udostępnić. Zauważysz, że nie ma opcji „Zaznacz wszystko”. Jest to celowe działanie, ponieważ chcemy, aby udostępnianie było świadomą decyzją. Podobnie dostęp nie jest ciągły, ale jest przyznawany jednorazowo.
Dostęp do kontaktów
Dostęp do kontaktów jest prosty. Zanim otworzysz selektor, możesz określić, które pola chcesz wybrać (opcje to name, email i telephone) oraz czy chcesz uzyskać dostęp do wielu kontaktów, czy tylko do jednego. Ten interfejs API możesz przetestować na urządzeniu z Androidem, otwierając aplikację demonstracyjną. Odpowiednia sekcja kodu źródłowego to w zasadzie ten fragment:
getContactsButton.addEventListener('click', async () => {
const contacts = await navigator.contacts.select(
['name', 'email'],
{multiple: true});
if (!contacts.length) {
// No contacts were selected, or picker couldn't be opened.
return;
}
console.log(contacts);
});
8. Async Clipboard API
Kopiowanie i wklejanie tekstu
Do tej pory nie było możliwości programowego kopiowania i wklejania obrazów do schowka systemowego. Niedawno dodaliśmy obsługę obrazów do interfejsu Async Clipboard API.
dzięki czemu możesz teraz kopiować i wklejać obrazy. Nowością jest możliwość zapisywania obrazów w schowku. Asynchroniczny interfejs Clipboard API od jakiegoś czasu obsługuje kopiowanie i wklejanie tekstu. Tekst możesz skopiować do schowka, wywołując funkcję navigator.clipboard.writeText(), a później wkleić go, wywołując funkcję navigator.clipboard.readText().
Kopiowanie i wklejanie obrazów
Teraz możesz też zapisywać obrazy w schowku. Aby to zadziałało, potrzebujesz danych obrazu w formie obiektu blob, który następnie przekazujesz do konstruktora elementu schowka. Na koniec możesz skopiować element ze schowka, wywołując funkcję navigator.clipboard.write().
// Copy: Writing image to the clipboard
try {
const imgURL = 'https://developers.google.com/web/updates/images/generic/file.png';
const data = await fetch(imgURL);
const blob = await data.blob();
await navigator.clipboard.write([
new ClipboardItem(Object.defineProperty({}, blob.type, {
value: blob,
enumerable: true
}))
]);
console.log('Image copied.');
} catch(e) {
console.error(e, e.message);
}
Wklejenie obrazu z powrotem ze schowka wygląda na skomplikowane, ale w rzeczywistości polega tylko na pobraniu obiektu blob z elementu schowka. Może być ich wiele, więc musisz je przeglądać, aż znajdziesz ten, który Cię interesuje. Ze względów bezpieczeństwa obecnie obsługiwane są tylko obrazy PNG, ale w przyszłości możemy dodać obsługę kolejnych formatów.
async function getClipboardContents() {
try {
const clipboardItems = await navigator.clipboard.read();
for (const clipboardItem of clipboardItems) {
try {
for (const type of clipboardItem.types) {
const blob = await clipboardItem.getType(type);
console.log(URL.createObjectURL(blob));
}
} catch (e) {
console.error(e, e.message);
}
}
} catch (e) {
console.error(e, e.message);
}
}
Ten interfejs API możesz zobaczyć w działaniu w aplikacji w wersji demonstracyjnej. Odpowiednie fragmenty jej kodu źródłowego są umieszczone powyżej. Kopiowanie obrazów do schowka może odbywać się bez uprawnień, ale musisz przyznać dostęp do wklejania ze schowka.
Po przyznaniu dostępu możesz odczytać obraz ze schowka i wkleić go w aplikacji:
9. Udało Ci się!
Gratulacje! Udało Ci się dotrzeć do końca tego laboratorium. Przypominamy, że większość interfejsów API jest w trakcie opracowywania i może ulec zmianie. Dlatego zespół bardzo docenia Twoje opinie, ponieważ tylko interakcje z osobami takimi jak Ty pomogą nam udoskonalić te interfejsy API.
Zachęcamy też do częstego odwiedzania naszej strony docelowej dotyczącej możliwości. Będziemy ją aktualizować. Zawiera ona linki do wszystkich szczegółowych artykułów dotyczących interfejsów API, nad którymi pracujemy. Nie przestawaj!
Tom i cały zespół ds. możliwości 🐡