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 umożliwia oznaczanie części DOM jako bezczynnych.
  • Interfejs Navigation API ułatwia aplikacjom jednostronnym obsługę nawigacji i aktualizacji adresu URL.
  • I to nie wszystko .

Nazywam się Pete LePage. Zobaczmy, co nowego dla programistów Chrome 102.

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 aplikacji PWA, 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 należy otworzyć wiele plików w jednym kliencie czy w wielu.

"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 aplikacji PWA, musisz określić konsumenta dla obiektu launchQueue. Aplikacje czekają w kolejce, dopóki klient nie będzie ich przetwarzać.

// 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 Przedstawiamy funkcję bezwładności.

Wiele aplikacji internetowych zależy od 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 Navigation API, dodaj obiekt 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 zasadniczo scentralizowane i uruchamia się we wszystkich typach nawigacji, niezależnie od tego, czy użytkownik wykonał działanie, np. kliknął link, przesłał formularz, czy przeszedł do tyłu i do przodu, nawet jeśli nawigacja jest uruchamiana automatycznie. W większości przypadków pozwala ona 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 do bezpiecznego wstawiania dowolnych ciągów znaków na stronie.
  • Atrybut hidden=until-found umożliwia przeglądarce wyszukiwanie tekstu w ukrytych regionach i ujawnienie tej sekcji w przypadku znalezienia dopasowania.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach 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.

Jestem Pete LePage i gdy tylko Chrome 103 się ukaże, od razu powiem, co nowego w tej przeglądarce.