1. Wprowadzenie i konfiguracja
Funkcje internetowe
Chcemy usunąć różnicę między ich możliwościami a reklamami natywnymi oraz ułatwić deweloperom tworzenie świetnych treści w otwartej sieci. Jesteśmy zdania, że każdy programista powinien mieć dostęp do funkcji niezbędnych do zapewnienia komfortu korzystania z internetu. Dlatego zależy nam na tym, aby internet był jeszcze lepszym miejscem.
Pewne funkcje, takie jak dostęp do systemu plików i wykrywanie bezczynności, są jednak dostępne w środowisku natywnym, ale nie w przeglądarce. Z powodu tych brakujących funkcji niektóre typy aplikacji nie mogą być dostarczane przez internet lub są mniej przydatne.
Będziemy projektować i rozwijać te nowe funkcje w otwarty i przejrzysty sposób, korzystając z istniejących procesów standardowych otwartych platform internetowych. Podczas iteracji projektujemy też rozwiązania do współpracy, gromadząc jednocześnie opinie od deweloperów i innych dostawców przeglądarek.
Co utworzysz
W ramach tego ćwiczenia w programie poznasz różne internetowe interfejsy API, które są zupełnie nowe lub dostępne tylko za flagą. W ramach tego ćwiczenia w Codelabs nie skupiamy się na tworzeniu konkretnych interfejsów API, lecz także na ich odblokowywaniu.
Czego się nauczysz
W ramach tego ćwiczenia w Codelabs poznasz podstawowe mechanizmy działania kilku najnowszych interfejsów API. Zwróć uwagę, że ta mechanika nie jest jeszcze dopracowana, więc będziemy wdzięczni za Twoją opinię na temat procesu programowania.
Czego potrzebujesz
Interfejsy API zaprezentowane w tym ćwiczeniu w Codelabs są jeszcze w fazie rozwoju, dlatego wymagania każdego z nich są różne. Uważnie przeczytaj informacje na temat zgodności, które znajdują się na początku każdej sekcji.
Jak zacząć korzystać z ćwiczeń z programowania
Ćwiczenia z programowania nie muszą być wykonywane po kolei. Każda sekcja reprezentuje osobny interfejs API, możesz więc wybrać ten, który najbardziej Cię interesuje.
2. Badging API
Interfejs Badging API ma sprawić, że użytkownicy na to, co dzieje się w tle. Aby uprościć prezentację demonstracyjną, wykorzystamy interfejs API do na to, co dzieje się na pierwszym planie. Możesz w ten sposób przenieść umysł do rzeczy dziejących się w tle.
Zainstaluj Airhorner
Aby ten interfejs API działał, wymagana jest aplikacja PWA zainstalowana na ekranie głównym, więc pierwszym krokiem jest zainstalowanie takiej aplikacji, takiej jak słynna na całym świecie airhorner.com. W prawym górnym rogu kliknij przycisk Zainstaluj lub skorzystaj z menu z 3 kropkami, by zainstalować go ręcznie.
Pojawi się prośba o potwierdzenie. Kliknij Zainstaluj.
W Docku systemu operacyjnego pojawi się teraz nowa ikona. Kliknij go, aby uruchomić aplikację PWA. Będzie mieć własne okno aplikacji i będzie działać w trybie samodzielnym.
|
|
Ustawianie plakietki
Po zainstalowaniu aplikacji PWA musisz wyświetlić na plakietce pewne dane liczbowe (plakietki mogą zawierać tylko liczby). W Air Horner można łatwo policzyć, westchnie, ile razy walenie konia. Po zainstalowaniu aplikacji Airhorner klakson i sprawdź plakietkę. Liczy jedną za każdym razem, gdy klakson.
Jak to działa? Zasadniczo kod wygląda w ten sposób:
let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
navigator.setExperimentalAppBadge(++hornCounter);
});
Odtwórz kilka razy dźwięk trąbki i sprawdź ikonę PWA – będzie się aktualizować co tydzień. dla singli. obecnie się znajdujesz. dźwięk trąbki. To bardzo proste.
Usuwanie plakietki
Licznik zwiększa wartość do 99 i zaczyna od początku. Możesz też zresetować go ręcznie. Otwórz kartę konsoli w Narzędziach deweloperskich, wklej poniższy wiersz i naciśnij Enter.
navigator.setExperimentalAppBadge(0);
Plakietkę możesz też usunąć, wyraźnie usuwając ją w sposób pokazany poniżej. Ikona aplikacji PWA powinna znowu wyglądać, jak na początku, czytelna i bez plakietki.
navigator.clearExperimentalAppBadge();
Prześlij opinię
Co sądzisz o tym interfejsie API? Pomóż nam, odpowiadając krótko na tę ankietę:
Czy korzystanie z tego interfejsu API było intuicyjne?
Czy masz przykład uruchomienia?
Chcesz coś więcej powiedzieć? Czy brakowało jakichś funkcji? Podziel się z nami krótką opinią w tej ankiecie. Dziękujemy!
3. Natywny interfejs API systemu plików
Interfejs Native File System API umożliwia programistom tworzenie zaawansowanych aplikacji internetowych, które działają z plikami na lokalnym urządzeniu użytkownika. Gdy użytkownik przyzna dostęp aplikacji internetowej, ten interfejs API umożliwia aplikacjom internetowym odczytywanie i zapisywanie zmian bezpośrednio w plikach i folderach na urządzeniu użytkownika.
Odczytywanie pliku
„Hello, world” interfejsu Native File System API to odczyt pliku lokalnego i pobranie jego zawartości. Utwórz zwykły plik .txt i wpisz tekst. Następnie przejdź do dowolnej bezpiecznej witryny (czyli wyświetlanej przez HTTPS), np. example.com, i otwórz konsolę Narzędzi deweloperskich. Wklej poniższy fragment kodu w konsoli. Ponieważ interfejs Native File System API wymaga gestu użytkownika, dołączamy do dokumentu moduł obsługi dwukrotnego kliknięcia. Uchwyt pliku będzie potrzebny później, więc ustawimy 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ę selektor plików.
Wybierz wcześniej utworzony plik .txt. Zawartość pliku zastąpi wtedy rzeczywistą zawartość pliku body z example.com.
Zapisywanie pliku
Teraz chcemy wprowadzić pewne zmiany. Dlatego zablokujmy możliwość edytowania elementu body, wklejając fragment kodu poniżej. Teraz możesz edytować tekst w taki sposób, jakby przeglądarka była edytorem tekstu.
document.body.contentEditable = true;
Teraz chcemy zapisać zmiany w pierwotnym pliku. W związku z tym potrzebujemy zapisującego w nicku pliku. Aby go uzyskać, wklej w konsoli poniższy fragment kodu. Tu również potrzebny jest gest 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 klikniesz dokument (nie kliknij go dwukrotnie), pojawi się prośba o przyznanie uprawnień. Gdy przyznasz uprawnienia, zawartość pliku będzie taka sama jak wcześniej edytowana w body. Sprawdź zmiany, otwierając plik w innym edytorze (lub rozpocznij procedurę od nowa, ponownie klikając dokument dwukrotnie i otwierając plik).
Gratulacje! 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 krótko na tę ankietę:
Czy korzystanie z tego interfejsu API było intuicyjne?
Czy masz przykład uruchomienia?
Chcesz coś więcej powiedzieć? Czy brakowało jakichś funkcji? Podziel się z nami krótką opinią w tej ankiecie. Dziękujemy!
4. Shape Detection API
Interfejs Machine Detection API umożliwia dostęp do przyspieszonego wykrywania kształtów (np. twarzy) i działa w przypadku zdjęć i plików danych ze zdjęciami na żywo. Systemy operacyjne są wyposażone w wydajne i wysoce zoptymalizowane detektory funkcji, takie jak FaceDetector na Androida. Interfejs Machine Detection API otwiera te natywne implementacje i udostępnia je za pomocą zestawu interfejsów JavaScript.
Obecnie obsługiwane funkcje to wykrywanie twarzy w interfejsie FaceDetector, wykrywanie kodów kreskowych w interfejsie BarcodeDetector oraz wykrywanie tekstu (optyczne rozpoznawanie znaków) w interfejsie TextDetector.
Wykrywanie twarzy
Fascynującą funkcją interfejsu Config Detection API jest wykrywanie twarzy. Aby to przetestować, potrzebna jest strona z twarzami. Ta strona z twarzą autora to dobry początek. Będzie to wyglądać podobnie do tego na zrzucie ekranu poniżej. W obsługiwanej przeglądarce ramka granicy twarzy i punkty orientacyjne twarzy będą rozpoznawane.
Jak widać, jak mało kodu było do tego potrzebne, remiksuj lub edytuj projekt Glitch, a zwłaszcza plik Script.js.
Jeśli chcesz korzystać z większej dynamiki, a nie tylko pracy z twarzą autora, otwórz stronę wyników wyszukiwania Google, na której są widoczne twarze na karcie prywatnej lub w trybie gościa. Na tej stronie otwórz Narzędzia deweloperskie w Chrome. W tym celu kliknij dowolne miejsce prawym przyciskiem myszy i kliknij Zbadaj. Następnie na karcie Console wklej poniższy fragment kodu. Kod będzie wyróżniać 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);
}
});
Zwróć uwagę na fakt, że istnieją wiadomości dotyczące DOMException i nie wszystkie obrazy są przetwarzane. Dzieje się tak, ponieważ obrazy w części strony widocznej na ekranie są wbudowane w identyfikatory URI danych, dzięki czemu można uzyskać do nich dostęp. Natomiast obrazy w części strony widocznej po przewinięciu pochodzą z innej domeny, która nie obsługuje CORS. Ze względu na wersję demonstracyjną nie musimy się tym przejmować.
Wykrywanie punktów orientacyjnych twarzy
Oprócz rozpoznawania twarzy system macOS obsługuje również wykrywanie punktów orientacyjnych twarzy. Aby przetestować wykrywanie punktów orientacyjnych twarzy, wklej do konsoli ten fragment kodu. Przypomnienie: lista punktów orientacyjnych nie jest idealna ze względu na stronę crbug.com/914348, ale możesz sprawdzić, jak zmierzają one do celu i jak wydajna może być ta funkcja.
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 kodu kreskowego
Drugą funkcją Machine Detection API to wykrywanie kodów kreskowych. Podobnie jak wcześniej potrzebujemy strony z kodami kreskowymi, takiej jak tutaj. Gdy otworzysz go w przeglądarce, zobaczysz odczytane różne kody QR. Aby sprawdzić, jak to działa, zremiksuj lub zmodyfikuj projekt Glitch, a zwłaszcza plik Script.js.
Jeśli potrzebujesz czegoś bardziej dynamicznego, możemy znowu skorzystać z Wyszukiwarki grafiki Google. Teraz otwórz w przeglądarce stronę wyników wyszukiwania Google na karcie prywatnej lub w trybie gościa. Wklej poniższy fragment kodu na karcie konsoli w Narzędziach deweloperskich w Chrome. Po chwili rozpoznane kody kreskowe zostaną oznaczone nieprzetworzoną 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. Wiesz już, jakie są zasady: potrzebujemy strony z obrazami zawierającymi tekst, np. tej z wynikami skanowania w Książkach Google. W obsługiwanych przeglądarkach tekst zostanie rozpoznany, a fragmenty tekstu będą otoczone ramką ograniczającą. Aby sprawdzić, jak to działa, zremiksuj lub zmodyfikuj projekt Glitch, a zwłaszcza plik Script.js.
Jeśli chcesz przetestować tę funkcję dynamicznie, otwórz stronę wyników wyszukiwania na karcie prywatnej lub w trybie gościa. Wklej poniższy fragment kodu na karcie konsoli w Narzędziach deweloperskich w Chrome. Po odczekaniu trochę czasu tekst zostanie rozpoznany.
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 krótko na tę ankietę:
Czy korzystanie z tego interfejsu API było intuicyjne?
Czy masz przykład uruchomienia?
Chcesz coś więcej powiedzieć? Czy brakowało jakichś funkcji? Podziel się z nami krótką opinią w tej ankiecie. Dziękujemy!
5. Web Share Target API
Interfejs Web Share Target API umożliwia zainstalowanym aplikacjom internetowym zarejestrowanie się w bieżącym systemie operacyjnym jako miejsce docelowe udostępniania, aby otrzymywać udostępniane treści za pomocą interfejsu Web Share API lub zdarzeń systemowych, takich jak przycisk udostępniania na poziomie systemu operacyjnego.
Instalowanie PWA, aby udostępnić treści
Na początek potrzebujesz aplikacji PWA, której możesz udostępnić. Tym razem Airhorner (na szczęście) się nie da, ale możesz liczyć na aplikację demonstracyjną celu udostępniania w internecie. Zainstaluj aplikację na ekranie głównym urządzenia.
Udostępnianie aplikacji PWA
Następnie musisz coś udostępnić, np. zdjęcie ze Zdjęć Google. Kliknij przycisk Udostępnij i wybierz PWA notatnika jako miejsce docelowe udostępniania.
Po kliknięciu ikony aplikacji trafisz bezpośrednio do aplikacji PWA Scrapbook, gdzie znajdziesz zdjęcie.
Jak to działa? Aby to sprawdzić, przejrzyj plik manifestu aplikacji internetowej PWA w notatniku. Konfiguracja pozwalająca na działanie interfejsu Web Share Target API znajduje się we właściwości "share_target" pliku manifestu, który w polu "action" wskazuje URL, który jest ozdobiony parametrami podanymi w tabeli "params".
Strona udostępniająca odpowiednio wypełnia szablon URL (umożliwia to działanie w ramach udostępniania lub jest sterowana automatycznie przez programistę przy użyciu interfejsu Web Share API). Strona odbierająca może następnie wyodrębniać parametry i wykonywać z nimi określone parametry, na przykład je wyświetlać.
{
"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 krótko na tę ankietę:
Czy korzystanie z tego interfejsu API było intuicyjne?
Czy masz przykład uruchomienia?
Chcesz coś więcej powiedzieć? Czy brakowało jakichś funkcji? Podziel się z nami krótką opinią w tej ankiecie. Dziękujemy!
6. Interfejs API Wake Lock
Większość urządzeń szybko przechodzi w tryb uśpienia, gdy jest bezczynna. Pozwala to uniknąć szybkiego rozładowywania się baterii. W większości przypadków jest to dobre rozwiązanie, ale niektóre aplikacje muszą mieć włączony ekran lub urządzenie, aby mogły dokończyć pracę. Interfejs Wake Lock API umożliwia zapobieganie wygaszeniu i blokowaniu ekranu urządzenia oraz przechodzeniu w tryb uśpienia. Umożliwia to korzystanie z nowych funkcji, które do tej pory wymagały aplikacji natywnej.
Konfigurowanie wygaszacza ekranu
Aby przetestować interfejs Wake Lock API, musisz się najpierw upewnić, że urządzenie przeszło w tryb uśpienia. Dlatego w panelu ustawień systemu operacyjnego włącz wybrany wygaszacz ekranu i upewnij się, że uruchamia się on po minucie. Upewnij się, że wszystko działa, pozostawiając urządzenie tylko przez ten czas (tak, wiem, to bardzo bolesne). Zrzuty ekranu poniżej przedstawiają system macOS, ale możesz to zrobić na urządzeniu mobilnym z Androidem lub na dowolnej obsługiwanej platformie komputerowej.
Ustawianie blokady uśpienia ekranu
Skoro już wiesz, że wygaszacz ekranu działa, możesz użyć blokady uśpienia typu "screen", by uniemożliwić wygaszaczowi ekranu. Przejdź do aplikacji demonstracyjnej Wybudzanie i kliknij Aktywuj
screen Pole wyboru Blokada wybudzenia.
Od tego momentu aktywna będzie blokada uśpienia. Jeśli zachowasz cierpliwość i pozostawisz urządzenie bez zmian, zobaczysz, że wygaszacz ekranu faktycznie się nie uruchomił.
Jak to działa? Aby to sprawdzić, przejdź do projektu Glitch dotyczącego aplikacji demonstracyjnej Wake Lock i zapoznaj się z script.js. Podstawowe informacje na ten temat znajdują się 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 blokada uśpienia powinna być aktywna przez dokładnie 10 sekund (zobacz dzienniki konsoli), a wygaszacz ekranu nie powinien się uruchamiać.
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 krótko na tę ankietę:
Czy korzystanie z tego interfejsu API było intuicyjne?
Czy masz przykład uruchomienia?
Chcesz coś więcej powiedzieć? Czy brakowało jakichś funkcji? Podziel się z nami krótką opinią w tej ankiecie. Dziękujemy!
7. Contact Picker API
Interfejs API, który bardzo nas cieszy, to Contact Picker API. Zezwala aplikacji internetowej na dostęp do kontaktów z wbudowanego menedżera kontaktów na urządzeniu, dzięki czemu aplikacja internetowa ma dostęp do tych kontaktów. imiona i nazwiska, adresy e-mail i numery telefonów. Możesz określić, czy chcesz korzystać tylko z jednego kontaktu, czy z kilku oraz czy chcesz uwzględnić wszystkie pola czy tylko podzbiór imion i nazwisk, adresów e-mail i numerów telefonów.
Kwestie dotyczące prywatności
Po otwarciu selektora możesz wybrać kontakty, które chcesz udostępnić. Zwróć uwagę, że nie ma opcji „zaznacz wszystko” Zależy nam na tym, aby udostępnianie było świadomą decyzją. Także dostęp nie jest ciągły, lecz jednorazową decyzją.
Uzyskiwanie dostępu do kontaktów
Uzyskiwanie dostępu do kontaktów jest proste. Zanim otworzy się selektor, możesz określić wymagane pola (dostępne opcje to name, email i telephone) oraz określić, czy chcesz uzyskiwać dostęp do wielu kontaktów, czy tylko do jednego. Możesz przetestować ten interfejs API na urządzeniu z Androidem, otwierając aplikację demonstracyjną. Odpowiednia sekcja kodu źródłowego to zasadniczo poniższy 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 można było automatycznie kopiować i wklejać obrazów do schowka systemowego. Niedawno dodaliśmy obsługę obrazów do interfejsu Async Clipboard API,
aby móc kopiować i wklejać obrazy. Nowością jest również możliwość zapisywania obrazów w schowku. Asynchroniczny interfejs API schowka od dawna obsługiwał kopiowanie i wklejanie tekstu. Możesz skopiować tekst do schowka, wywołując navigator.clipboard.writeText(), a następnie wklejając ten tekst, używając metody navigator.clipboard.readText().
Kopiowanie i wklejanie obrazów
Teraz możesz też zapisywać obrazy w schowku. Aby to działało, należy przesłać dane obrazów w postaci obiektu bloba, który można następnie przekazać do konstruktora elementu schowka. Na koniec możesz skopiować ten element schowka, wywołując 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 ze schowka wygląda dość skomplikowanie, a w rzeczywistości polega na odzyskaniu obiektu blob ze schowka. Trzeba przeglądać je w pętli, aż znajdziesz ten, który Cię interesuje. Ze względów bezpieczeństwa jest to obecnie ograniczone do plików PNG, ale w przyszłości możemy dodać więcej formatów obrazó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);
}
}
Możesz zobaczyć, jak działa ten interfejs API w aplikacji demonstracyjnej. Odpowiednie fragmenty jego kodu źródłowego są umieszczone powyżej. Obrazy do schowka można kopiować do schowka bez uprawnień, ale wymagane jest przyznanie uprawnień 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ę ukończyć ćwiczenia z programowania. Chcemy przypomnieć, że większość interfejsów API jest wciąż zmieniana i nad nimi aktywnie pracujemy. Nasz zespół bardzo ceni Twoje opinie. Tylko interakcja z osobami takimi jak Ty pomoże nam ulepszyć interfejsy API.
Zachęcamy też do regularnego zaglądania na naszą stronę docelową funkcji. Będziemy go aktualizować i zawierać wskazówki do wszystkich szczegółowych artykułów dotyczących interfejsów API, nad którymi pracujemy. Wymiatasz!
Tom i cały zespół ds. zdolności 🐡