Nowości w Chrome 73

Pete LePage

Twitter GitHub Glitch Mastodon strona główna

W Chrome 73 dodaliśmy obsługę tych funkcji:

• Tworzenie zawartości przenośnej jest łatwiejsze dzięki technologii Signed HTTP Exchange.
• Dynamicznie zmienianie stylów jest dużo łatwiejsze dzięki tworzeniu arkuszy stylów.
• Wprowadzamy obsługę progresywnych aplikacji internetowych na komputery Mac, zapewniając obsługę aplikacji PWA na wszystkich platformach stacjonarnych i mobilnych, co ułatwia tworzenie aplikacji instalowanych przez internet.

A jest to wiele innych!

Nazywam się Pete LePage. Sprawdźmy, co nowego dla deweloperów w Chrome 73.

Historia zmian

To tylko niektóre z najważniejszych zmian. Aby poznać dodatkowe zmiany w Chrome 73, kliknij linki poniżej.

• Lista zmian repozytorium źródłowego Chromium
• Aktualizacje ChromeStatus.com dla Chrome 73
• Wycofywanie i usuwanie Chrome 73
• Aktualizacje multimediów w Chrome 73
• Nowości w JavaScript w Chrome 73

Progresywne aplikacje internetowe działają wszędzie

Progresywne aplikacje internetowe są tworzone i dostarczane bezpośrednio przez internet, podobnie jak aplikacje. W Chrome 73 dodaliśmy obsługę systemu macOS, zapewniając obsługę progresywnych aplikacji internetowych na wszystkich platformach komputerowych (Mac, Windows, ChromeOS i Linux oraz urządzeniach mobilnych), co upraszcza tworzenie aplikacji internetowych.

Progresywna aplikacja internetowa jest szybka i niezawodna. Wczytywanie się i działanie zawsze z taką samą szybkością niezależnie od połączenia sieciowego. Zapewniają atrakcyjne i atrakcyjne treści dzięki nowoczesnym funkcjom internetowym, które w pełni wykorzystują możliwości urządzeń.

Użytkownicy mogą zainstalować PWA z menu kontekstowego Chrome lub możesz bezpośrednio promować proces instalacji za pomocą zdarzenia beforeinstallprompt. Zainstalowana aplikacja PWA integruje się z systemem operacyjnym i działa jak aplikacje natywna: użytkownicy znajdują je i uruchamiają w tym samym miejscu co inne aplikacje, uruchamiają się we własnym oknie, pojawiają się w przełączniku zadań, mają widoczne plakietki powiadomień itd.

Chcemy wypełnić lukę w zakresie możliwości między wersją internetową a natywną, aby stworzyć solidne podstawy dla nowoczesnych aplikacji dostępnych w internecie. Pracujemy nad dodaniem nowych funkcji platform internetowych, które zapewnią dostęp do systemu plików, blokady uśpienia i dodania plakietki trybu nieaktywnego do paska adresu, aby użytkownicy wiedzieli, że można zainstalować PWA, zainstalować zasady w firmach i wiele innych elementów.

Jeśli tworzysz już mobilną aplikację PWA na komputery, progresywna aplikacja internetowa niczym się nie różni. Jeśli korzystasz z elastycznego projektowania stron, z pewnością już teraz możesz z nich korzystać. Jedna baza kodu działa na komputerach i urządzeniach mobilnych. Jeśli dopiero zaczynasz korzystać z PWA, zaskoczy Cię, jak łatwo można je stworzyć.

1. Dodaj plik manifestu
2. Tworzenie zestawu ikon
3. Dodaj powtarzalny skrypt service worker

a potem postępuj zgodnie z instrukcjami.

Podpisane wymiany HTTP

Signed HTTP Exchange (SXG) – część nowej technologii nazywanej pakietami internetowymi jest teraz dostępna w Chrome 73. Podpisana wymiana HTTP pozwala tworzyć „przenośne” treści, które mogą być dostarczane przez inne osoby. Jest to kluczowy aspekt, który pozwala zachować integralność i informacje o autorze witryny.

