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 w domu. Zobaczmy, co nowego w Chrome 89 dla programistó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 zabawnym, 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 użycia.

@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ś) kliknąć telefonem 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ł automat 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 użytkownicy 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 jeszcze takiej strony, 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 w przypadku progresywnych aplikacji internetowych.

Jeśli nie wiesz, od czego zacząć, zapoznaj się z informacjami o Workbox. Zawiera on zestaw bibliotek, które mogą obsługiwać gotowy do wdrożenia 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 aplikacji na urządzeniu, 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 znacznie 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

Subskrybuj

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