Nowości w Chrome 91

Pete LePage

Oto, co musisz wiedzieć na ten temat:

Jestem Pete LePage. Pracuję i nagrywam z domu. Przyjrzyjmy się nowościom dla programistów w Chrome 91.

Sugerowane nazwy interfejsu File System Access API

Jednym z moich ulubionych interfejsów API, który pojawi się w projekcie Fugu w tym roku, są interfejsy File System Access API. Gdy użytkownik udzieli odpowiednich uprawnień, aplikacje będą mogły wchodzić w interakcję z plikami na lokalnym urządzeniu użytkownika tak samo jak inne zainstalowane aplikacje, co zapewnia użytkownikom bardziej naturalne wrażenia.

Od wersji Chrome 91 możesz teraz sugerować nazwę i lokalizację pliku lub katalogu, z którymi chcesz pracować. Aby to zrobić, przekaż właściwość suggestedName w ramach opcji showSaveFilePicker.

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

To samo dotyczy domyślnego katalogu początkowego. Na przykład edytor tekstu prawdopodobnie chce uruchomić okno zapisywania lub otwierania pliku w folderze documents. Edytor obrazów prawdopodobnie chce zacząć od folderu pictures. Możesz zaproponować domyślny katalog początkowy, przekazując właściwość startIn.

const fileHandle = await self.showOpenFilePicker({
  startIn: 'documents'
});

Szczegółowe informacje znajdziesz w poście Toma na temat dostępu do systemu plików.

Odczytuję pliki ze schowka

Istnieje jeszcze jeden świetny interfejs API do interakcji z plikami, który trafi do Chrome 91. Na komputerze aplikacje internetowe mogą teraz odczytywać pliki ze schowka. Odczytywanie plików ze schowka jest możliwe w Safari od 2018 roku.

Oczywiście nie będziesz mieć nieograniczonego dostępu do schowka, więc musisz skonfigurować odbiornik zdarzeń paste. Dzięki temu w module obsługi zdarzeń możesz uzyskać dostęp do zawartości każdego pliku w schowku.

window.addEventListener('paste', onPaste);

async function onPaste(e) {
  const file = e.clipboardData.files[0];
  const contents = await file.text();
  ...
}

Udostępniaj dane logowania w powiązanych witrynach

Jeśli masz wiele domen i wspólnie z nimi korzysta się z tego samego backendu, możesz teraz powiązać witryny ze sobą, aby umożliwić użytkownikom jednorazowe zapisywanie danych logowania, a menedżer haseł Chrome zasugeruje je w dowolnej z powiązanych witryn.

Jest to idealne rozwiązanie, gdy witryna jest wyświetlana z różnych domen najwyższego poziomu, np. google.com czy google.ca. A może masz więcej nazw domen.

Aby powiązać swoje witryny, musisz utworzyć plik assetlinks.json, który będzie określał relację między tymi domenami. W poniższym przykładzie instruuję przeglądarkę, że domeny .com i .co.uk są powiązane i mogą współdzielić dane logowania.

[{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.com"
  }
 },
{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.co.uk"
  }
 }]

Następnie umieść plik assetlinks.json w folderze .well-known każdej domeny.

Ta funkcja będzie wdrażana stopniowo w Chrome 91 i może być niedostępna pierwszego dnia. Aby dowiedzieć się więcej, przeczytaj artykuł Włączanie w Chrome udostępniania danych logowania w powiązanych witrynach.

…i wiele innych.

Oczywiście, jest ich jeszcze więcej.

Wszystkie filmy z I/O 2021 są już dostępne w internecie. Jest w nich mnóstwo świetnych materiałów, więc warto je zobaczyć.

W usłudze Web Transport (wcześniej Quic Transport) wprowadziliśmy szereg zmian i rozpoczynamy nowy test origin.

Usługa Web Assembly SIMD zakończyła się jako źródło wersji testowej i jest ona dostępna dla wszystkich użytkowników.

Odświeżone elementy formularza w końcu trafiły na Androida, aby zwiększyć wygodę użytkowników.

Atrybut media elementu <link> będzie honorowany w przypadku link rel="icon", co oznacza, że możesz definiować różne ikony na podstawie zapytań multimedialnych. np. różne ikony w trybie ciemnym i jasnym.

<link
  rel="icon"
  media="(prefers-color-scheme: dark)"
  href="/icons/dark.png">
<link
  rel="icon"
  media="(prefers-color-scheme: light)"
  href="/icons/light.png">

Więcej informacji

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

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 92, będę informować Cię o nowościach w Chrome.