Powoduje to oddzielenie źródła treści od serwera, który ją dostarcza, ale ponieważ jest podpisany, sprawia, że jest ona przesyłana z Twojego serwera. Gdy przeglądarka wczytuje tę platformę Signed Exchange, może bezpiecznie wyświetlać adres URL na pasku adresu, ponieważ podpis w programie wymiany wskazuje, że treść pochodzi z Twojego źródła.

Podpisane wymiany HTTP pozwalają na szybsze dostarczanie treści do użytkowników. Pozwala to korzystać z zalet sieci CDN bez konieczności utracenia kontroli nad kluczem prywatnym certyfikatu. Zespół AMP planuje wykorzystać podpisane giełdy HTTP na stronach wyników wyszukiwania Google, aby ulepszyć adresy URL AMP i przyspieszyć kliknięcia w wynikach wyszukiwania.

Informacje o tym, jak zacząć, znajdziesz w poście Signed HTTP Exchanges na kanale Kinuko.

Tworzenie arkuszy stylów

Nowość w Chrome 73 konstrukcji arkuszy stylów pozwala tworzyć i rozpowszechniać style wielokrotnego użytku, co jest szczególnie ważne w przypadku korzystania z modelu Shadow DOM.

Tworzenie arkuszy stylów zawsze było możliwe w języku JavaScript. Utwórz element <style> za pomocą właściwości document.createElement('style'). Następnie przejdź do właściwości arkusza, aby uzyskać odwołanie do bazowej instancji CSSStyleSheet i ustawić styl.

Stosowanie tej metody powoduje zwykle nawinięcie arkusza stylów. Co gorsza, to wszystko sprawia, że treści wyglądają nietypowo. Zbudowane arkusze stylów pozwalają na definiowanie i przygotowywanie wspólnych stylów CSS, a następnie stosowanie ich do wielu elementów źródłowych lub dokumentu w prosty sposób i bez duplikowania.

Zmiany w udostępnianym obiekcie CSSStyleSheet są stosowane do wszystkich elementów głównych, w których jest przyjęty, a w przypadku arkusza stylów można szybko i synchronizować go po jego wczytaniu.

Pierwsze kroki są proste. Utwórz nową instancję obiektu CSSStyleSheet, a następnie użyj zasady 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 szczegółów i przykłady kodu znajdziesz w poście na kanale Jasona Millera Constructable StyleSheet: Essentials wielokrotnego użytku.

…i wiele innych.

To tylko kilka ze zmian wprowadzonych w Chrome 73 dla deweloperów, oczywiście jest ich znacznie więcej.

• matchAll() to nowa metoda dopasowywania wyrażeń regularnych na prototypie 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.
• Promień rozmycia cienia w aplikacji Blink jest teraz zgodny z promieniem rozmycia cienia w przeglądarkach Firefox i Safari.
• Tryb ciemny w interfejsie Chrome jest teraz obsługiwany na komputerach Mac, a wkrótce wprowadzimy obsługę systemu Windows. Dostępna jest też praca nad zapytaniem o media CSS: prefers-color-scheme, którego można użyć do wykrycia, czy użytkownik poprosił system o użycie jasnego czy ciemnego motywu kolorystycznego. Błąd śledzenia w tym przypadku to Dodano obsługę funkcji multimediów CSS prefers-color-scheme w systemach Chrome i Firefox.

Zasubskrybuj

Jeśli chcesz być na bieżąco z naszymi filmami, zasubskrybuj kanał dla deweloperów Chrome w YouTube, a za każdym razem, gdy opublikujemy nowy film, otrzymasz e-maila z powiadomieniem.

Nazywam się Pete LePage i jak tylko pojawi się Chrome 74, zajmę się tym, co nowego w Chrome.