Die geskenk van gee
Die gebruik van die volgende generasie webprogramme het enkele duidelike voordele, waarvan een die gebruik van die navigator se share-API het. Danksy 'n ryk stel funksies wat voortdurend ontwikkel, kan u keuse-navigator nou 'n beroep doen op Web Share API om die volgende items te deel:
- gewone teks
- skakels deur 'n titel te verskaf
- lêers direk
As 'n gebruiker se blaaier die nuwe navigator.share ondersteun, kan u hierdie funksie nou gebruik!
Demo tyd!
Die gebruik van die deelfunksionaliteit is net so eenvoudig as wat dit word, hier is 'n voorbeeld wat eintlik op die webwerf gebruik word:
<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>
Soos u kan sien, roep hierdie terugbel op die async-deelfunksie (indien moontlik) en verskaf u data sodat 'n mooi URL + beskrywende titel en ondertitel in die deelblad getoon kan word. Die getoonde kode word aan die einde van hierdie artikel in 'n effens ander variant gebruik. As u blaaier die deling ondersteun, word 'n verwante knoppie in die aksies-ry weergegee.
Waar om te gebruik
Met die skryf hiervan kan die API meestal gebruik word op mobiele variante van die gewilde blaaiers (Chrome, Opera, Safari), maar slegs op Safari + Edge op Desktop. Aangesien hierdie funksies nie beperk is tot spesifieke hardewarevereistes nie, verwag ek dat die ondersteuning in die komende maande sal toeneem.
En ja, dit was 'n vinnige inleiding tot die Web Share API. Raadpleeg die gekoppelde web.dev sowel as MDN-artikels in die addendum vir meer inligting.
- Tom
