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 w przypadku modułów JavaScript.
• Zainstalowane PWA mogą rejestrować się jako moduły obsługi adresów URL, co umożliwia użytkownikom bezpośrednie przejście do aplikacji.
• Na podstawie opinii użytkowników zaktualizowaliśmy interfejs Multi-Screen Window Placement API i rozpoczęliśmy drugi okres próbny.
• 6–7 października odbędzie się szczyt PWA.
• I to nie wszystko .

Nazywam się Pete LePage i pracuję z domu. Zobaczmy, co nowego w Chrome 93 dla deweloperów.

Skrypty modułu CSS

Teraz możesz wczytywać arkusze stylów CSS za pomocą instrukcji import, tak jak w przypadku modułów JavaScript. Można je następnie zastosować do dokumentu lub katalogu zduplikowanych katalogów w taki sam sposób jak zwykłe szablony.

Nowa funkcja skryptów modułu CSS świetnie sprawdza się w przypadku elementów niestandardowych. W odróżnieniu od innych sposobów stosowania CSS w JavaScript nie trzeba tworzyć elementów ani manipulować ciągami znaków JavaScriptu w tekście CSS.

Aby z niej skorzystać, zaimportuj arkusz stylów za pomocą funkcji assert {type: 'css'}, a potem zastosuj go do elementu document lub shadowRoot, wywołując funkcję adoptedStyleSheets.

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

Uważaj, bo jeśli pominiesz znak assert, plik zostanie potraktowany jako JavaScript i nie będzie działać.

Więcej informacji znajdziesz w artykule Używanie skryptów modułu CSS do importowania arkuszy stylów na stronie web.dev.

Interfejs API Multi-Screen Window Placement

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

Interfejs API do umieszczania okien na wielu ekranach umożliwia zliczanie wyświetlaczy połączonych z urządzeniem użytkownika i rozmieszczanie okien na określonych ekranach. To już druga próba wprowadzenia tej funkcji, w której uwzględniliśmy wiele zmian zaproponowanych przez użytkowników.

Aby szybko sprawdzić, czy z urządzeniem jest połączonych więcej niż 1 ekran:

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

Główna funkcja znajduje się w window.getScreens(), gdzie znajdziesz 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 potem użyć funkcji 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ż wykrywanie 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 wieloma wyświetlaczami za pomocą interfejsu API dotyczącego umieszczania treści na wielu ekranach na stronie web.dev.

Skrócony cykl premierowy

W marcu ogłosiliśmy plany skrócenia cyklu wydawniczego i publikowania nowej wersji Chrome co 4 tygodnie.

Nadszedł ten czas. 21 września wyślemy Chrome 94. Planowane daty wydania poszczególnych wersji znajdziesz w Kalendarzu Chrome.

Nowe funkcje PWA

Jeśli tworzysz progresywną aplikację internetową, warto zapoznać się z 2 nowymi testami pochodzenia.

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

Uwaga: ta funkcja została wprowadzona jako próbna wersja w Chrome 92, ale opisuję ją teraz, ponieważ wcześniej nie było o niej mowy.

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

Jeśli w pliku manifestu aplikacji internetowej podasz wartość url_handlers i dodasz plik web-app-origin-association do katalogu .well-known/, poinformujesz przeglądarkę, że jeśli użytkownik kliknie link do Twojej aplikacji PWA, powinna ona otworzyć się w ramach 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 dodatkowej weryfikacji możesz nawet umożliwić swojej aplikacji na Progressive Web Apps obsługę linków z innych należących do Ciebie źródeł.

Wszystkie informacje o testach pochodzenia znajdziesz na stronie PWAs as URL Handlers na stronie web.dev.

Nakładka z elementami sterującymi okna

Nakładka z elementami sterującymi okna rozszerza obszar klienta, aby objąć 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 będzie wyglądać podobnie do innych zainstalowanych aplikacji.

Więcej informacji o testowaniu pochodzenia znajdziesz w artykule Dostosowanie nakładki z elementami sterującymi okna w pasku tytułu aplikacji PWA.

szczyt PWA,

W październiku odbędzie się zjazd PWA. To bezpłatna konferencja online, która pomoże Ci odnieść sukces w przypadku progresywnych aplikacji internetowych. PWA Summit to współpraca między pracownikami kilku firm zaangażowanych w tworzenie technologii PWA: Google, Intel, Microsoft i Samsung.

Znajdziesz tam mnóstwo świetnych wykładów i treści. Więcej informacji znajdziesz na stronie PWASummit.org.

I inne funkcje

Oczywiście jest ich znacznie więcej.

• Dodano obsługę słów kluczowych dotyczących wyrównania do elementów flexbox i flexbox: start, end, self-start, self-end, left i right.
• Interfejs asynchroniczny Clipboard API obsługuje teraz pliki SVG.
• Atrybut media będzie uwzględniany podczas ustawiania atrybutu meta theme-color, dzięki czemu możesz określić różne kolory motywu dla trybu jasnego i 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

Obejmuje to tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 93, kliknij linki poniżej.

• Nowości w Narzędziach deweloperskich w Chrome (93)
• Funkcje wycofane i usunięte z Chrome 93
• Aktualizacje ChromeStatus.com dotyczące Chrome 93
• Nowości w JavaScript w Chrome 93
• Lista zmian w repozytorium kodu Chromium

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy tylko opublikujemy nowy film.

Nazywam się Pete LePage i jak tylko pojawi się Chrome 94, opowiem Ci, co nowego w tej wersji.