Nieuw in Chrome 102

Piet LePage

Dit is wat u moet weten:

  • Geïnstalleerde PWA's kunnen zich registreren als bestandsbehandelaars , waardoor gebruikers gemakkelijk bestanden rechtstreeks vanaf schijf kunnen openen.
  • Met het inert attribuut kunt u delen van de DOM als inert markeren.
  • De navigatie-API maakt het gemakkelijker voor apps met één pagina om navigatie en updates van de URL af te handelen
  • En er is nog veel meer .

Ik ben Pete LePage . Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 102.

API voor bestandsverwerking

Met de File Handling API kunnen geïnstalleerde PWA's zich bij het besturingssysteem registreren als bestandshandler. Eenmaal geregistreerd, kan een gebruiker op een bestand klikken om het te openen met de geïnstalleerde PWA. Dit is perfect voor PWA's die communiceren met bestanden, bijvoorbeeld afbeeldingseditors, IDE's, teksteditors, enzovoort.

Als u functionaliteit voor bestandsverwerking aan uw PWA wilt toevoegen, moet u uw web-app-manifest bijwerken en een array file_handlers toevoegen met details over de typen bestanden die uw PWA kan verwerken. U moet de URL opgeven die u wilt openen, de mime-typen, een pictogram voor het bestandstype en het opstarttype. Het opstarttype bepaalt of meerdere bestanden in één client of in meerdere clients moeten worden geopend.

"file_handlers": [
  {
    "action": "/open-csv",
    "accept": {"text/csv": [".csv"]},
    "icons": [
      {
        "src": "csv-icon.png",
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "launch_type": "single-client"
  }
]

Om vervolgens toegang te krijgen tot deze bestanden wanneer de PWA wordt gestart, moet u een consument opgeven voor het launchQueue object. Lanceringen worden in de wachtrij geplaatst totdat ze door de consument worden afgehandeld.

// 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);
  }
});

Bekijk Laat geïnstalleerde webapplicaties bestandshandlers zijn voor alle details.

De inert eigenschap

De eigenschap inert is een globaal HTML-attribuut dat de browser vertelt gebruikersinvoergebeurtenissen voor een element te negeren, inclusief focusgebeurtenissen en gebeurtenissen van ondersteunende technologieën.

Dit kan handig zijn bij het bouwen van gebruikersinterfaces. Met een modale dialoog wilt u bijvoorbeeld de focus binnen de modale dialoog "vangen" wanneer deze zichtbaar is. Of, voor een lade die niet altijd zichtbaar is voor de gebruiker, zorgt het toevoegen van inert ervoor dat een toetsenbordgebruiker er niet per ongeluk interactie mee kan hebben als de lade zich buiten het scherm bevindt.

<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>

Hier is inert verklaard voor het tweede <div> -element, dus alle inhoud daarin, inclusief de <button> en <label> , kan geen focus krijgen of erop worden geklikt.

inert wordt ondersteund in Chrome 102 en komt naar zowel Firefox als Safari.

Bekijk Introductie van inert voor meer details.

Veel webapps zijn afhankelijk van de mogelijkheid om de URL bij te werken zonder paginanavigatie. Tegenwoordig gebruiken we de History API , maar deze is onhandig en werkt niet altijd zoals verwacht. In plaats van te proberen de ruwe kantjes van de History API te herstellen, vernieuwt de Navigation API deze ruimte volledig.

Als u de navigatie-API wilt gebruiken, voegt u een navigate listener toe aan het globale 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;
  }
});

De gebeurtenis is fundamenteel gecentraliseerd en wordt geactiveerd voor alle soorten navigatie, ongeacht of de gebruiker een actie heeft uitgevoerd, zoals op een link klikken, een formulier indienen of heen en weer gaan, zelfs als de navigatie programmatisch wordt geactiveerd. In de meeste gevallen kan uw code het standaardgedrag van de browser voor die actie overschrijven.

Bekijk de Moderne client-side routing: de Navigatie-API voor volledige details en een demo die u kunt uitproberen.

En meer!

Natuurlijk is er nog veel meer.

  • De nieuwe Sanitizer API heeft tot doel een robuuste processor te bouwen waarmee willekeurige tekenreeksen veilig in een pagina kunnen worden ingevoegd.
  • Het kenmerk hidden=until-found maakt het voor de browser mogelijk om tekst in verborgen gebieden te doorzoeken en die sectie te onthullen als er een overeenkomst wordt gevonden.

Verder lezen

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

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 103 uitkomt, ben ik hier om je te vertellen wat er nieuw is in Chrome!