Nowości w Chrome 89

Pete LePage

Wersja stabilna Chrome 89 jest już wdrażana.

Oto, co musisz wiedzieć na ten temat:

Jestem Pete LePage. Pracuję i nagrywam wideo w domu. Zobaczmy, co nowego w Chrome 89 dla deweloperów.

WebHID, WebNFC i Web Serial

Bardzo mnie ekscytują interfejsy WebHID, WebNFC i Web Serial. Otwierają one przed użytkownikami nowe scenariusze, które wcześniej były niemożliwe, ponieważ umożliwiają interakcję z prawdziwym sprzętem.

Umożliwiają one producentom łączenie się z ciekawym, nietypowym sprzętem i aplikacjami do rozmów wideo, aby korzystać z dedykowanych przycisków telefonicznych na specjalistycznych głośnikach. lub w wielu innych przypadkach.

@AndreBan za pomocą Web Serial i około 60 linii kodu utworzył stronę, która może wchodzić w interakcję z MicroPython REPL na Raspberry Pi Pico. Web Serial jest też używany przez Espruino w ich środowisku IDE dostępnym w przeglądarce.

Na CDS 2019 Francois napisał zabawną grę pamięciową, w której wykorzystał Web NFC. Musiałeś(-aś) dotknąć telefonu, aby wybrać odpowiednią kartę we właściwej kolejności.

StreamDeck z padem perkusyjnym Daft Punk

Mój ulubiony przykład to @bramus, który użył WebHID do połączenia się z urządzeniem StreamDeck i stworzył pad perkusyjny Daft Punk. Jeśli nie masz StreamDecka, obejrzyj jego film demonstracyjny w YouTube i zapoznaj się z kodem na GitHubie.

Niezależnie od tego, czy to Twoja witryna wchodzi w interakcję ze sprzętem, czy sprzęt może wchodzić w interakcję z wieloma witrynami, użytkownicy zyskują, ponieważ nie muszą instalować specjalnych sterowników ani oprogramowania.

Więcej informacji o niektórych urządzeniach, które możesz połączyć, znajdziesz na stronie web.dev/devices. Możesz też zapoznać się z przewodnikami dla początkujących dotyczącymi WebHID, WebNFC i Web Serial.

Zmiany kryteriów możliwości zainstalowania PWA

Obsługa offline od samego początku była kluczowym kryterium instalacji progresywnych aplikacji internetowych. Podobnie jak w przypadku innych zainstalowanych aplikacji użytkownicy oczekują, że będzie ona działać niezawodnie. Powinno to być szybkie i nigdy nie powinni widzieć dinozaura offline.

Jeszcze w tym roku planujemy zamknąć lukę, która umożliwiała niektórym witrynom spełnienie kryteriów instalacji bez możliwości korzystania z nich w trybie offline. Jeśli Twoja progresywna aplikacja internetowa ma już funkcję offline, nie musisz nic więcej robić. Nie musisz nic robić, ale jeśli nie masz formy płatności, czas ją dodać.

Od Chrome 89, jeśli Twoja progresywna aplikacja internetowa nie zapewnia prawidłowej odpowiedzi w trybie offline, w Narzędziach deweloperskich na karcie Problemy zobaczysz ostrzeżenie, a Lighthouse wskaże, że występuje problem. Egzekwowanie zasad rozpocznie się w Chrome 93 jeszcze w tym roku.

Narzędzia deweloperskie wyświetlają w konsoli komunikat ostrzegawczy.
Komunikat ostrzegawczy w konsoli Narzędzi deweloperskich w Chrome.
Narzędzia deweloperskie wyświetlające komunikat ostrzegawczy na karcie Aplikacja.
Komunikat ostrzegawczy na karcie Aplikacja > Manifest > Możliwość instalacji.

Możesz zdecydować, jakiego rodzaju funkcje offline chcesz udostępniać. W miarę możliwości podaj jak najwięcej informacji o swoich doświadczeniach. Może to być co najmniej strona rezerwowa offline.

Więcej informacji o tej zmianie i jej przyczynach znajdziesz w artykule Ulepszanie wykrywania obsługi offline progresywnych aplikacji internetowych.

Jeśli nie wiesz, od czego zacząć, zapoznaj się z informacjami o Workbox. Zawiera zestaw bibliotek, które mogą obsługiwać gotowy do wdrożenia w środowisku produkcyjnym service worker w Twojej progresywnej aplikacji internetowej. W przypadku prostej strony rezerwowej offline w artykule Tworzenie strony rezerwowej offline znajdziesz cały potrzebny kod, który możesz skopiować i wkleić bezpośrednio do swojej witryny.

Web Share i Web Share Target na komputery

Jeśli Twoja witryna umożliwia użytkownikom tworzenie, edytowanie lub używanie plików, powinna korzystać z interfejsów Web Share API i Web Share Target API. Te interfejsy API są dostępne na urządzeniach mobilnych od jakiegoś czasu, ale teraz są obsługiwane w ChromeOS i Windows.

Web Share umożliwia użytkownikom wysyłanie plików lub danych do innych zainstalowanych na urządzeniu aplikacji, np. udostępnianie zdjęcia ze Zdjęć Google na Twitterze.

async function share(title, text, url) {
  try {
    await navigator.share({title, text, url});
    return true;
  } catch (ex) {
    console.error('Share failed', ex);
    return false;
  }
}

Aby zarejestrować się jako aplikacja docelowa, do której inne aplikacje mogą udostępniać pliki lub dane, użyj interfejsu Web Share Target API.

"share_target": {
  "action": "/?share-target",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "file",
        "accept": ["image/*"],
      },
    ],
  },
},

Aby zapoznać się z przewodnikami dla początkujących, przeczytaj artykuły Integracja z interfejsem udostępniania systemu operacyjnego za pomocą interfejsu Web Share API i Odbieranie udostępnionych danych za pomocą interfejsu Web Share Target API.

I nie tylko

Oczywiście jest ich o wiele więcej.

Chrome umożliwia teraz używanie instrukcji await najwyższego poziomu w modułach JavaScript.

Nowa ikona instalacji aplikacji PWA w omniboksie

Aby zmniejszyć zamieszanie wśród użytkowników, zaktualizowaliśmy ikonę wyświetlaną w omniboksie w przypadku instalowanych progresywnych aplikacji internetowych.


Jeśli używasz zaufanej aktywności w internecie, aby udostępnić PWA w Sklepie Play na ChromeOS, możesz zarejestrować się w testowaniu origin interfejsu Digital Goods API.

Więcej informacji

Obejmuje to tylko niektóre z najważniejszych informacji. Więcej informacji o zmianach w Chrome 89 znajdziesz w linkach poniżej.

Subskrybuj

Jeśli chcesz być na bieżąco z naszymi filmami, zasubskrybuj nasz kanał dla deweloperów Chrome w YouTube. Będziesz otrzymywać powiadomienia e-mail o każdym nowym filmie.

Jestem Pete LePage i jak tylko Chrome 90 zostanie wydany, od razu powiem Ci, co nowego pojawi się w Chrome.

Środki

Zdjęcia Raspberry Pi i Arduino: Harrison Broadbent, Unsplash