Nowości w Chrome 102

Pete LePage

Oto, co musisz wiedzieć na ten temat:

  • Zainstalowane PWAs mogą rejestrować się jako obsługa plików, dzięki czemu użytkownicy mogą łatwo otwierać pliki bezpośrednio z dysku.
  • Atrybut inert pozwala oznaczać części DOM jako nieaktywne.
  • Interfejs Navigation API ułatwia aplikacjom jednostronnym obsługę nawigacji i aktualizacji adresu URL.
  • I to nie wszystko .

Mam na imię Pete LePage. Przyjrzyjmy się bliżej nowościom w Chrome 102 dla deweloperów.

File Handling API

Interfejs File Handling API umożliwia zainstalowanym Progressive Web Apps rejestrowanie się w systemie operacyjnym jako moduł obsługi plików. Po zarejestrowaniu użytkownik może kliknąć plik, aby otworzyć go za pomocą zainstalowanej aplikacji PWA. Jest to idealne rozwiązanie dla Progressive Web Apps, które współpracują z plikami, np. edytory obrazów, IDE, edytory tekstu itp.

Aby dodać do PWA funkcję obsługi plików, musisz zaktualizować plik manifestu aplikacji internetowej, dodając tablicę file_handlers z informacjami o typach plików, które może obsługiwać PWA. Musisz określić adres URL, który ma zostać otwarty, typy mime, ikonę typu pliku i typ uruchamiania. Typ uruchamiania określa, czy wiele plików ma być otwieranych w jednym kliencie, czy w kilku klientach.

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

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, aż zostaną obsłużone 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);
  }
});

Aby dowiedzieć się więcej, przeczytaj artykuł Zezwalanie zainstalowanym aplikacjom internetowym na obsługę plików.

Właściwość inert

Właściwość inert to globalny atrybut HTML, który informuje przeglądarkę, że ma ignorować zdarzenia wprowadzania danych przez użytkownika dotyczące elementu, w tym zdarzenia fokusowania i zdarzenia z urządzeń wspomagających.

Może to być przydatne podczas tworzenia interfejsu użytkownika. Na przykład w przypadku okna modalnego chcesz „przechwycić” fokus wewnątrz okna, gdy jest ono widoczne. Jeśli szuflada nie jest zawsze widoczna dla użytkownika, dodanie inert zagwarantuje, że gdy szuflada jest poza ekranem, użytkownik klawiatury nie będzie mógł jej przypadkowo aktywować.

<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>

W tym przykładzie funkcja inert została zadeklarowana w drugim elemencie <div>, więc wszystkie zawarte w nim elementy, w tym <button> i <label>, nie mogą być zaznaczane ani klikane.

inert jest obsługiwana w Chrome 102, a wkrótce pojawi się też w Firefox i Safari.

Więcej informacji znajdziesz w artykule Wprowadzenie do funkcji Inert.

Wiele aplikacji internetowych wymaga możliwości aktualizowania adresu URL bez przechodzenia na inną stronę. Obecnie korzystamy z interfejsu History API, ale jest on niewygodny i nie zawsze działa zgodnie z oczekiwaniami. Zamiast próbować naprawiać nierówności w interfejsie History API, interfejs Navigation API całkowicie je wyeliminował.

Aby korzystać z interfejsu API Nawigacja, dodaj odbiornik navigate do obiektu globalnego 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 jest scentralizowane i uruchamia się w przypadku wszystkich typów nawigacji, niezależnie od tego, czy użytkownik wykonał jakieś działanie, np. kliknął link, przesłał formularz lub przeszedł do poprzedniej lub następnej strony, nawet jeśli nawigacja została wywołana programowo. W większości przypadków pozwala on Twojemu kodowi zastąpić domyślne działanie przeglądarki w przypadku danego działania.

Aby uzyskać pełne informacje i wypróbować wersję demonstracyjną, zapoznaj się z artykułem Nowoczesne kierowanie po stronie klienta: interfejs Navigation API.

I inne funkcje

Oczywiście jest ich znacznie więcej.

  • Nowy interfejs Sanitizer API ma na celu stworzenie niezawodnego procesora, który umożliwia bezpieczne wstawianie dowolnych ciągów znaków na stronie.
  • Atrybut hidden=until-found umożliwia przeglądarce wyszukiwanie tekstu w ukrytych regionach i wyświetlanie tej sekcji, jeśli zostanie znalezione dopasowanie.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Aby poznać dodatkowe zmiany w Chrome 102, kliknij linki poniżej.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał w 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ę wersja Chrome 103, opowiem Ci, co nowego w tej przeglądarce.