Nieuw in Chroom 89

Chrome 89 begint nu stabiel te worden.

Dit is wat u moet weten:

Ik ben Pete LePage , ik werk en fotografeer vanuit huis. Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 89!

WebHID, WebNFC en Web Serial

Ik ben erg enthousiast over WebHID, WebNFC en Web Serial. Ze openen nieuwe scenario's voor gebruikers die voorheen nooit mogelijk waren, in interactie met echte hardware.

Ze stellen makers in staat verbinding te maken met leuke, eigenzinnige hardware- en videoconferentie-apps en de speciale telefoonknoppen op gespecialiseerde luidsprekers te gebruiken. Of een aantal andere gebruiksscenario's.

Met behulp van Web Serial en ongeveer 60 regels code heeft @AndreBan een pagina gemaakt die kan communiceren met de MicroPython REPL op een Raspberry Pi Pico . Web Serial wordt ook door Espruino gebruikt in hun webgebaseerde IDE .

Op CDS 2019 schreef Francois een leuk geheugenspel met behulp van Web NFC. Je moest de telefoon op de juiste kaart tikken, in de juiste volgorde.

StreamDeck met Daft Punk-drumpad

En mijn favoriet, @bramus gebruikte WebHID om verbinding te maken met een StreamDeck en een Daft Punk-drumpad te bouwen. Als je geen StreamDeck hebt, bekijk dan zijn demovideo op YouTube en bekijk de code op GitHub .

Of het nu uw site is die met uw hardware communiceert, of uw hardware die met veel sites kan communiceren, gebruikers winnen omdat ze geen speciale stuurprogramma's of software hoeven te installeren.

U kunt meer leren over enkele apparaten waarmee u verbinding kunt maken op web.dev/devices , of bekijk de handleidingen voor WebHID , WebNFC en Web Serial .

PWA-installeerbaarheidscriteria veranderen

Offline ondersteuning is vanaf het begin een belangrijk onderdeel geweest van de Progressive Web App-criteria voor installeerbaarheid. Net als bij andere geïnstalleerde apps verwachten gebruikers dat deze betrouwbaar werken. Het moet snel zijn en ze mogen de offline dino nooit zien!

Later dit jaar zijn we van plan een maas in de wet te dichten waardoor enkele sites aan de installeerbaarheidscriteria konden voldoen, zonder een offline ervaring. Als uw PWA al een offline ervaring heeft, bent u er helemaal klaar voor. Er is geen actie vereist, maar als u dat niet doet, is het tijd om er een toe te voegen!

Als uw PWA vanaf Chrome 89 geen geldig antwoord geeft wanneer u offline bent, ziet u een waarschuwing in DevTools op het tabblad Problemen en geeft Lighthouse aan dat er een probleem is. En de handhaving begint later dit jaar in Chrome 93.

DevTools toont waarschuwingsbericht in Console.
Waarschuwingsbericht in de Chrome DevTools Console.
DevTools toont een waarschuwingsbericht op het tabblad Toepassing.
Waarschuwingsbericht op het tabblad Applicatie > Manifest > Installeerbaarheid.

U kunt beslissen wat voor soort offline ervaring u wilt bieden. Idealiter zou u zoveel mogelijk van uw ervaring moeten doorgeven. Maar het kan op zijn minst zo simpel zijn als een offline reservepagina .

Meer details over de wijziging en waarom we deze doorvoeren vindt u in Verbetering van offline ondersteuningsdetectie voor Progressive Web App .

Als je niet zeker weet waar je moet beginnen, kijk dan eens naar Workbox . Het beschikt over een reeks bibliotheken die een productieklare servicemedewerker voor uw PWA kunnen ondersteunen. Of, voor een eenvoudige offline reservepagina: het artikel Een offline reservepagina maken bevat alle code die u nodig heeft, en u kunt deze rechtstreeks in uw site kopiëren en plakken.

Web Share en Web Share Target voor desktop

Als uw site gebruikers toestaat bestanden te maken, bewerken of ermee te communiceren, moet u de Web Share- en Web Share Target-API's gebruiken. Deze API's zijn al een tijdje beschikbaar op mobiel, maar worden nu ondersteund op ChromeOS en Windows.

Web Share maakt het voor gebruikers mogelijk om bestanden of gegevens naar andere geïnstalleerde apps op hun apparaat te verzenden, bijvoorbeeld door een foto van Google Foto's te delen met Twitter.

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

Als u zich wilt registreren als doel zodat andere apps bestanden of gegevens met u kunnen delen, kunt u de Web Share Target API gebruiken.

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

Vink Integreren met de gebruikersinterface voor het delen van het besturingssysteem met de Web Share API en Gedeelde gegevens ontvangen met de Web Share Target API aan voor handleidingen om aan de slag te gaan.

En meer

En natuurlijk is er nog veel meer.

Chrome staat nu await binnen JavaScript-modules.

Nieuw omnibox-installatiepictogram voor PWA's

Om verwarring bij gebruikers te verminderen, hebben we het pictogram in de omnibox voor installeerbare PWA's bijgewerkt.


En als u een vertrouwde webactiviteit heeft gebruikt om uw PWA beschikbaar te maken in de Play Store voor ChromeOS, kunt u zich aanmelden voor de proefversie van de Digital Goods API Origin .

Verder lezen

Dit behandelt slechts enkele van de belangrijkste hoogtepunten. Controleer de onderstaande links voor aanvullende wijzigingen in Chrome 89.

Abonneren

Wil je op de hoogte blijven van onze video's, abonneer je dan op ons Chrome Developers YouTube-kanaal en je ontvangt een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage, en zodra Chrome 90 uitkomt, ben ik hier om je te vertellen wat er nieuw is in Chrome!

Kredieten

De foto van de Raspberry Pis en Arduino is van Harrison Broadbent op Unsplash