Nowości w Chrome 102

Pete LePage

Oto, co musisz wiedzieć na ten temat:

  • Zainstalowane aplikacje PWA mogą być rejestrowane jako moduły obsługi plików, co ułatwia użytkownikom otwieranie plików bezpośrednio z dysku.
  • Atrybut inert umożliwia oznaczenie części DOM jako bezwładności.
  • Nawigacja API ułatwia aplikacjom jednostronicowym nawigację i aktualizowanie adresu URL.
  • A do tego wiele więcej.

Nazywam się Pete LePage. Przyjrzyjmy się nowościom dla programistów w Chrome 102.

File Handling API

Interfejs File handling API pozwala zainstalowanym PWA na zarejestrowanie się w systemie operacyjnym jako modułu obsługi plików. Po zarejestrowaniu się użytkownik może kliknąć plik, aby otworzyć go za pomocą zainstalowanej aplikacji PWA. Jest to idealne rozwiązanie w przypadku aplikacji PWA, które korzystają z plików, na przykład edytorów obrazów, IDE, edytorów tekstu itp.

Aby dodać funkcję obsługi plików do PWA, musisz zaktualizować plik manifestu aplikacji internetowej, dodając tablicę file_handlers z informacjami o typach plików, które może ona obsługiwać. Musisz podać adres URL do otwarcia, typy MIME, ikonę typu pliku i typ uruchamiania. Typ uruchomienia określa, czy w jednym czy w wielu klientach należy otwierać wiele plików.

"file_handlers": [
  {
    "action": "/open-csv",
    "accept": {"text/csv": [".csv"]},
    "icons": [
      {
        "src": "csv-icon.png",
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "launch_type": "single-client"
  }
]

Następnie, aby uzyskać dostęp do tych plików po uruchomieniu PWA, musisz określić konsumenta dla obiektu launchQueue. Uruchomienia są umieszczane w kolejce do momentu, gdy zostaną przetworzone przez konsumenta.

// Access from Window.launchQueue.
launchQueue.setConsumer((launchParams) => {
  if (!launchParams.files.length) {
    // Nothing to do when the queue is empty.
    return;
  }
  for (const fileHandle of launchParams.files) {
    // Handle the file.
    openFile(fileHandle);
  }
});

Więcej informacji znajdziesz w artykule Zezwalanie zainstalowanym aplikacjom internetowym na moduły obsługi plików.

Właściwość inert

Właściwość inert to globalny atrybut HTML, który informuje przeglądarkę, że ma ignorować zdarzenia wejściowe użytkownika związane z elementem, w tym zdarzenia skupienia i zdarzenia z technologii wspomagających.

Jest to przydatne podczas tworzenia interfejsów użytkownika. Na przykład w oknie modalnym chcemy „uwięzić” zaznaczenie w obrębie okna modalnego, gdy jest ono widoczne. W przypadku szuflady, która nie zawsze jest widoczna dla użytkownika, dodanie elementu inert sprawi, że gdy szuflada będzie znajdować się poza ekranem, użytkownik klawiatury nie będzie mógł przypadkowo z niej korzystać.

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

Tutaj zadeklarowano inert w drugim elemencie <div>, więc żadne treści zawarte w obrębie, w tym <button> i <label>, nie mogą być zaznaczone ani klikane.

Usługa inert jest obsługiwana w Chrome 102, a wkrótce będzie dostępna zarówno w Firefoksie, jak i w Safari.

Więcej informacji znajdziesz w artykule o wprowadzaniu bezczynności.

Wiele aplikacji internetowych wymaga możliwości aktualizowania adresu URL bez konieczności nawigacji po stronie. Obecnie używamy interfejsu History API, ale jest on niezły i nie zawsze działa zgodnie z oczekiwaniami. Zamiast próbować naprawiać błędy interfejsu History API, interfejs Navigation API całkowicie przekształca ten interfejs.

Aby korzystać z interfejsu API nawigacji, dodaj odbiornik navigate do globalnego obiektu navigation.

navigation.addEventListener('navigate', (navigateEvent) => {
  switch (navigateEvent.destination.url) {
    case 'https://example.com/':
      navigateEvent.transitionWhile(loadIndexPage());
      break;
    case 'https://example.com/cats':
      navigateEvent.transitionWhile(loadCatsPage());
      break;
  }
});

Zdarzenie to jest zasadniczo scentralizowane i uruchamiane w przypadku wszystkich rodzajów nawigacji, niezależnie od tego, czy użytkownik wykonał działanie, takie jak kliknięcie linku, przesłanie formularza czy przejście wstecz i do przodu, nawet jeśli nawigacja jest uruchamiana automatycznie. W większości przypadków pozwala to zastąpić domyślne działanie przeglądarki w przypadku tego działania.

Więcej informacji i demonstrację znajdziesz w artykule o nowoczesnym routingu po stronie klienta: interfejsem Navigation API.

…i wiele innych.

Oczywiście, jest ich jeszcze więcej.

  • Nowy interfejs Sanitizer API ma na celu stworzenie niezawodnego procesora do bezpiecznego wstawiania dowolnych ciągów znaków na stronie.
  • Atrybut hidden=until-found umożliwia przeglądarce wyszukiwanie tekstu w ukrytych obszarach i odkrywanie tej sekcji w przypadku znalezienia dopasowania.

Więcej informacji

To tylko niektóre z najważniejszych kwestii. Kliknij poniższe linki, aby dowiedzieć się więcej o zmianach w Chrome 102.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers w YouTube. Będziesz otrzymywać e-maile z powiadomieniami o każdym nowym filmie.

Jestem Pete LePage i jak tylko pojawi się Chrome 103, będę informować Cię o nowościach w Chrome.