Nieuw in Chrome 76

Pete LePage

In Chrome 76 hebben we ondersteuning toegevoegd voor:

Ik ben Pete LePage . Laten we eens kijken wat er nieuw is voor ontwikkelaars in Chrome 76!

PWA Omnibox-installatieknop

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

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

Zie Adresbalk installeren voor Progressive Web Apps op het bureaublad voor meer informatie.


Meer controle over de PWA-mini-infobalk

Voorbeeld van de mini-infobalk 'Toevoegen aan startscherm' voor AirHorner

Op mobiele apparaten toont Chrome de mini-infobalk de eerste keer dat een gebruiker uw site bezoekt, mits deze voldoet aan de installeerbaarheidscriteria voor Progressive Web App . We hebben van u vernomen dat u de mini-infobalk wilt uitschakelen en in plaats daarvan uw eigen installatiepromotie wilt aanbieden.

Vanaf Chrome 76 zorgt het aanroepen preventDefault() bij de beforeinstallprompt gebeurtenis ervoor dat de mini-infobalk niet meer wordt weergegeven.

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 je je gebruikersinterface bijwerkt om gebruikers te laten weten dat je PWA geïnstalleerd kan worden. Bekijk Patronen voor het promoten van PWA-installatie voor onze aanbevolen best practices om de installatie van je Progressive Web Apps te promoten.

Snellere updates voor WebAPK's

Wanneer een Progressive Web App op Android wordt geïnstalleerd, vraagt ​​Chrome automatisch een Web APK aan en installeert deze. Na de installatie controleert Chrome regelmatig of het manifest van de web app is gewijzigd (bijvoorbeeld als u de pictogrammen of kleuren hebt bijgewerkt of de naam van de app hebt gewijzigd) om te zien of er een nieuwe WebAPK nodig is.

Vanaf Chrome 76 controleert Chrome het manifest vaker: dagelijks in plaats van om de drie dagen. Als een van de belangrijkste eigenschappen is gewijzigd, vraagt ​​Chrome een nieuwe WebAPK aan en installeert deze. Zo worden de titel, pictogrammen en andere eigenschappen up-to-date gehouden.

Zie WebAPK's vaker bijwerken voor meer informatie.

Donkere modus

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

Met de media query 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 op web.dev met de titel Hello darkness, my old friend. Hierin staat alles wat je moet weten, plus tips voor het ontwerpen van je stijlbladen ter ondersteuning van zowel een lichte als een donkere modus.

En nog veel meer!

Dit zijn slechts enkele van de wijzigingen 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() , maar het wacht tot alle promises 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 zijn gemakkelijker te lezen dankzij drie nieuwe methoden: text() , arrayBuffer() en stream() . Dit betekent dat we geen wrapper meer rond de bestandslezer 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

Bovendien hebben we ondersteuning voor afbeeldingen toegevoegd aan de Asynchronous Clipboard API , waardoor u eenvoudig afbeeldingen programmatisch kunt kopiëren en plakken.

Verder lezen

Hieronder worden slechts enkele van de belangrijkste hoogtepunten besproken. Bekijk de onderstaande links voor meer wijzigingen in Chrome 76.

Abonneren

Wilt u op de hoogte blijven van onze video's? Abonneer u dan op ons Chrome Developers YouTube-kanaal . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage en zodra Chrome 77 uitkomt, vertel ik u graag wat er nieuw is in Chrome!