Nieuw in Chroom 91

Piet LePage

Dit is wat u moet weten:

Ik ben Pete LePage , ik werk en fotografeer vanuit huis. Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 91!

Voorgestelde namen voor API voor bestandssysteemtoegang

Een van mijn favoriete API's die dit jaar uit het Fugu-project voortkomt, zijn de File System Access API's. Zodra de gebruiker toestemming heeft verleend, kunnen apps communiceren met bestanden op het lokale apparaat van de gebruiker, op dezelfde manier als andere geïnstalleerde apps, waardoor u een natuurlijkere gebruikerservaring kunt creëren.

Vanaf Chrome 91 kunt u nu de naam en locatie van een bestand of map voorstellen waarmee u kunt communiceren. Om dit te doen, geeft u een suggestedName eigenschap door als onderdeel van de showSaveFilePicker -opties.

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

Hetzelfde geldt voor de standaard startmap. Een teksteditor wil bijvoorbeeld waarschijnlijk het dialoogvenster voor het opslaan of openen van bestanden starten in de documents . Terwijl een afbeeldingseditor waarschijnlijk in de map pictures wil starten. U kunt een standaardstartmap voorstellen door een startIn eigenschap door te geven.

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

Bekijk Tom's File System Access- post voor volledige details.

Bestanden lezen vanaf het klembord

Er is nog een coole nieuwe API voor interactie met bestanden die in Chrome 91 terechtkomt. Op desktops kunnen webapps nu bestanden van het klembord lezen. (Het lezen van bestanden vanaf het klembord is sinds 2018 beschikbaar in Safari.)

Natuurlijk krijgt u geen onbeperkte toegang tot het klembord, dus u moet een luisteraar paste instellen. Vervolgens hebt u in de gebeurtenishandler toegang tot de inhoud van elk bestand op het klembord. 

window.addEventListener('paste', onPaste);

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

Deel inloggegevens op aangesloten sites

Als uw site meerdere domeinen heeft en deze dezelfde backend voor accountbeheer delen, kunt u uw sites nu aan elkaar koppelen, zodat gebruikers hun inloggegevens één keer kunnen opslaan en de Chrome-wachtwoordbeheerder deze kunnen voorstellen aan een van uw aangesloten sites.

Dit is ideaal wanneer uw site wordt aangeboden vanuit verschillende topniveaudomeinen, zoals google.com en google.ca . Of misschien heeft u meerdere domeinnamen.

Om uw websites te koppelen, moet u een assetlinks.json bestand maken dat de relatie tussen de domeinen definieert. In het onderstaande voorbeeld vertel ik de browser dat zowel de .com als .co.uk -domeinen gerelateerd zijn en de inloggegevens kunnen delen.

[{
  "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"
  }
 }]

Host vervolgens het bestand assetlinks.json in de map .well-known voor elk domein.

Deze functionaliteit wordt geleidelijk uitgerold in Chrome 91 en is mogelijk nog niet op de eerste dag beschikbaar. Bekijk Chrome inschakelen om inloggegevens te delen met aangesloten sites voor de laatste details.

En meer!

Natuurlijk is er nog veel meer.

Alle video's van I/O 2021 staan ​​nu online, er zit geweldige inhoud in, dus bekijk hem zeker!

Web Transport -voorheen Quic Transport genaamd, heeft een aantal veranderingen ondergaan en start een nieuwe origin-proef.

Web Assembly SIMD heeft zijn oorspronkelijke proefperiode afgerond en is beschikbaar voor alle gebruikers.

De vernieuwde formulierelementen zijn eindelijk op Android geland, waardoor de gebruikerservaring is verbeterd.

En het media attribuut van het <link> -element wordt gerespecteerd voor link rel="icon" , wat betekent dat u verschillende pictogrammen kunt definiëren op basis van mediaquery's. Bijvoorbeeld verschillende pictogrammen voor de donkere en lichte modus. 

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

Verder lezen

Dit behandelt slechts enkele van de belangrijkste hoogtepunten. Controleer de onderstaande links voor aanvullende wijzigingen in Chrome 91.

Abonneren

Als u op de hoogte wilt blijven, abonneert u zich op het YouTube-kanaal van Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage, en zodra Chrome 92 uitkomt, ben ik hier om je te vertellen wat er nieuw is in Chrome!