Nowości w Chrome 91

Pete LePage

Oto, co musisz wiedzieć na ten temat:

Nazywam się Pete LePage i pracuję z domu. Zapraszam do obejrzenia filmu, w którym prezentuję nowości w Chrome 91 dla deweloperów.

Sugerowane nazwy interfejsu File System Access API

Jednym z interfejsów API, które najbardziej przypadły mi do gustu w ramach projektu Fugu w tym roku, są interfejsy API dostępu do systemu plików. Gdy użytkownik udzieli uprawnień, aplikacje mogą wchodzić w interakcje z plikami na jego urządzeniu lokalnym w taki sam sposób jak inne zainstalowane aplikacje, co pozwoli Ci zapewnić użytkownikom bardziej naturalne wrażenia.

Od wersji 91 Chrome możesz sugerować nazwę i lokalizację pliku lub katalogu, z którym chcesz pracować. Aby to zrobić, prześlij obiekt suggestedName jako część 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 otworzyć okno zapisywania lub otwierania pliku w folderze documents. Z kolei edytor obrazów prawdopodobnie chce zacząć od folderu pictures. Możesz zasugerować domyślny katalog początkowy, podając właściwość startIn.

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

Aby uzyskać więcej informacji, przeczytaj post Toma na temat dostępu do systemu plików.

Odczytywanie plików ze schowka

W Chrome 91 pojawi się też inny fajny interfejs API do interakcji z plikami. Na komputerach aplikacje internetowe mogą teraz odczytywać pliki ze schowka. (odczytywanie plików z Schowka jest dostępne w Safari od 2018 roku).

Oczywiście nie masz nieograniczonego dostępu do schowka, więc musisz skonfigurować detektor zdarzenia paste. Następnie w obiekcie obsługującym zdarzenie 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ępnianie danych logowania na stronach powiązanych

Jeśli Twoja witryna ma wiele domen, które korzystają z tego samego backendu do zarządzania kontami, możesz teraz powiązać ze sobą te witryny, aby użytkownicy mogli zapisać dane logowania tylko raz, a menedżer haseł w Chrome mógł je sugerować w przypadku każdej z powiązanych witryn.

Jest to idealne rozwiązanie, gdy witryna jest obsługiwana z różnych domen najwyższego poziomu, takich jak google.com i google.ca. Możesz też mieć wiele nazw domen.

Aby powiązać witryny, musisz utworzyć plik assetlinks.json, który definiuje relacje między domenami. W tym przykładzie informuję przeglądarkę, że domeny .com i .co.uk są powiązane i mogą udostępniać 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 dla każdej domeny.

Ta funkcja będzie stopniowo wprowadzana w Chrome 91 i może nie być dostępna od razu. Aby uzyskać najnowsze informacje, przeczytaj artykuł Włączanie udostępniania danych logowania w Chrome w przypadku witryn powiązanych.

I inne funkcje

Oczywiście istnieje też znacznie więcej możliwości.

Wszystkie filmy z I/O 2021 są już dostępne online. Znajdziesz w nich wiele ciekawych treści.

Web Transport (Web Transport) – wcześniej nazywana Quic Transport, która przeszła wiele zmian i rozpoczyna nowy okres próbny.

Skończył się okres testowania origin Web Assembly SIMD i jest on dostępny dla wszystkich użytkowników.

Odświeżone elementy formularzy w końcu trafiły na Androida, co poprawia komfort korzystania z aplikacji.

Atrybut media elementu <link> będzie uwzględniany w przypadku atrybutu link rel="icon", co oznacza, że możesz definiować różne ikony na podstawie zapytań dotyczących multimediów. Na przykład różne ikony dla trybu ciemnego i jasnego.

<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

Obejmuje to tylko niektóre najważniejsze informacje. Pod poniższymi linkami znajdziesz dodatkowe zmiany w Chrome 91.

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 92, opowiem Ci, co nowego w tej wersji.