Nowości w Chrome 80

Właśnie wprowadzamy Chrome 80 i znajduje się w niej mnóstwo nowych rzeczy dla programistów.

Dostępne są te funkcje:

Jestem Pete LePage. Przyjrzyjmy się nowościom dla programistów w Chrome 80.

Instancje robocze modułu

Module Workers to nowy tryb dla pracowników sieciowych, który zapewnia ergonomię i wydajność modułów JavaScript. Konstruktor instancji roboczych akceptuje nową opcję {type: "module"}, która zmienia sposób wczytywania i wykonywania skryptów, aby pasowała do wartości <script type="module">

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

Przejście na moduły JavaScript umożliwi również korzystanie z dynamicznego importu w przypadku leniwego ładowania kodu bez blokowania wykonania instancji roboczej. Więcej informacji na ten temat znajdziesz w poście Jasona Threading the web with module workspace (Wątki w sieci z modułami roboczymi) na web.dev.

Opcjonalne tworzenie łańcuchów

Próby odczytania właściwości zagnieżdżonych w obiekcie mogą prowadzić do błędów, 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 zmieni 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 dodaje obsługę nowej funkcji JavaScript o nazwie opcjonalny łańcuch. W przypadku opcjonalnego łańcucha, jeśli jedna z właściwości zwraca wartość null lub niezdefiniowaną, zamiast wywoływać błąd, całość zwraca po prostu wartość niezdefiniowaną.

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

Więcej informacji znajdziesz w poście na blogu dotyczącym opcjonalnych łańcuchów na blogu dotyczącym wersji 8.

Zakończenie testowania origin

3 nowe funkcje przeszły z wersji próbnej origin na wersję stabilną, dzięki czemu można z nich korzystać w dowolnej witrynie bez tokena.

Okresowa synchronizacja w tle

Pierwsza to okresowa synchronizacja w tle, która okresowo synchronizuje dane w tle, dzięki czemu gdy użytkownik otworzy zainstalowaną aplikację PWA, będzie mieć zawsze aktualne dane.

Selektor kontaktów

Kolejna funkcja to Contact Picker API, interfejs API na żądanie, który pozwala użytkownikom wybierać wpisy z listy kontaktów i udostępniać witryny niektóre ich szczegóły.

Pozwala użytkownikom dzielić się tylko tym, co chcą i kiedy chcą. Ułatwia im kontakt ze znajomymi i rodziną oraz kontaktowanie się z nimi.

Na koniec metoda Pobierz zainstalowane aplikacje umożliwia aplikacji internetowej sprawdzenie, czy jest ona zainstalowana na urządzeniu użytkownika.

Jednym z najczęstszych przypadków użycia jest decydowanie, czy promować instalację PWA, jeśli aplikacja natywna nie jest zainstalowana. Możesz też chcieć wyłączyć niektóre funkcje jednej aplikacji, jeśli udostępnia ona inne funkcje.

Nowe wersje próbne origin

Interfejs Content Index API

Jak poinformować użytkowników o treściach przechowywanych w pamięci podręcznej aplikacji PWA? Tu jest problem z odkrywaniem. Czy będą wiedzieli, że mają otworzyć aplikację? A jakie treści są dostępne?

Interfejs Content Crawl API to nowa wersja próbna origin, która umożliwia dodawanie adresów URL i metadanych treści dostępnych offline do indeksu lokalnego, utrzymywanego przez przeglądarkę i łatwo widocznych 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 coś dodać do indeksu, muszę pobrać rejestrację skryptu service worker, wywołać metodę index.add i podać metadane dotyczące treści.

Gdy indeks zostanie wypełniony, pojawi się on w osobnym obszarze strony Pobrane pliki w Chrome na Androida. Dokładne informacje znajdziesz w poście Jeffa (w języku angielskim) na temat indeksowania stron internetowych dostępnych w trybie offline przy użyciu interfejsu Content Crawl API (w języku angielskim).

Wyzwalacze powiadomień

Powiadomienia to kluczowy element wielu aplikacji. Są one jednak tak niezawodne, jak sieć, z którą masz połączenie. W większości przypadków się to sprawdza, ale czasami może się psuć. Jeśli na przykład przypomnienie w kalendarzu nie dotrze do powiadomienia o ważnym wydarzeniu w trybie samolotowym, możesz przegapić to wydarzenie.

Wyzwalacze powiadomień umożliwiają zaplanowanie powiadomień z wyprzedzeniem, dzięki czemu system operacyjny dostarczy je w odpowiednim momencie, nawet jeśli nie ma połączenia z siecią lub urządzenie działa 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ć wysłanie powiadomienia, wywołaj showNotification w rejestracji skryptu service worker. W opcjach powiadomień dodaj właściwość showTrigger z TimestampTrigger. Następnie, gdy nadejdzie odpowiednia godzina, przeglądarka pokaże powiadomienie.

Testowanie origin będzie miało potrwać do Chrome 83. Szczegółowe informacje znajdziesz w poście Toma na temat reguł powiadomień na web.dev.

Testowanie innych origin

W Chrome 80 rozpocznie się też kilka innych wersji próbnych origin:

  • Numer seryjny sieci
  • Możliwość rejestrowania aplikacji PWA jako modułów obsługi plików
  • Nowe właściwości selektora kontaktów

Sprawdź pełną listę funkcji w testach origin.

oraz inne informacje.

Oczywiście, to jeszcze nie wszystko.

  • Możesz teraz tworzyć bezpośrednie linki do fragmentów tekstu na stronie za pomocą właściwości #:~:text=something. Chrome przewinie się do pierwszego wystąpienia danego fragmentu tekstu i je podświetli. na przykład https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • Ustawienie display: minimal-ui w komputerowej aplikacji PWA dodaje na pasku tytułu zainstalowanej aplikacji PWA przycisk Wstecz i Załaduj ponownie.
  • Chrome obsługuje teraz korzystanie z obrazów SVG jako favikon.

Więcej informacji

To tylko niektóre z najważniejszych kwestii. Kliknij poniższe linki, aby dowiedzieć się więcej o zmianach w Chrome 80.

Subskrybuj

Jeśli chcesz być na bieżąco z naszymi filmami, zasubskrybuj kanał w YouTube dla deweloperów Chrome, aby otrzymywać e-maile z powiadomieniami o każdej publikacji nowego filmu.

Jestem Pete LePage i jak tylko pojawi się Chrome 81, dam Ci znać, co nowego w Chrome.