Nieuw in Chrome 102

Pete LePage

Dit is wat u moet weten:

  • Geïnstalleerde PWA's kunnen zich registreren als bestandshandlers , waardoor gebruikers eenvoudig bestanden rechtstreeks vanaf de schijf kunnen openen.
  • Met het kenmerk inert kunt u delen van de DOM als inert markeren.
  • Dankzij de navigatie-API kunnen apps met één pagina gemakkelijker navigeren en updates van de URL verwerken
  • En er is nog veel meer .

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

API voor bestandsverwerking

Met de File Handling API kunnen geïnstalleerde PWA's zich registreren bij het besturingssysteem als bestandsbehandelaar. Na registratie kan een gebruiker op een bestand klikken om het te openen met de geïnstalleerde PWA. Dit is ideaal voor PWA's die met bestanden werken, zoals beeldbewerkers, IDE's, teksteditors, enzovoort.

Om bestandsverwerkingsfunctionaliteit aan je PWA toe te voegen, moet je het manifest van je webapp bijwerken en een array file_handlers toevoegen met details over de bestandstypen die je PWA kan verwerken. Je moet de te openen URL, de MIME-typen, een pictogram voor het bestandstype en het opstarttype opgeven. 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 toegang te krijgen tot deze bestanden wanneer de PWA wordt gestart, moet u een gebruiker opgeven voor het launchQueue object. Starts worden in de wachtrij geplaatst totdat ze door de gebruiker 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 bestandsafhandelingsfuncties vervullen voor alle details.

De inert eigenschap

De eigenschap inert is een globaal HTML-kenmerk waarmee de browser wordt verteld dat invoergebeurtenissen van de gebruiker voor een element, inclusief focusgebeurtenissen en gebeurtenissen van ondersteunende technologieën, moeten worden genegeerd.

Dit kan handig zijn bij het bouwen van gebruikersinterfaces. Bijvoorbeeld, bij een modaal dialoogvenster wil je de focus in het dialoogvenster "vangen" wanneer het zichtbaar is. Of, voor een lade die niet altijd zichtbaar is voor de gebruiker, zorgt de toevoeging van inert ervoor dat een toetsenbordgebruiker er niet per ongeluk mee kan werken, terwijl de lade buiten beeld is.

<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 gedeclareerd op het tweede <div> -element, wat betekent dat de inhoud hierin, inclusief de <button> en <label> , geen focus kan krijgen en er niet op geklikt kan worden.

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

Zie Introductie van inert voor meer informatie.

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

Om de Navigatie-API te 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;
  }
});

Het event is fundamenteel gecentraliseerd en wordt geactiveerd voor alle soorten navigatie, ongeacht of de gebruiker een actie heeft uitgevoerd, zoals klikken op een link, een formulier verzenden of terug- en vooruitgaan, zelfs wanneer de navigatie programmatisch wordt geactiveerd. In de meeste gevallen kan uw code het standaardgedrag van de browser voor die actie overschrijven.

Bekijk Modern client-side routing: the Navigation API voor alle details en een demo die u kunt uitproberen.

En nog veel meer!

Er is natuurlijk nog veel meer.

  • De nieuwe Sanitizer API is bedoeld om een ​​robuuste processor te bouwen waarmee willekeurige strings veilig in een pagina kunnen worden ingevoegd.
  • Met het kenmerk hidden=until-found kan de browser tekst in verborgen gedeelten doorzoeken en dat gedeelte weergeven als er een overeenkomst is gevonden.

Verder lezen

Dit zijn slechts enkele van de belangrijkste hoogtepunten. Bekijk de onderstaande links voor meer wijzigingen in Chrome 102.

Abonneren

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

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