Nowości w Chrome 73

Pete LePage

W Chrome 73 dodaliśmy obsługę:

• ułatwić tworzenie treści przenośnych za pomocą podpisanych wymian HTTP;
• Dynamiczna zmiana stylów staje się znacznie łatwiejsza dzięki składanym arkuszom stylów.
• Wsparcie dla progresywnych aplikacji internetowych jest dostępne na komputerach Mac, co oznacza, że PWA są obsługiwane na wszystkich platformach komputerowych i mobilnych, co ułatwia tworzenie instalowanych aplikacji dostarczanych przez internet.

A to nie wszystko – to dopiero początek.

Mam na imię Pete LePage. Zobacz, co nowego w Chrome 73 dla deweloperów.

Historia zmian

To tylko niektóre z najważniejszych zmian. Aby poznać pozostałe, kliknij linki poniżej.

• Lista zmian w repozytorium kodu źródłowego Chromium
• Aktualizacje ChromeStatus.com dotyczące Chrome 73
• Wycofanie i usunięcie funkcji w Chrome 73
• Aktualizacje dotyczące multimediów w Chrome 73
• Nowości w JavaScript w Chrome 73

Progresywne aplikacje internetowe działają wszędzie

Progresywne aplikacje internetowe zapewniają użytkownikom możliwość instalacji i korzystania z aplikacji, umożliwiając instalację bezpośrednio w internecie. W Chrome 73 dodaliśmy obsługę systemu macOS, dzięki czemu progresywne aplikacje internetowe są dostępne na wszystkich platformach komputerowych (Mac, Windows, ChromeOS i Linux), a także na urządzeniach mobilnych, co upraszcza tworzenie aplikacji internetowych.

Progresywna aplikacja internetowa jest szybka i niezawodna – zawsze wczytuje się i działa z tą samą szybkością niezależnie od połączenia z internetem. Zapewniają bogate, angażujące wrażenia dzięki nowoczesnym funkcjom internetowym, które w pełni wykorzystują możliwości urządzenia.

Użytkownicy mogą instalować PWA w menu kontekstowym Chrome. Możesz też bezpośrednio promować proces instalacji za pomocą zdarzenia beforeinstallprompt. Po zainstalowaniu PWA integruje się z systemem operacyjnym, aby zachowywać się jak natywny: użytkownicy mogą znaleźć i uruchomić ją w tym samym miejscu co inne aplikacje, działa ona w własnym oknie, pojawia się w przełączniku zadań, jej ikona może wyświetlać plakietki powiadomień itp.

Chcemy wyrównać różnice w możliwościach między aplikacjami internetowymi i natywnymi, aby zapewnić solidne podstawy dla nowoczesnych aplikacji internetowych. Pracujemy nad dodaniem nowych funkcji platformy internetowej, które zapewnią Ci dostęp do takich elementów, jak system plików, blokada ekranu, plakietka informacyjna w pasku adresu, która informuje użytkowników, że można zainstalować PWA, instalacja zasad dla firm oraz wiele innych.

Jeśli już tworzysz aplikację PWA na urządzenia mobilne, tworzenie aplikacji PWA na komputery nie będzie się różnić. Jeśli korzystasz z elastycznego projektowania stron, prawdopodobnie nie musisz nic więcej robić. Twoja pojedyncza baza kodu będzie działać na komputerach i urządzeniach mobilnych. Jeśli dopiero zaczynasz korzystać z PWAs, zdziwi Cię, jak łatwo je tworzyć.

1. Dodawanie pliku manifestu
2. Tworzenie zestawu ikon
3. Dodawanie szablonu usługi roboczej

Następnie kontynuuj.

Podpisane wymiany HTTP

Podpisana wymiana HTTP (SXG), która jest częścią rozwijającej się technologii o nazwie pakiety internetowe, jest teraz dostępna w Chrome 73. Umożliwia ona tworzenie „przenośnych” treści, które mogą być dostarczane przez inne strony. Co ważne, zachowuje integralność i informacje o źródle pierwotnej witryny.

