Το δώρο της δωρεάς
Η χρήση της επόμενης γενιάς εφαρμογών ιστού έχει ορισμένα σαφή πλεονεκτήματα, ένα από τα οποία χρησιμοποιεί το API κοινής χρήσης του πλοηγού. Χάρη σε ένα συνεχώς εξελισσόμενο πλούσιο σύνολο δυνατοτήτων, ο πλοηγός επιλογής σας έχει πλέον τη δυνατότητα να καλέσει το Web Share API για να μοιραστεί τα ακόλουθα στοιχεία:
- απλό κείμενο
- συνδέσμους παρέχοντας έναν τίτλο
- αρχεία απευθείας
Εάν το πρόγραμμα περιήγησης ενός χρήστη υποστηρίζει το νέο navigator.share, μπορείτε να χρησιμοποιήσετε αυτήν τη δυνατότητα τώρα!
Ώρα επίδειξης!
Η χρήση της λειτουργικότητας κοινής χρήσης είναι τόσο απλή όσο γίνεται, εδώ είναι ένα παράδειγμα που χρησιμοποιείται πραγματικά στον ιστότοπο:
<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>
Όπως μπορείτε να δείτε, αυτή η επιστροφή κλήσης επικαλείται τη λειτουργία κοινής χρήσης async (εάν είναι δυνατόν) και παρέχει ορισμένα δεδομένα έτσι ώστε να εμφανίζεται ένας καλός τίτλος URL + περιγραφικός τίτλος και υπότιτλος στο φύλλο κοινής χρήσης. Ο κωδικός που εμφανίζεται χρησιμοποιείται σε μια ελαφρώς διαφορετική παραλλαγή στο τέλος αυτού του άρθρου. Εάν το πρόγραμμα περιήγησής σας υποστηρίζει κοινή χρήση, τότε θα εμφανιστεί ένα σχετικό κουμπί στη γραμμή "Ενέργειες".
Πού να χρησιμοποιήσετε
Από την αρχή, το API μπορεί να χρησιμοποιηθεί ως επί το πλείστον σε παραλλαγές για κινητά των δημοφιλών προγραμμάτων περιήγησης (Chrome, Opera, Safari), αλλά μόνο στο Safari + Edge στην επιφάνεια εργασίας. Δεδομένου ότι αυτή η λειτουργικότητα δεν περιορίζεται σε συγκεκριμένες απαιτήσεις υλικού, αναμένω να αυξηθεί η υποστήριξη τους επόμενους μήνες.
Και ναι, αυτό ήταν μια γρήγορη εισαγωγή στο Web Share API, για περισσότερες πληροφορίες, δείτε το συνδεδεμένο web.dev, καθώς και άρθρα MDN στο προσάρτημα.
- Tom
