Nowości w Chrome 73

Pete LePage

W Chrome 73 dodaliśmy obsługę:

I wiele innych.

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

Historia zmian

To tylko niektóre z najważniejszych informacji. Pod poniższymi linkami znajdziesz dodatkowe informacje o zmianach 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ę 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 na platformie 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 o możliwości zainstalowania PWA, czy instalacja zasad dla firm.

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 projektowania responsywnego, prawdopodobnie możesz też zacząć korzystać z tej funkcji. 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. Dodaj plik 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.

Podpisana wymiana: istota

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.

Podpisane giełdy HTTP umożliwiają szybsze dostarczanie treści użytkownikom, co pozwala korzystać z zalet sieci CDN bez konieczności rezygnowania z kontroli nad kluczem prywatnym certyfikatu. Zespół AMP planuje używać podpisanych wymian HTTP na stronach z wynikami wyszukiwania Google, aby poprawić 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 (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.

Schemat przygotowania i zastosowania CSS

Stosowanie tej metody prowadzi zwykle do nadmiernego rozrostu arkuszy stylów. Co gorsza, pojawia się błysk niesformatowanych treści. Dzięki skonfigurowanym 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 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 Dodaj obsługę 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 deweloperó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, co nowego w Chrome.