Nieuw in Chroom 91

Pete LePage

Dit is wat u moet weten:

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

Voorgestelde namen voor File System Access API

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

Vanaf Chrome 91 kunt u nu de naam en locatie van een bestand of map voorstellen om mee te werken. Geef hiervoor de eigenschap suggestedName 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 'Bestand opslaan' of 'Bestand openen' openen in de map ' documents . Een beeldbewerker wil waarschijnlijk starten in de map ' pictures '. U kunt een standaard startmap voorstellen door de eigenschap startIn door te geven.

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

Bekijk Tom's bericht over toegang tot het bestandssysteem voor meer informatie.

Bestanden lezen vanaf het klembord

Er is nog een coole nieuwe API voor interactie met bestanden in Chrome 91. Op desktop kunnen webapps nu bestanden uit het klembord lezen. (Het lezen van bestanden uit het klembord is sinds 2018 mogelijk in Safari.)

Uiteraard krijg je geen onbeperkte toegang tot het klembord, dus je moet een paste event listener' instellen. Vervolgens heb je in de event handler 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 accountbeheerbackend delen, kunt u nu uw sites aan elkaar koppelen. Zo kunnen gebruikers hun inloggegevens één keer opslaan en kan de Chrome-wachtwoordbeheerder deze voorstellen aan al uw aangesloten sites.

Dit is ideaal wanneer uw site wordt bediend vanaf verschillende topleveldomeinen, 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 dezelfde 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 vanaf dag één beschikbaar. Raadpleeg daarom Chrome inschakelen om inloggegevens te delen tussen aangesloten sites voor de meest recente informatie.

En nog veel meer!

Er is natuurlijk nog veel meer.

Alle video's van I/O 2021 staan ​​nu online. Er staat geweldige content tussen, dus neem vooral een kijkje!

Web Transport , voorheen Quic Transport, heeft een aantal wijzigingen ondergaan en start een nieuwe proef met de oorsprong.

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

De vernieuwde formulierelementen zijn eindelijk beschikbaar op Android en verbeteren de gebruikerservaring.

En het media attribuut van het <link> -element wordt gebruikt 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 zijn slechts enkele van de belangrijkste hoogtepunten. Bekijk de onderstaande links voor aanvullende wijzigingen in Chrome 91.

Abonneren

Om op de hoogte te blijven, kunt u zich abonneren op het YouTube-kanaal Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage en zodra Chrome 92 uitkomt, vertel ik u graag wat er nieuw is in Chrome!