Τι είναι το "sendBeacon"
Πιθανότατα γνωρίζετε τις δύο επιλογές που πρέπει να χρησιμοποιήσετε όταν θέλετε να υποβάλετε ένα αίτημα από έναν πελάτη, όπως από την προοδευτική εφαρμογή ιστού σας: είτε το XMLHttpRequest είτε το νεότερο "fetch". Γνωρίζατε όμως ότι υπάρχει μια τρίτη επιλογή, ειδικά σχεδιασμένη για την αποστολή πολύ μικρών κομματιών δεδομένων, όπως τα δεδομένα ανάλυσης; Είναι μια λειτουργία που ονομάζεται "sendBeacon", η οποία είναι διαθέσιμη στα σύγχρονα προγράμματα περιήγησης από το αντικείμενο "navigator".
Πώς να χρησιμοποιήσετε το "sendBeacon"
Η χρήση αυτής της ειδικά σχεδιασμένης συνάρτησης αιτήματος για μικρά κομμάτια δεδομένων είναι πραγματικά απλή. Όσο είναι διαθέσιμες τόσο η λειτουργία "πλοήγησης" όσο και η λειτουργία "sendBeacon" στον πλοηγό, το μόνο που χρειάζεται να κάνετε είναι να παράσχετε μια διεύθυνση URL καθώς και ωφέλιμο φορτίο για αποστολή.
Μπορείτε να στείλετε τους ακόλουθους τύπους δεδομένων.
- ArrayBuffer
- ArrayBufferView
- Αμορφη μάζα
- DOMString
- FormData
- URLSearchParams
Κάθε κλήση του "sendBeacon" θα μεταδίδει ένα αίτημα POST στο καθορισμένο τελικό σημείο.
async function track(payload: TrackPayload){
// We're using 'optional property access'
// for a simple and clean implementation.
//
// You could of course also use nested if(){ ... }.
await navigator?.sendBeacon?.('/track', payload);
}
// The following example is taken directly
// from the MDN page, linked in the addendum
// at the end of this page.
//
// It demonstrates the usage with the
// 'visibilitychange'-event when the user
// could close your web app.
document.addEventListener('visibilitychange', function logData() {
if (document.visibilityState === 'hidden') {
navigator.sendBeacon('/log', analyticsData);
}
});
Τι είναι διαφορετικό
Το κύριο πλεονέκτημα του "sendBeacon" είναι ότι τα αιτήματά σας ουσιαστικά θα τεθούν σε ουρά από τον πράκτορα, πράγμα που σημαίνει από το πρόγραμμα περιήγησης που έχει φορτώσει αυτήν τη στιγμή τον πελάτη σας. Όσο είναι διαθέσιμη μια σύνδεση δικτύου, τα δεδομένα αποστέλλονται στη συνέχεια. Εάν δεν υπάρχουν διαθέσιμα δεδομένα ή ο χρήστης κλείσει την εφαρμογή ιστού σας (πριν από την αποστολή του αιτήματος), το πρόγραμμα περιήγησης θα εξακολουθήσει να εγγυάται ότι το αίτημα θα μεταδοθεί, τελικά.
Οι άλλες, κοινές λειτουργίες αιτήματος δεν εγγυώνται ότι το αίτημά σας θα σταλεί όταν ένας χρήστης κλείσει την εφαρμογή ιστού (για παράδειγμα κλείνοντας την καρτέλα). Το "sendBeacon" είναι επίσης εντελώς ασύγχρονο και δεν εισάγει καθυστέρηση κατά την πλοήγηση σε άλλη σελίδα της διαδικτυακής σας εφαρμογής ενώ στέλνετε ακόμα τα δεδομένα ανάλυσης για το ιστορικό σελίδων του χρήστη.
Βελτιώστε προοδευτικά την εφαρμογή ιστού σας
Εάν έχετε ένα προσαρμοσμένο τελικό σημείο για δεδομένα ανάλυσης, θα πρέπει σίγουρα να δοκιμάσετε αυτό το νέο API. Λάβετε υπόψη ότι ένας χρήστης μπορεί να σας καλέσει εφαρμογή ιστού με ένα πρόγραμμα περιήγησης που δεν υποστηρίζει το API (αν και αυτό είναι πολύ απίθανο), ώστε να μπορείτε να βελτιώσετε προοδευτικά την εφαρμογή σας με έναν απλό έλεγχο υποστήριξης πριν τη χρησιμοποιήσετε.