Dzięki temu źródło treści jest odseparowane od serwera, który je dostarcza, ale ponieważ są one podpisane, wygląda to tak, jakby pochodziły z Twojego serwera. Gdy przeglądarka wczyta ten podpisany wymiar, może bezpiecznie wyświetlić Twój adres URL na pasku adresu, ponieważ podpis w wymiarze wskazuje, że treści pochodzą z Twojego źródła.

Umożliwia ona szybsze dostarczanie treści użytkownikom, co pozwala korzystać z zalet CDN bez konieczności rezygnacji z kontroli nad kluczem prywatnym certyfikatu. Zespół AMP planuje użyć podpisanych wymian HTTP na stronach wyników wyszukiwania Google, aby ulepszyć adresy URL AMP i przyspieszyć kliknięcia w wynikach wyszukiwania.

Więcej informacji na temat tego, jak zacząć, znajdziesz w poście Signed HTTP Exchanges (po angielsku) Kinuko.

Konstrukcyjne arkusze stylów

Nowe w Chrome 73 skompilowane arkuszy stylów to nowy sposób tworzenia i rozpowszechniania stylów wielokrotnego użytku, co jest szczególnie ważne w przypadku korzystania z Shadow DOM.

Tworzenie arkuszy stylów za pomocą JavaScriptu było zawsze możliwe. Utwórz element <style> za pomocą funkcji document.createElement('style'). Następnie uzyskaj dostęp do właściwości arkusza, aby uzyskać odwołanie do instancji CSSStyleSheet, i ustaw styl.

Stosowanie tej metody prowadzi zwykle do nadmiernego rozrostu arkuszy stylów. Co gorsza, powoduje ono wyświetlanie treści bez stylów. Dzięki skompilowanym arkuszom stylów można definiować i przygotowywać wspólne style CSS, a potem stosować je do wielu zduplikowanych rdzeni lub dokumentu bez duplikowania.

Zmiany w udostępnionej CSSStyleSheet są stosowane do wszystkich korzeni, w których została ona zaadoptowana. Zaadoptowanie arkusza stylów jest szybkie i synchroniczne po załadowaniu arkusza.

Rozpoczęcie pracy jest proste. Utwórz nowy egzemplarz klasy CSSStyleSheet, a następnie użyj metody replace lub replaceSync, aby zaktualizować reguły arkusza stylów.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// this throws an exception:
try {
  sheet.replaceSync('@import url("styles.css")');
} catch (err) {
  console.error(err); // imports are not allowed
}

// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

Więcej informacji i przykładów kodu znajdziesz w artykule Konstruowanie arkuszy stylów: płynne, wielokrotnego użytku style Jasona Millera.

I wiele więcej!

To tylko kilka z wielu zmian w Chrome 73 dla deweloperów.

• matchAll() to nowa metoda dopasowywania wyrażeń regularnych do prototypu ciągu znaków, która zwraca tablicę zawierającą pełne dopasowania.
• Element <link> obsługuje teraz właściwości imagesrcset i imagesizes, które odpowiadają atrybutom srcset i sizes elementu HTMLImageElement.
• Implementacja promienia zamglenia cienia w Blink jest teraz zgodna z Firefoxem i Safari.
• Tryb ciemny interfejsu Chrome jest teraz obsługiwany na komputerach Mac, a w przypadku systemu Windows jest już w drodze. Dodatkowo pracujemy nad zapytaniem o media CSS: prefers-color-scheme, które może służyć do wykrywania, czy użytkownik poprosił system o użycie jasnego lub ciemnego motywu. Błąd śledzenia to Dodawanie obsługi funkcji multimedialnej CSS prefers-color-scheme w Chrome i Firefox.

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 tylko opublikujemy nowy film.

Nazywam się Pete LePage i zaraz po wydaniu Chrome 74 opowiem Ci o nowościach w tej przeglądarce.