Nowości w Chrome 80

Pete LePage

W tej chwili wprowadzamy Chrome 80, w którym jest mnóstwo nowych funkcji dla programistów.

Obsługiwane są:

Nazywam się Pete LePage. Zapraszam do obejrzenia, co nowego dla deweloperów w Chrome 80.

Moduły

Dostępny jest już nowy tryb skryptów web worker, który zapewnia ergonomię i wydajność skryptów JavaScript. Konstruktor Worker przyjmuje nową opcję {type: "module"}, która zmienia sposób wczytywania i wykonywania skryptów, aby pasował do <script type="module">

const worker = new Worker('worker.js', {
  type: 'module'
});

Przejście na moduły JavaScriptu umożliwia też używanie importu dynamicznego w przypadku kodu z opóźnionym wczytywaniem bez blokowania wykonania zadania. Więcej informacji znajdziesz w artykule Jasona Threading the web with module workers (przetwarzanie wątków w sieci za pomocą modułów workerów) na stronie web.dev.

Opcjonalne łańcuchowanie

Próba odczytania właściwości zagnieżdżonych głęboko w obiekcie może powodować błędy, zwłaszcza jeśli istnieje ryzyko, że coś nie zostanie ocenione.

// Error prone-version, could throw.
const nameLength = db.user.name.length;

Sprawdzanie każdej wartości przed kontynuacją łatwo zamienia się w głęboko zagnieżdżoną instrukcję if lub wymaga użycia bloku try / catch.

// Less error-prone, but harder to read.
let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

Chrome 80 obsługuje nową funkcję JavaScriptu o nazwie opcjonalne łańcuchowanie. W przypadku łańcuchowania opcjonalnego, jeśli jedna z właściwości zwróci wartość null lub undefined, zamiast zgłaszać błąd, całość zwróci wartość undefined.

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length;

Więcej informacji znajdziesz w poście na blogu v8 na temat opcjonalnego łańcuchowania.

Przejście z wersji próbnej Origin

Trzy nowe funkcje przeszły z wersji próbnej do stabilnej, dzięki czemu można ich używać w dowolnej witrynie bez tokena.

Okresowa synchronizacja w tle

Po pierwsze, okresowa synchronizacja w tle okresowo synchronizuje dane w tle, dzięki czemu użytkownik, który otworzy zainstalowaną przez siebie PWA, zawsze będzie miał dostęp do najnowszych danych.

Selektor kontaktów

Kolejnym interfejsem jest Contact Picker API, czyli interfejs API na żądanie, który umożliwia użytkownikom wybieranie wpisów z ich listy kontaktów i udostępnianie ograniczonych informacji o wybranych wpisach witrynie.

Umożliwia ona użytkownikom udostępnianie tylko tego, co chcą i kiedy chcą, a także ułatwia im kontakt z rodziną i znajomymi.

Na koniec metoda Pobierz zainstalowane powiązane aplikacje pozwala aplikacji internetowej sprawdzić, czy na urządzeniu użytkownika jest zainstalowana natywna aplikacja.

Jednym z najczęstszych przypadków użycia jest podejmowanie decyzji o tym, czy promować instalację PWA, jeśli natywna aplikacja nie jest zainstalowana. Możesz też chcieć wyłączyć niektóre funkcje jednej aplikacji, jeśli są one udostępniane przez inną aplikację.

Nowe wersje próbne origin

Content Indexing API

Jak informować użytkowników o treściach zapisanych w pamięci podręcznej w aplikacji internetowej? Wystąpił problem z odkrywaniem. Czy będą wiedzieć, jak otworzyć Twoją aplikację? Jakie treści są dostępne?

Interfejs Content Indexing API to nowa wersja próbna, która umożliwia dodawanie adresów URL i metadanych treści dostępnych offline do lokalnego indeksu obsługiwanego przez przeglądarkę i łatwo widocznego dla użytkownika.

const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

Aby dodać coś do indeksu, muszę uzyskać rejestrację usługi, a następnie wywołać funkcję index.add i podać metadane dotyczące treści.

Po wypełnieniu indeksu jest on wyświetlany w specjalnym obszarze na stronie Pobrane pliki w Chrome na Androida. Więcej informacji znajdziesz w artykule Jeffa na stronie web.dev Indeksowanie stron obsługujących tryb offline za pomocą interfejsu Content Indexing API.

Wyzwalacze powiadomień

Powiadomienia są kluczowym elementem wielu aplikacji. Powiadomienia push są jednak niezawodne tylko wtedy, gdy masz połączenie z siecią. W większości przypadków działa to dobrze, ale czasami się psuje. Jeśli na przykład przypomnienie w kalendarzu o ważnym wydarzeniu nie dotrze do Ciebie, ponieważ masz włączony tryb samolotowy, możesz nie zdążyć na to wydarzenie.

Dzięki nim możesz zaplanować wysyłanie powiadomień z wyprzedzeniem, aby system operacyjny mógł je wyświetlić we właściwym czasie – nawet jeśli nie ma połączenia z siecią lub urządzenie jest w trybie oszczędzania baterii.

const swReg = await navigator.serviceWorker.getRegistration();
swReg.showNotification(title, {
  tag: tag,
  body: "This notification was scheduled 30 seconds ago",
  showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
});

Aby zaplanować powiadomienie, wywołaj funkcję showNotification w rejestracji usługi. W opcjach powiadomienia dodaj właściwość showTrigger z wartością TimestampTrigger. Gdy nadejdzie odpowiedni czas, przeglądarka wyświetli powiadomienie.

Testowanie origin jest zaplanowane na Chrome 83, więc zapoznaj się z artykułem Notification Triggers (ang.) Tom'a na stronie web.dev, aby dowiedzieć się więcej.

Inne wersje próbne

W Chrome 80 rozpoczyna się kilka innych testów źródeł:

  • Web Serial
  • możliwość rejestrowania aplikacji internetowych na potrzeby PWA jako modułów obsługi plików.
  • Nowe właściwości selektora kontaktów

Pełną listę funkcji dostępnych w wersji próbnej origin znajdziesz

I nie tylko

Oczywiście jest ich znacznie więcej.

  • Teraz możesz tworzyć linki bezpośrednio do fragmentów tekstu na stronie, używając tagu #:~:text=something. Chrome przewinie do pierwszego wystąpienia tego fragmentu tekstu i je wyróżni. Na przykład https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • Ustawienie display: minimal-ui w PWA na komputery dodaje do paska tytułu zainstalowanej aplikacji przycisk Wstecz i Odśwież.
  • Chrome obsługuje teraz używanie obrazów SVG jako ikon aplikacji.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 80, 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 81 opowiem Ci o nowościach w tej przeglądarce.