Nowości w Chrome 76

Pete LePage

W Chrome 76 dodaliśmy obsługę tych funkcji:

Jestem Pete LePage. Przyjrzyjmy się, co nowego dla programistów w Chrome 76.

Przycisk instalacji w omniboksie PWA

W Chrome 76 chcemy ułatwić instalowanie progresywnych aplikacji internetowych na komputerze, dodając przycisk instalacji na pasku adresu (czasami nazywany omniboksem).

Jeśli Twoja witryna spełnia kryteria progresywnej aplikacji internetowej, Chrome wyświetla w omniboksie przycisk instalacji, który wskazuje użytkownikowi, że Twoją aplikację PWA można zainstalować. Jeśli użytkownik kliknie przycisk instalacji, działanie to działa tak samo jak wywołanie prompt() w zdarzeniu beforeinstallprompt. Wyświetla okno instalacji, co ułatwia użytkownikowi zainstalowanie aplikacji PWA.

Szczegółowe informacje znajdziesz w artykule Instalowanie paska adresu w przypadku progresywnych aplikacji internetowych na komputerze.


Większa kontrola nad minipaskiem informacyjnym PWA

Przykład minipaska informacyjnego „Dodaj do ekranu głównego” dotyczącego AirHorner

Na urządzeniach mobilnych Chrome wyświetla miniinfopasek, gdy użytkownik po raz pierwszy odwiedzi Twoją witrynę, jeśli spełnia ona kryteria progresywnej aplikacji internetowej. Dotarły do nas informacje, że chcesz uniemożliwić wyświetlanie minipaska informacyjnego i zamiast tego wyświetlać własną promocję.

Od wersji Chrome 76 wywołanie metody preventDefault() w zdarzeniu beforeinstallprompt spowoduje, że minipasek informacyjny nie będzie się wyświetlał.

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);
});

Pamiętaj o zaktualizowaniu UI, aby użytkownicy wiedzieli, że Twoją aplikację PWA można zainstalować. We Wzorcu promowania instalacji PWA znajdziesz nasze zalecane sprawdzone metody promowania instalowania progresywnych aplikacji internetowych.

Szybsze aktualizacje WebAPK

Gdy na urządzeniu z Androidem jest zainstalowana progresywna aplikacja internetowa, Chrome automatycznie wysyła żądanie do internetowego pliku APK i je instaluje. Po jej zainstalowaniu Chrome okresowo sprawdza, czy nie zmienił się plik manifestu aplikacji internetowej. Możliwe też, że zmieniono ikony i kolory albo zmieniono nazwę aplikacji, aby sprawdzić, czy wymagany jest nowy plik WebAPK.

Od wersji Chrome 76 Chrome będzie częściej sprawdzać plik manifestu – codziennie, a nie co 3 dni. Jeśli któraś z kluczowych właściwości się zmieni, Chrome poprosi o nowy pakiet WebAPK i zainstaluje go, upewniając się, że tytuł, ikony i inne właściwości są aktualne.

Szczegółowe informacje znajdziesz w sekcji Częstsze aktualizowanie plików WebAPK.

Tryb ciemny

Wiele systemów operacyjnych obsługuje teraz tryb ciemny, czyli inaczej ciemny motyw.

Zapytanie o multimedia prefers-color-scheme umożliwia dostosowanie wyglądu i stylu witryny do trybu preferowanego przez użytkownika.

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

Tomek podpisał na stronie web.dev świetny artykuł Cześć ciemności, mój stary przyjaciel, który zawiera wszystko, co warto wiedzieć, a także wskazówki dotyczące projektowania arkuszy stylów tak, aby obsługiwały zarówno światło, jak i tryb ciemny.

…i wiele innych.

To tylko kilka ze zmian wprowadzonych w Chrome 76 dla deweloperów, oczywiście jest ich znacznie więcej.

Promise.allSettled()

Osobiście podoba mi się Promise.allSettled(). Działa podobnie jak Promise.all(), ale z powrotem czeka, aż wszystkie obietnice zostaną spełnione.

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).

Czytanie obiektów blob jest łatwiejsze

Metody Blob są łatwiejsze do odczytania dzięki 3 nowym metodom: text(), arrayBuffer() i stream(). Oznacza to, że nie musimy już tworzyć opakowania wokół odczytu pliku.

// 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);
});

Obsługa obrazów w interfejsie asynchronicznego schowka API

Ponadto dodaliśmy obsługę obrazów w interfejsie Asynchronous Clipboard API, co ułatwi automatyczne kopiowanie i wklejanie obrazów.

Więcej informacji

To tylko niektóre z najważniejszych zmian. Aby poznać dodatkowe zmiany w Chrome 76, kliknij linki poniżej.

Zasubskrybuj

Jeśli chcesz być na bieżąco z naszymi filmami, zasubskrybuj kanał dla deweloperów Chrome w YouTube, a za każdym razem, gdy opublikujemy nowy film, otrzymasz e-maila z powiadomieniem.

Nazywam się Pete LePage i jak tylko pojawi się Chrome 77, zajmę się tym, co nowego w Chrome.