Chrome 89 wordt nu uitgerold naar de stabiele versie.
Dit is wat je moet weten:
- WebHID, WebNFC en Web Serial hebben hun testfase achter zich gelaten en zijn nu stabiel beschikbaar.
- We dichten een maas in de wet die een paar ontwikkelaars gebruikten om de controles op de installeerbaarheid van PWA's te omzeilen.
- Webdeling en Webdelingsdoel verschijnen op het bureaublad.
- En er is nog veel meer .
Ik ben Pete LePage , ik werk en film vanuit huis. Laten we eens kijken wat er nieuw is voor ontwikkelaars in Chrome 89!
WebHID, WebNFC en Web Serial
Ik ben ontzettend enthousiast over WebHID, WebNFC en Web Serial. Ze openen nieuwe mogelijkheden voor gebruikers die voorheen ondenkbaar waren, namelijk interactie met fysieke hardware.
Ze stellen makers in staat om verbinding te maken met leuke, bijzondere hardware, videoconferentie-apps en de speciale telefoonknoppen op speciale luidsprekers. Of tal van andere toepassingen.
Met behulp van Web Serial en ongeveer 60 regels code heeft @AndreBan een pagina gemaakt waarmee interactie mogelijk is met de MicroPython REPL op een Raspberry Pi Pico . Web Serial wordt ook gebruikt door Espruino in hun webgebaseerde IDE .
Tijdens CDS 2019 schreef Francois een leuk memoryspel met behulp van Web NFC. Je moest je telefoon tegen de juiste kaart tikken, in de juiste volgorde.
En mijn favoriet: @bramus gebruikte WebHID om verbinding te maken met een StreamDeck en bouwde daarmee een Daft Punk-drumpad . Als je geen StreamDeck hebt, bekijk dan zijn demo-video op YouTube en de code op GitHub .
Of het nu gaat om uw website die communiceert met uw hardware, of om uw hardware die met veel websites kan communiceren, gebruikers profiteren ervan omdat ze geen speciale stuurprogramma's of software hoeven te installeren.
Meer informatie over de apparaten waarmee u verbinding kunt maken, vindt u op web.dev/devices , of bekijk de handleidingen voor WebHID , WebNFC en Web Serial .
Wijzigingen in de installatiecriteria van PWA
Offline ondersteuning is vanaf het begin een belangrijk criterium geweest voor de installeerbaarheid van Progressive Web Apps. Net als bij andere geïnstalleerde apps verwachten gebruikers dat het betrouwbaar werkt. Het moet snel zijn en ze mogen nooit de offline dinosaurus te zien krijgen!
Later dit jaar willen we een maas in de wet dichten waardoor een paar sites aan de installatiecriteria voldeden, zonder een offline functionaliteit te bieden. Als je PWA al een offline functionaliteit heeft, hoef je niets te doen. Zo niet, dan is het tijd om er een toe te voegen!
Vanaf Chrome 89 krijg je een waarschuwing in de ontwikkelaarstools onder het tabblad 'Problemen' als je PWA geen geldige reactie geeft wanneer deze offline is. Lighthouse zal dan aangeven dat er een probleem is. De handhaving hiervan wordt later dit jaar in Chrome 93 ingevoerd.
Je kunt zelf bepalen wat voor offline ervaring je wilt bieden. Idealiter bied je zoveel mogelijk van je ervaring offline aan. Maar minimaal kan het zo simpel zijn als een offline back-uppagina .
Meer informatie over de wijziging en de redenen hiervoor vindt u in het artikel 'Verbetering van de detectie van offline ondersteuning voor Progressive Web Apps' .
Weet je niet waar je moet beginnen? Kijk dan eens naar Workbox . Het bevat een set bibliotheken waarmee je een productieklare service worker voor je PWA kunt bouwen. Of, voor een eenvoudige offline fallback-pagina, vind je in het artikel 'Een offline fallback-pagina maken' alle code die je nodig hebt. Je kunt de code direct kopiëren en plakken in je website.
Webdeling en doel voor webdeling op het bureaublad
Als uw website gebruikers de mogelijkheid biedt om bestanden te maken, bewerken of ermee te interageren, dient u de Web Share- en Web Share Target-API's te gebruiken. Deze API's zijn al enige tijd beschikbaar voor mobiele apparaten, maar worden nu ook ondersteund door ChromeOS en Windows.
Met Web Share kunnen gebruikers bestanden of gegevens naar andere geïnstalleerde apps op hun apparaat sturen, bijvoorbeeld een foto delen vanuit Google Foto's naar 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;
}
}
Om je te registreren als doelwit, zodat andere apps bestanden of gegevens met je kunnen delen, kun je het beste de Web Share Target API gebruiken.
"share_target": {
"action": "/?share-target",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"files": [
{
"name": "file",
"accept": ["image/*"],
},
],
},
},
Raadpleeg de handleidingen 'Integreren met de OS-deelinterface met de Web Share API' en 'Gedeelde gegevens ontvangen met de Web Share Target API' voor meer informatie over hoe u aan de slag kunt.
En nog veel meer
En natuurlijk is er nog veel meer.
Chrome staat nu toe dat je binnen JavaScript-modules ` await op het hoogste niveau gebruikt.
Om verwarring bij gebruikers te voorkomen, hebben we het pictogram in de omnibox voor installeerbare PWA's bijgewerkt.
En als je een Trusted Web Activity hebt gebruikt om je PWA beschikbaar te maken in de Play Store voor ChromeOS, kun je je aanmelden voor de proefversie van de Digital Goods API .
Verder lezen
Dit is slechts een greep uit de belangrijkste wijzigingen. Lees meer over de veranderingen in Chrome 89.
- Wat is er nieuw in Chrome DevTools (89)
- Verouderde functies en verwijderingen in Chrome 89
- Updates voor Chrome 88 op ChromeStatus.com
- Wat is er nieuw in JavaScript in Chrome 88?
- Wijzigingslijst van de Chromium-broncode-repository
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 zodra we een nieuwe video publiceren.