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 nowości 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 JavaScripta 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 (Przeglądanie stron internetowych za pomocą modułów workerów) na stronie web.dev.

Łańcuchowanie opcjonalne

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 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 na wersję płatną

Trzy nowe funkcje zostały przeniesione 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 aplikację 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 pozycji z listy kontaktów i udostępnianie ograniczonych informacji o wybranych pozycjach stronie internetowej.

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

Na koniec metoda Get Installed Related Apps 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 natywnej aplikacji nie ma zainstalowanej. 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 próba pochodzenia, która umożliwia dodawanie adresów URL i metadanych treści dostępnych w trybie 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 coś 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 wysłać 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 wersję Chrome 83, więc aby uzyskać więcej informacji, przeczytaj artykuł Toma Notification Triggers (po angielsku) na stronie web.dev.

Inne wersje próbne

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

  • Web Serial
  • możliwość rejestrowania 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 #:~: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 przypadku aplikacji PWA na komputery dodaje do paska tytułu zainstalowanej aplikacji PWA przycisk Wstecz i Odśwież.
  • Chrome obsługuje teraz używanie obrazów SVG jako ikon aplikacji.

Więcej informacji

Dotyczy to tylko niektórych kluczowych informacji. 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 nasz kanał w 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.