Nowości w Chrome 80

Pete LePage

Wdrażamy Chrome 80, w którym czeka na Ciebie mnóstwo nowych funkcji dla programistów!

Dostępne są takie opcje jak:

Jestem Pete LePage. Zobaczmy, co dla programistów w Chrome 80.

Instancje robocze modułu

Moduły robocze, nowy tryb dla pracowników internetowych – z ergonomią są już dostępne korzyści w zakresie wydajności modułów JavaScript. Pracownik konstruktor akceptuje nową opcję {type: "module"}, która zmienia sposób skrypty są wczytywane i wykonywane, aby dopasować je do <script type="module">

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

Przejście do modułów JavaScript umożliwia też skorzystanie z dynamicznego importu leniwe ładowanie kodu bez blokowania wykonywania instancji roboczej. Wymelduj się Post Jasona Podział sieci na wątki z włączoną obsługą modułów web.dev.

Opcjonalne tworzenie łańcuchów

Próba odczytu właściwości głęboko zagnieżdżonych w obiekcie może być podatna na błędy, Zwłaszcza wtedy, gdy jest ryzyko, że coś nie zostanie ocenione.

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

Sprawdzanie każdej wartości przed kontynuacją pozwala z łatwością zmienić się w zagnieżdżony typ 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 tworzenie łańcuchów. W przypadku opcjonalnego łańcucha, jeśli jedna z właściwości zwraca wartość null, czyli niezdefiniowaną, zamiast zgłaszać błąd, wszystko zwraca po prostu niezdefiniowane wartości.

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

Zapoznaj się z artykułem o opcjonalnym tworzeniu łańcuszków. post na blogu na temat wersji 8, aby poznać wszystkie szczegóły!

Przejście na wersję próbną origin

Dostępne są 3 nowe funkcje, które przeszły z wersji próbnej origin na stabilną: dzięki czemu można ich używać w dowolnej witrynie bez użycia tokena.

Okresowa synchronizacja w tle

Zacznijmy od okresowej synchronizacji w tle, okresowo synchronizuje dane w tle, dzięki czemu użytkownik uruchomi zainstalowaną aplikację PWA, zawsze będzie mieć najnowsze dane.

Selektor kontaktów

Kolejnym narzędziem jest Contact Picker API, interfejs API na żądanie, który umożliwia użytkownikom wybieranie wpisów z listy kontaktów; i udostępniać witrynie ograniczone informacje na temat wybranych wpisów.

Umożliwia użytkownikom udostępnianie tylko tego, co chcą i kiedy chcą. W ten sposób użytkownicy mogą łatwiej komunikować się ze znajomymi i rodziną.

I wreszcie – Instalowanie powiązanych aplikacji pozwala aplikacji internetowej sprawdzić, czy aplikacja natywna jest zainstalowana urządzenia.

Jednym z najczęstszych zastosowań jest podjęcie decyzji, czy promować zainstaluj PWA, jeśli nie masz zainstalowanej aplikacji natywnej. Możesz też chcesz wyłączyć niektóre funkcje jednej aplikacji, jeśli udostępnia je druga aplikacja.

Nowe wersje próbne origin

Interfejs API indeksowania treści

Jak poinformować użytkowników o treści przechowywanej w pamięci podręcznej aplikacji PWA? Jest tutaj występuje problem. Czy będą wiedzieć, że powinni otworzyć Twoją aplikację? Albo jakie treści dostępny?

Interfejs Content Indexing API to nowa wersja testowa origin, która umożliwia dodawanie adresów URL do lokalnego indeksu, utrzymywany przez i łatwo widoczne 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ę skryptu service worker, a następnie wywołaj index.add i podaj metadane treści.

Po zapełnieniu indeksu wyświetla się on w specjalnym obszarze Chrome Strona Pobrane pliki na Androida. Przeczytaj post Jeffa na temat indeksowania stron dostosowanych do trybu offline za pomocą interfejsu Content index API. na stronie web.dev.

Wyzwalacze powiadomień

Powiadomienia to kluczowa część wielu aplikacji. Powiadomienia push są jednak tak niezawodne jak sieć, z którą masz połączenie. W większości przypadków czasami może dojść do jego uszkodzenia. Na przykład w przypadku przypomnienia w kalendarzu, powiadomienia nie dzieje się nic ważnego, bo jesteś w samolocie, możesz przegapić wydarzenie.

Reguły powiadomień umożliwiają zaplanowanie powiadomień z wyprzedzeniem, system operacyjny wyświetla powiadomienie we właściwym czasie, nawet jeśli brak 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ć powiadomienie, zadzwoń pod numer showNotification przy użyciu mechanizmu Service Worker rejestracji. W opcjach powiadomień dodaj właściwość showTrigger z atrybutem TimestampTrigger Następnie, gdy nadejdzie godzina, przeglądarka wyświetli powiadomienia.

Testowanie origin ma się zakończyć w Chrome 83, więc Wyzwalacze powiadomień – post na stronie web.dev .

Inne wersje próbne origin

W Chrome 80 dostępnych jest kilka innych wersji próbnych origin:

  • Sieciowy numer seryjny
  • 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 dostępnych w ramach testowania origin.

I nie tylko

Oczywiście ich też jest znacznie więcej.

  • Możesz teraz dodawać bezpośrednie linki do fragmentów tekstu na stronie za pomocą #:~:text=something Chrome przewinie do pierwszego wystąpienia i podświetli danego fragmentu. Na przykład https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • Ustawienie aplikacji display: minimal-ui na progresywną aplikację internetową na komputerze powoduje dodanie powtórzenia i załadowanie strony ponownie na pasku tytułu zainstalowanej aplikacji PWA.
  • Chrome obsługuje teraz używanie obrazów SVG jako favikon.

Więcej informacji

To tylko niektóre z najważniejszych informacji. Przejrzyj te linki: dodatkowych zmian w Chrome 80.

Subskrybuj

Chcesz być na bieżąco z naszymi filmami, to zasubskrybuj na naszym kanale Chrome Developers w YouTube, a gdy będziemy mogli opublikować nowy film, otrzymasz e-maila z powiadomieniem.

Jestem Pete LePage. Gdy tylko Chrome 81 się ukaże, opowie o nowościach w Chrome.