Nieuw in Chrome 76

Piet LePage

In Chrome 76 hebben we ondersteuning toegevoegd voor:

Ik ben Pete LePage , laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 76!

PWA Omnibox-installatieknop

In Chrome 76 maken we het gemakkelijker voor gebruikers om Progressive Web Apps op het bureaublad te installeren, door een installatieknop toe te voegen aan de adresbalk, ook wel de omnibox genoemd.

Als uw site voldoet aan de installeerbaarheidscriteria voor Progressive Web App , toont Chrome een installatieknop in de omnibox die aan de gebruiker aangeeft dat uw PWA kan worden geïnstalleerd. Als de gebruiker op de installatieknop klikt, is dit in essentie hetzelfde als het aanroepen van prompt() bij de beforeinstallprompt gebeurtenis; het toont het installatiedialoogvenster, waardoor het voor de gebruiker gemakkelijk wordt om uw PWA te installeren.

Zie Adresbalk installeren voor Progressive Web Apps op het bureaublad voor volledige details.


Meer controle over de PWA mini-infobar

Voorbeeld van de mini-infobalk Toevoegen aan startscherm voor AirHorner

Op mobiel toont Chrome de mini-infobalk de eerste keer dat een gebruiker uw site bezoekt, als deze voldoet aan de installeerbaarheidscriteria van Progressive Web App . We hebben van u gehoord dat u wilt voorkomen dat de mini-infobalk verschijnt en in plaats daarvan uw eigen installatiepromotie wilt aanbieden.

Vanaf Chrome 76 zorgt het aanroepen van preventDefault() voor de beforeinstallprompt gebeurtenis ervoor dat de mini-infobalk niet meer verschijnt.

window.addEventListener('beforeinstallprompt', (e) => {
  // Don't show mini-infobar
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to promote PWA installation
  pwaInstallAvailable(true);
});

Zorg ervoor dat u uw gebruikersinterface bijwerkt, zodat gebruikers weten dat uw PWA kan worden geïnstalleerd. Bekijk Patronen voor het bevorderen van PWA-installatie voor onze aanbevolen best practices voor het bevorderen van de installatie van uw Progressive Web Apps.

Snellere updates voor WebAPK's

Wanneer een Progressive Web App op Android wordt geïnstalleerd, vraagt ​​en installeert Chrome automatisch een Web APK . Nadat het is geïnstalleerd, controleert Chrome periodiek of het manifest van de webapp is gewijzigd. Misschien heeft u de pictogrammen en kleuren bijgewerkt of heeft u de app-naam gewijzigd om te zien of er een nieuwe WebAPK vereist is.

Vanaf Chrome 76 controleert Chrome het manifest vaker; controle elke dag, in plaats van elke drie dagen. Als een van de belangrijkste eigenschappen is gewijzigd, zal Chrome een nieuwe WebAPK aanvragen en installeren, zodat de titel, pictogrammen en andere eigenschappen up-to-date zijn.

Zie WebAPK's vaker bijwerken voor volledige details.

Donkere modus

Veel besturingssystemen ondersteunen nu een donkere modus of een donker thema.

Met de mediaquery prefers-color-scheme kunt u het uiterlijk van uw site aanpassen aan de voorkeursmodus van de gebruiker.

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Tom heeft een geweldig artikel Hallo duisternis, mijn oude vriend op web.dev met alles wat je moet weten, plus tips voor het ontwerpen van je stylesheets om zowel een lichte als een donkere modus te ondersteunen.

En meer!

Dit zijn slechts enkele van de veranderingen in Chrome 76 voor ontwikkelaars. Er is natuurlijk nog veel meer.

Promise.allSettled()

Persoonlijk ben ik erg enthousiast over Promise.allSettled() . Het is vergelijkbaar met Promise.all() , behalve dat het wacht totdat alle beloften zijn afgehandeld voordat het terugkeert.

const promises = [
  fetch('/api-call-1'),
  fetch('/api-call-2'),
  fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.

await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).

Het lezen van blobs is gemakkelijker

Blob 's zijn gemakkelijker te lezen met drie nieuwe methoden: text() , arrayBuffer() en stream() ; dit betekent dat we geen wrapper rond de bestandslezer meer hoeven te maken!

// New easier way
const text = await blob.text();
const aBuff = await blob.arrayBuffer();
const stream = await blob.stream();

// Old, wrapped reader
return new Promise((resolve) => {
  const reader = new FileReader();
  reader.addEventListener('loadend', (e) => {
    const text = e.srcElement.result;
    resolve(text);
  });
  reader.readAsText(file);
});

Ondersteuning voor afbeeldingen in de asynchrone klembord-API

En we hebben ondersteuning voor afbeeldingen toegevoegd aan de Asynchronous Clipboard API , waardoor het eenvoudig wordt om afbeeldingen programmatisch te kopiëren en plakken.

Verder lezen

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

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 77 uitkomt, ben ik hier om je te vertellen: wat er nieuw is in Chrome!