Az ajándékozás ajándéka
A webalkalmazások következő generációjának használata egyértelmű előnyökkel jár, amelyek közül az egyik a navigátor share-API használata. A folyamatosan fejlődő, gazdag képességkészletnek köszönhetően a választott navigátor mostantól meghívhatja a Web Share API-t, hogy megossza a következő elemeket:
- egyszerű szöveg
- linkeket cím megadásával
- fájlokat közvetlenül
Ha egy felhasználó böngészője támogatja az új navigator.share alkalmazást, akkor most már használhatja ezt a funkciót!
Bemutató idő!
A megosztási funkciók használata a lehető legegyszerűbb, íme egy példa, amelyet ténylegesen használnak a webhelyen:
<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>
Amint láthatja, ez a visszahívás meghívja az async share-function funkciót (ha lehetséges), és ad néhány adatot, hogy egy szép URL + leíró cím és felirat megjelenhessen a megosztási lapon. A bemutatott kódot kissé eltérő változatban használják a cikk végén. Ha böngészője támogatja a megosztást, akkor egy kapcsolódó gomb megjelenik a "Műveletek" sorban.
Hol használható
Írása szerint az API többnyire a népszerű böngészők mobil változataiban használható (Chrome, Opera, Safari), de csak az Asztalon található Safari + Edge alkalmazásban. Mivel ez a funkcionalitás nem korlátozódik a speciális hardverigényekre, a következő hónapokban a támogatás növekedésére számítok.
És igen, ez egy gyors bevezetés volt a Web Share API-hoz, további információkért nézze meg a linkelt web.dev-t, valamint a kiegészítés MDN-cikkeit.
- Tom
