Κάθε εφαρμογή αξίζει σήμα
Είναι ένα πολύ κοινό μοτίβο διεπαφής χρήστη που βλέπετε καθημερινά για τις εγγενείς εφαρμογές στη συσκευή σας: ένα σήμα ειδοποίησης. Είναι μια εξαιρετική ιδέα που ενημερώνει τους χρήστες για κάποιες χαμένες πληροφορίες μέσω ενός απλού και μικρού δείκτη. Συνήθως είναι μετρητής και για ορισμένες ειδικές εφαρμογές, χρησιμοποιείται προσαρμοσμένο σήμα ή οπτική προσαρμογή στο εικονίδιο, για παράδειγμα στην εφαρμογή Keychain της macOS, όπου ένα πορτοκαλί νόμισμα δείχνει ότι το μπρελόκ είναι ξεκλείδωτο και προσβάσιμο.
Αλλά πίσω στο προεπιλεγμένο σήμα. Χάρη στην Google που προωθεί σταθερά τον ιστό προς τα εμπρός, η εγκατεστημένη προοδευτική εφαρμογή ιστού μπορεί να εμφανίσει επίσης έναν μετρητή ως σήμα.
Προαπαιτούμενα
Προκειμένου η εφαρμογή ιστού σας να μπορεί να εμφανίζει σήμα, πρέπει να πληροί τα "κριτήρια εγκατάστασης" της Google, τα οποία συνδέονται παρακάτω στο προσάρτημα. Και αυτό είναι απολύτως λογικό: το PWA σας πρέπει να εγκατασταθεί σε μια συσκευή για να έχει μια σταθερή θέση στο σύστημά σας. Στα Windows, οι εφαρμογές σας ζουν στη γραμμή εργασιών και σε macOS είναι στο Dock.
Εάν δεν το γνωρίζετε ακόμη, η εφαρμογή ιστού σας μπορεί να βελτιωθεί προοδευτικά για να εξελιχθεί σε μια νέα κατηγορία εφαρμογών που ονομάζεται "Progressive Web Apps" ή PWA για συντομία. Τα PWA υποστηρίζουν μια μεγάλη ποικιλία νέων δυνατοτήτων που προηγουμένως ήταν διαθέσιμες μόνο σε εγγενείς εφαρμογές. Μπορείτε να δείτε πολλά άρθρα σχετικά με τα PWA σε αυτήν την εφαρμογή ιστού, η οποία είναι η ίδια η PWA που μπορεί να εγκατασταθεί.
Λάβετε υπόψη ότι η υποστήριξη για το App Badging API περιορίζεται προς το παρόν στα προγράμματα περιήγησης Chromium και υποστηρίζεται μόνο σε επιτραπέζιους υπολογιστές καθώς και σε Android. Η συνολική κατάσταση του API είναι σταθερή για το Chromium, αλλά δεν υποστηρίζεται με κανένα τρόπο από άλλα προγράμματα περιήγησης. Επομένως, η χρήση δεν πρέπει να αποτελεί υποχρεωτική απαίτηση για τη χρήση της εφαρμογής, αλλά μάλλον αυξάνει προοδευτικά το υπάρχον UX.
Πως δουλεύει
Η πραγματική εφαρμογή είναι πολύ απλή και απαιτεί μόνο μερικές γραμμές κώδικα για την κάλυψη όλων των περιπτώσεων χρήσης.
// These code examples asume you're using
// Typescript, as they use optional chaining.
//
// Also note that the API-calls for badging
// return a promise that can directly be
// catched.
async function setSimpleBadge(){
// Just a simple indicator without any value.
// This is the simplest variant of a badge.
await navigator?.setClientBadge();
}
async function incrementBadgeCount(){
// Get our dummy count and update it,
// just to give more context for this demo.
const countNow = getUnreadMessagesCount();
await setUnreadMessagesCount(countNow + 1);
// Update the UI.
await navigator.setAppBadge(countNow + 1)
.catch((error) => { /* ... */ });
}
async function resetBadge(){
// As simple as it gets: reset the badge UI.
await navigator.clearClientBadge();
}
Μια πολύ ωραία πτυχή αυτού του νέου API είναι ότι μπορεί να χρησιμοποιηθεί και στο Service Worker, πράγμα που σημαίνει ότι, εάν εφαρμοστεί, το εγκατεστημένο PWA σας μπορεί να πάρει δεδομένα στο παρασκήνιο και να λάβει ειδοποιήσεις push, οι οποίες με τη σειρά τους μπορούν να ενημερώσουν το σήμα της εφαρμογής σας !
συμπέρασμα
Όπως έχετε δει, η χρήση του API Badging App είναι πραγματικά απλή. Το μόνο που απαιτείται για να δοκιμάσετε είναι ένα πρόγραμμα περιήγησης που βασίζεται στο Chromium, καθώς και ένα απλό PWA που μπορεί να εγκατασταθεί. Δεν πρέπει να αναμένεται ότι αυτό το API θα είναι διαθέσιμο στο Safari ή στον Firefox σύντομα, καθώς αυτό συνεπάγεται επίσης μεγαλύτερη δέσμευση για PWAs γενικά από αυτές τις ομάδες. Αλλά για ένα βελτιωμένο UX για την εφαρμογή ιστού σας όπου είναι δυνατόν, είναι μια μεγάλη νίκη και σίγουρα θα πρέπει να χρησιμοποιηθεί!
