Nowości w Chrome 76

Pete LePage

W Chrome 76 dodaliśmy obsługę:

Nazywam się Pete LePage. Zobaczmy, co nowego w Chrome 76 dla deweloperów.

Przycisk instalowania PWA w omniboksie

W Chrome 76 ułatwiamy użytkownikom instalowanie progresywnych aplikacji internetowych na komputerach, dodając przycisk instalowania do paska adresu (czasami nazywanego także polem wyszukiwania).

Jeśli Twoja witryna spełnia kryteria instalowalności progresywnych aplikacji internetowych, Chrome wyświetli w polu wyszukiwania przycisk instalacji, który poinformuje użytkownika, że może zainstalować PWA. Jeśli użytkownik kliknie przycisk instalacji, będzie to zasadniczo to samo, co wywołanie funkcji prompt() w zdarzeniu beforeinstallprompt. Wyświetli się okno instalacji, które ułatwi użytkownikowi zainstalowanie aplikacji PWA.

Więcej informacji znajdziesz w artykule Instalowanie paska adresu w progresywnych aplikacjach internetowych na komputerze.


Większa kontrola nad minipaskiem informacji o aplikacji PWA

Przykład paska informacji o dodaniu aplikacji AirHorner do ekranu głównego

Na urządzeniach mobilnych Chrome wyświetla minipasek informacji, gdy użytkownik po raz pierwszy odwiedza Twoją witrynę, jeśli spełnia ona kryteria instalacji progresywnych aplikacji internetowych. Otrzymaliśmy od Ciebie informację, że chcesz mieć możliwość wyłączenia minipaska z informacjami i zastąpienia go własną promocją na instalację.

Od wersji 76 Chrome wywołanie metody preventDefault() w zdarzeniu beforeinstallprompt spowoduje, że minipasek informacji przestanie 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, aby zaktualizować interfejs użytkownika, aby poinformować użytkowników, że aplikacja PWA może zostać zainstalowana. Zapoznaj się ze wzorcami promowania instalacji PWA, aby poznać nasze sprawdzone metody promowania instalacji progresywnych aplikacji internetowych.

Szybsze aktualizacje plików WebAPK

Gdy progresywna aplikacja internetowa jest instalowana na Androidzie, Chrome automatycznie wysyła żądanie pliku APK strony internetowej i instaluje go. Po zainstalowaniu aplikacji Chrome okresowo sprawdza, czy manifest aplikacji internetowej się zmienił, np. czy zostały zaktualizowane ikony, kolory lub nazwa aplikacji, aby sprawdzić, czy wymagana jest nowa wersja pliku WebAPK.

Od wersji 76 Chrome będzie sprawdzać plik manifestu częściej, czyli codziennie, a nie co trzy dni. Jeśli którakolwiek z kluczowych właściwości ulegnie zmianie, Chrome poprosi o nowy plik WebAPK i go zainstaluje, aby mieć pewność, że tytuł, ikony i inne właściwości są aktualne.

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

Tryb ciemny

Wiele systemów operacyjnych obsługuje tryb ciemny.

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

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

Tom opublikował świetny artykuł Hello darkness, my old friend na stronie web.dev, w którym znajdziesz wszystko, co musisz wiedzieć, oraz wskazówki dotyczące tworzenia arkuszy stylów, które będą obsługiwać zarówno tryb jasny, jak i ciemny.

I inne funkcje

To tylko kilka z wielu zmian w Chrome 76 dla deweloperów.

Promise.allSettled()

Osobiście bardzo się cieszę z Promise.allSettled(). Jest to podobne do Promise.all(), ale z tą różnicą, że przed 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).

Łatwiej odczytać bloby

Blobs są łatwiejsze do odczytania dzięki 3 nowym metodom: text(), arrayBuffer() i stream(). Oznacza to, że nie musimy już tworzyć opakowania dla czytnika plików.

// 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 Clipboard API (asynchronicznym)

Dodaliśmy też obsługę obrazów w interfejsie Asynchroniczny interfejs skrótów API, dzięki czemu można łatwo kopiować i wklejać obrazy za pomocą kodu.

Więcej informacji

To tylko niektóre z głównych nowości. Aby poznać więcej zmian w Chrome 76, kliknij linki poniżej.

Subskrybuj

Jeśli chcesz być na bieżąco z naszych filmów, zasubskrybuj kanał YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy opublikujemy nowy film.

Nazywam się Pete LePage i zaraz po wydaniu Chrome 77 opowiem Ci o nowościach w tej przeglądarce.