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.
• Wprowadzamy obsługę progresywnych aplikacji internetowych na komputerach Mac, dzięki czemu wszystkie platformy komputerowe i mobilne będą obsługiwać PWA. Ułatwi to tworzenie instalowanych aplikacji dostarczanych przez internet.

A to nie wszystko – to tylko część.

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 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 umożliwiają instalację i działanie jak aplikacje, a także są tworzone i dostarczane 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 z menu kontekstowego Chrome lub możesz 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 różni się niczym. 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ą nowej 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 podpisany wymian, może bezpiecznie wyświetlić Twój adres URL na pasku adresu, ponieważ podpis w wymarze 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 o tym, jak zacząć, znajdziesz w poście Signed HTTP Exchanges (tylko w języku angielskim) na blogu Kinuko.

Konstrukcyjne arkusze stylów

Skompilowane arkuszy stylów, nowość w Chrome 73, 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 błyski niesformatowanych treści. Dzięki skompilowanym arkuszom stylów można definiować i przygotowywać wspólne style CSS, a następnie stosować je do wielu klonów lub dokumentu bez dublowania.

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 inne funkcje

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 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 74 opowiem Ci o nowościach w tej przeglądarce.