Reteja Interŝanĝado API

Kiel uzi la denaskan interŝanĝan API de la retejo

La donaco doni

Uzi la sekvan generacion de retaj programoj havas iujn klarajn avantaĝojn, unu el ili uzas la akcion-API de la navigilo. Danke al ĉiam evoluanta riĉa aro da kapabloj, via elektita navigilo nun povas alvoki Web Share API por dividi la jenajn erojn:

  • simpla teksto
  • ligiloj provizante titolon
  • dosierojn rekte

Se retumilo de uzanto subtenas la novan navigator.share, vi povas uzi ĉi tiun funkcion nun!

Demo-tempo!

Uzi la kundividan funkcion estas tiel simpla kiel ĝi ricevas, jen ekzemplo efektive uzata en la retejo:

<Button
  className={classes.container}
  aria-label={"Share this article"}
  onClick={() => {
    // '.share' can only by called when
    // triggered by click-events to make
    // sure it's the user's intention.
    navigator.share?.({ 
      title: info.title,
      text: info.description,
      url: `${getBaseRoute(routes.posts)}/${info.slug.current}`,
    }).catch(console.error);
    
    // Optionally virbrate slightly.
     navigator.vibrate?.([30, 20, 10]);
  }}>
  <ShareIcon />
  <Typography>{"Share"}</Typography>
</Button>

Kiel vi povas vidi, ĉi tiu revokado alvokas la asinkronan kunhavigan funkcion (se eblas) kaj provizas iujn datumojn, por ke bela URL + priskriba titolo kaj subtitolo montriĝu en la kunhava folio. La montrita kodo estas uzata en iomete malsama varianto fine de ĉi tiu artikolo. Se via retumilo subtenas dividadon, tiam rilata butono aperos en la vico "Agoj".

Kie uzi

Dum la verkado, la API plejparte povas esti uzata ĉe poŝtelefonaj variantoj de la popularaj retumiloj (Chrome, Opera, Safari) sed nur ĉe Safari + Edge sur Labortablo. Ĉar ĉi tiu funkcio ne limiĝas al specifaj aparataj postuloj, mi atendas, ke subteno pliiĝos en la venontaj monatoj.

Kaj jes, tio estis rapida enkonduko al la Reteja Interŝanĝado API, por pliaj informoj rigardu la ligitajn retejojn.dev kaj MDN-artikolojn en la aldono.

  • Tom