Nowości w Chrome 76

Pete LePage

W Chrome 76 dodaliśmy obsługę:

Nazywam się Pete LePage i zapraszam do obejrzenia nowości w Chrome 76 dla deweloperów.

Przycisk instalacji w omniboksie PWA

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. Kliknięcie przycisku instalacji przez użytkownika przebiega tak samo jak wywołanie metody prompt() w zdarzeniu beforeinstallprompt. Pokazuje okno instalacji, dzięki czemu użytkownik może łatwo zainstalować aplikację PWA.

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


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 przy pierwszej wizycie użytkownika w witrynie Chrome wyświetla minipasek informacyjny, jeśli spełnia ona kryteria instalacji progresywnych aplikacji internetowych. Dotarły do nas informacje, że chcecie mieć możliwość zapobiegania pojawianiu się minipaska informacyjnego i w zamian chcecie stosować własną promocję instalacji.

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ć zalecane sprawdzone metody promowania instalowania 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 teraz tryb ciemny, czyli ciemny motyw.

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 mi się podoba 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).

Odczytywanie blobów jest łatwiejsze

Identyfikatory Blob są bardziej czytelne dzięki 3 nowym metodom: text(), arrayBuffer() i stream(). Oznacza to, że nie musimy już tworzyć otoki 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 najważniejszych informacji. Pod poniższymi linkami znajdziesz dodatkowe informacje o zmianach w Chrome 76.

Subskrybuj

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

Nazywam się Pete LePage i zaraz po wydaniu Chrome 77 opowiem Ci, co nowego w tej wersji przeglądarki.