Nowości w Chrome 93

Pete LePage

Oto, co musisz wiedzieć na ten temat:

  • Teraz możesz wczytywać arkusze stylów CSS za pomocą instrukcji import, tak jak moduły JavaScript.
  • Zainstalowane aplikacje PWA mogą rejestrować się jako moduły obsługi adresów URL, dzięki czemu użytkownicy mogą od razu przejść do aplikacji PWA.
  • Interfejs Multi-Screen Window Placement API został zaktualizowany na podstawie Twoich opinii i rozpoczyna się jego druga wersja próbna origin.
  • W dniach 6–7 października odbędzie się PWA Summit.
  • A to nie wszystko.

Nazywam się Pete LePage, pracuję i nagrywam z domu. Przejdźmy do nowości dla deweloperów w Chrome 93.

Skrypty modułów CSS

Arkusze stylów CSS możesz teraz wczytywać za pomocą instrukcji import, podobnie jak moduły JavaScript. Arkusze stylów można następnie zastosować do dokumentu lub elementów shadow root w taki sam sposób jak arkusze stylów, które można utworzyć.

Nowa funkcja skryptów modułów CSS doskonale sprawdza się w przypadku elementów niestandardowych. W przeciwieństwie do innych sposobów stosowania CSS z poziomu JavaScriptu nie trzeba tworzyć elementów ani manipulować ciągami znaków JavaScriptu w tekście CSS.

Aby go użyć, zaimportuj arkusz stylów za pomocą assert {type: 'css'}, a następnie zastosuj go do document lub shadowRoot, wywołując adoptedStyleSheets.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

Pamiętaj jednak, że jeśli nie dodasz assert, plik zostanie potraktowany jako JavaScript i nie będzie działać.

Szczegółowe informacje znajdziesz w artykule Używanie skryptów modułów CSS do importowania arkuszy stylów na stronie web.dev.

Multi-Screen Window Placement API

W przypadku niektórych aplikacji ważną funkcją jest otwieranie nowych okien i umieszczanie ich w określonych miejscach lub na określonych wyświetlaczach. Na przykład podczas prezentacji w Prezentacjach chcę, aby slajdy były wyświetlane na pełnym ekranie na głównym wyświetlaczu, a notatki na drugim wyświetlaczu.

Interfejs Multi-Screen Window Placement API umożliwia wyliczanie wyświetlaczy podłączonych do komputera użytkownika i umieszczanie okien na określonych ekranach. To już druga wersja próbna origin, w której wprowadziliśmy szereg zmian na podstawie Waszych opinii.

Możesz szybko sprawdzić, czy do urządzenia jest podłączony więcej niż 1 ekran:

const isExtended = window.screen.isExtended;
// returns true/false

Jednak kluczowa funkcja znajduje się w window.getScreens(), który zawiera wszystkie szczegóły dotyczące podłączonych wyświetlaczy.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

Możesz na przykład określić ekran główny, a następnie użyć requestFullscreen(), aby wyświetlić na nim element.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

Umożliwia też nasłuchiwanie zmian, na przykład podłączenia lub odłączenia nowego wyświetlacza.

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

Aby dowiedzieć się więcej, przeczytaj artykuł Toma Zarządzanie kilkoma wyświetlaczami za pomocą interfejsu Multi-Screen Window Placement API na stronie web.dev.

Skrócony cykl wydawniczy

W marcu ogłosiliśmy, że planujemy skrócić cykl wydawania wersji i udostępniać nową wersję Chrome co 4 tygodnie.

Ten czas nadszedł i 21 września udostępnimy Chrome 94. Planowane daty wydania poszczególnych wersji znajdziesz w Kalendarzu Chrome.

Nowe funkcje PWA

Jeśli tworzysz progresywną aplikację internetową, warto sprawdzić 2 nowe wersje próbne origin.

Moduły obsługi adresów URL w aplikacjach PWA

Jeśli masz zainstalowaną aplikację PWA i klikniesz link do niej, prawdopodobnie chcesz, aby otworzyła się ona w aplikacji PWA, a nie w karcie przeglądarki.

Jeśli w pliku manifestu aplikacji internetowej określisz url_handlers i dodasz plik web-app-origin-association do katalogu .well-known/, możesz poinformować przeglądarkę, że jeśli użytkownik kliknie link do Twojej aplikacji PWA, powinna ona zostać otwarta w zainstalowanej aplikacji PWA.

Przykład url_handlers w pliku manifest.json:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

Przykładowy plik web-app-origin-association:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

Po przeprowadzeniu dodatkowej weryfikacji możesz nawet sprawić, że PWA będzie obsługiwać linki z innych źródeł, które należą do Ciebie.

Wszystkie szczegóły dotyczące testowania origin znajdziesz w artykule PWAs as URL Handlers (PWA jako moduły obsługi adresów URL) na stronie web.dev.

Nakładka z elementami sterującymi okna

Nakładka z elementami sterującymi okna rozszerza obszar klienta, aby obejmował całe okno, w tym pasek tytułu i przyciski sterujące oknem, takie jak przyciski zamykania, maksymalizacji i minimalizacji.

Dzięki tej funkcji zainstalowana aplikacja PWA może wyglądać bardziej jak inne aplikacje instalowane.

Więcej informacji o wersji próbnej origin znajdziesz w artykule Dostosowywanie nakładki z elementami sterującymi okna w pasku tytułu aplikacji PWA.

PWA Summit

W październiku odbędzie się PWA Summit. To bezpłatna konferencja online, której celem jest pomoc wszystkim w osiągnięciu sukcesu dzięki progresywnym aplikacjom internetowym. PWA Summit to efekt współpracy osób z kilku różnych firm zaangażowanych w tworzenie technologii PWA: Google, Intel, Microsoft i Samsung.

Jest tam mnóstwo świetnych wystąpień i treści. Więcej informacji i rejestrację znajdziesz na stronie PWASummit.org.

I wiele więcej!

Oczywiście jest ich znacznie więcej.

  • Flexbox i elementy flexbox obsługują teraz słowa kluczowe dotyczące wyrównania: start, end, self-start, self-end, left i right.
  • Interfejs API asynchronicznego schowka obsługuje teraz pliki SVG.
  • Atrybut media będzie uwzględniany podczas ustawiania meta theme-color, dzięki czemu możesz określić różne kolory motywu dla trybu jasnego i trybu ciemnego.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

Więcej informacji

To tylko niektóre z najważniejszych informacji. Więcej informacji o zmianach w Chrome 93 znajdziesz w linkach poniżej.

Zasubskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers na YouTube. Będziesz otrzymywać powiadomienia e-mail, gdy opublikujemy nowy film.

Nazywam się Pete LePage i gdy tylko Chrome 94 zostanie wydany, opowiem Ci o nowościach w tej wersji.