Έχετε αναρωτηθεί ποτέ πώς φαίνεται να λειτουργούν ορισμένοι ιστότοποι ακόμα και όταν είστε εκτός σύνδεσης; Το μυστικό είναι απλό: αυτοί οι ιστότοποι έχουν υπαλλήλους υπηρεσιών.

Οι εργαζόμενοι σε υπηρεσίες είναι η βασική τεχνολογία πίσω από πολλά από τα χαρακτηριστικά που μοιάζουν με εγγενείς εφαρμογές των σύγχρονων εφαρμογών Ιστού.

Τι είναι οι υπάλληλοι υπηρεσιών;

Οι εργαζόμενοι σε υπηρεσίες είναι ένας εξειδικευμένος τύπος Εργάτες ιστού JavaScript. Το Service Worker είναι ένα αρχείο JavaScript που λειτουργεί λίγο σαν διακομιστής μεσολάβησης. Εντοπίζει εξερχόμενα αιτήματα δικτύου από την εφαρμογή σας, επιτρέποντάς σας να δημιουργείτε προσαρμοσμένες απαντήσεις. Μπορείτε, για παράδειγμα, να προβάλετε αποθηκευμένα αρχεία στον χρήστη όταν είναι εκτός σύνδεσης.

Οι εργαζόμενοι σε υπηρεσίες σάς επιτρέπουν επίσης να προσθέτετε λειτουργίες όπως ο συγχρονισμός στο παρασκήνιο στις εφαρμογές ιστού σας.

Γιατί εργάτες υπηρεσιών;

Οι προγραμματιστές ιστού προσπαθούν να επεκτείνουν τις δυνατότητες των εφαρμογών τους εδώ και πολύ καιρό. Πριν έρθουν οι υπάλληλοι του σέρβις, θα μπορούσατε να χρησιμοποιήσετε διάφορες λύσεις για να το κάνετε αυτό δυνατό. Ένα ιδιαίτερα αξιοσημείωτο ήταν το AppCache, το οποίο έκανε βολική την αποθήκευση των πόρων στην κρυφή μνήμη. Δυστυχώς, είχε προβλήματα που το έκαναν μη πρακτική λύση για τις περισσότερες εφαρμογές.

Το AppCache φαινόταν καλή ιδέα επειδή σας επέτρεπε να καθορίσετε στοιχεία για αποθήκευση στην κρυφή μνήμη πολύ εύκολα. Ωστόσο, έκανε πολλές υποθέσεις σχετικά με το τι προσπαθούσατε να κάνετε και στη συνέχεια έσπασε φρικτά όταν η εφαρμογή σας δεν ακολούθησε ακριβώς αυτές τις υποθέσεις. Διαβάστε το έργο του Jake Archibald (δυστυχώς με τίτλο αλλά καλογραμμένο) Η προσωρινή μνήμη εφαρμογής είναι ένα Douchebag Για περισσότερες πληροφορίες. (Πηγή: MDN)

Οι εργαζόμενοι σε υπηρεσίες είναι η τρέχουσα προσπάθεια μείωσης των περιορισμών των εφαρμογών ιστού, χωρίς τα μειονεκτήματα της τεχνολογίας όπως το AppCache.

Θήκες χρήσης για υπαλλήλους υπηρεσιών

Λοιπόν, τι ακριβώς σας επιτρέπουν να κάνετε οι εργαζόμενοι στην υπηρεσία; Οι εργαζόμενοι στην υπηρεσία σάς επιτρέπουν να προσθέσετε χαρακτηριστικά που είναι χαρακτηριστικά των εγγενών εφαρμογών στην εφαρμογή Ιστού σας. Μπορούν επίσης να παρέχουν μια κανονική εμπειρία σε συσκευές που δεν υποστηρίζουν εργαζόμενους σέρβις. Μερικές φορές καλούνται εφαρμογές όπως αυτή Προοδευτικές εφαρμογές Ιστού (PWA).

Ακολουθούν ορισμένες από τις δυνατότητες που καθιστούν δυνατές οι εργαζόμενοι στην υπηρεσία:

  • Επιτρέποντας στον χρήστη να συνεχίσει να χρησιμοποιεί την εφαρμογή (ή τουλάχιστον μέρη της) όταν δεν είναι πλέον συνδεδεμένος στο διαδίκτυο. Οι εργαζόμενοι σε υπηρεσίες το επιτυγχάνουν αυτό με την εξυπηρέτηση αποθηκευμένων στοιχείων ενεργητικού ως απάντηση σε αιτήματα.
  • Στα προγράμματα περιήγησης που βασίζονται στο Chromium, ένας εργαζόμενος σέρβις είναι μία από τις προϋποθέσεις για να είναι δυνατή η εγκατάσταση μιας εφαρμογής Ιστού.
  • Οι εργαζόμενοι σέρβις είναι απαραίτητοι για την εφαρμογή web σας για να μπορεί να εφαρμόσει ειδοποιήσεις push.

Ο κύκλος ζωής ενός υπαλλήλου υπηρεσιών

Οι εργαζόμενοι στην υπηρεσία μπορούν να ελέγχουν αιτήματα για έναν ολόκληρο ιστότοπο ή μόνο ένα μέρος των σελίδων του ιστότοπου. Μια συγκεκριμένη ιστοσελίδα μπορεί να έχει μόνο έναν ενεργό εργαζόμενο σέρβις και όλοι οι εργαζόμενοι σέρβις έχουν έναν κύκλο ζωής που βασίζεται σε συμβάντα. Ο κύκλος ζωής ενός εργαζομένου υπηρεσιών μοιάζει γενικά ως εξής:

  1. Εγγραφή και λήψη του εργαζομένου. Η ζωή ενός εργαζόμενου σέρβις ξεκινά όταν το καταχωρεί ένα αρχείο JavaScript. Εάν η εγγραφή είναι επιτυχής, ο εργαζόμενος σέρβις πραγματοποιεί λήψη και, στη συνέχεια, αρχίζει να εκτελείται μέσα σε ένα ειδικό νήμα.
  2. Όταν φορτώνεται μια σελίδα που ελέγχεται από τον εργαζόμενο σέρβις, ο εργαζόμενος σέρβις λαμβάνει ένα συμβάν «εγκατάστασης». Αυτό είναι πάντα το πρώτο συμβάν που λαμβάνει ένας εργαζόμενος σέρβις και μπορείτε να ρυθμίσετε έναν ακροατή για αυτό το συμβάν μέσα στον εργαζόμενο. Το συμβάν "εγκατάσταση" χρησιμοποιείται γενικά για την ανάκτηση και/ή την προσωρινή αποθήκευση οποιωνδήποτε πόρων που χρειάζεται ο εργαζόμενος σε υπηρεσίες.
  3. Αφού ο εργαζόμενος σέρβις ολοκληρώσει την εγκατάσταση, λαμβάνει ένα συμβάν «ενεργοποίηση». Αυτό το συμβάν επιτρέπει στον εργαζόμενο να καθαρίσει πλεονάζοντες πόρους που χρησιμοποιούνται από προϋπηρεσιακούς εργαζόμενους. Εάν ενημερώνετε έναν εργαζόμενο σέρβις, το συμβάν ενεργοποίησης θα ενεργοποιηθεί μόνο όταν είναι ασφαλές. Αυτό συμβαίνει όταν δεν υπάρχουν φορτωμένες σελίδες που χρησιμοποιούν ακόμα την παλιά έκδοση του Service Worker.
  4. Μετά από αυτό, ο εργαζόμενος σέρβις έχει τον πλήρη έλεγχο όλων των σελίδων που φορτώθηκαν μετά την επιτυχή καταχώρισή τους.
  5. Η τελευταία φάση του κύκλου ζωής είναι ο πλεονασμός, ο οποίος συμβαίνει όταν ο εργαζόμενος σέρβις αφαιρείται ή αντικαθίσταται από μια νεότερη έκδοση.

Πώς να χρησιμοποιήσετε το Service Workers σε JavaScript

Το Service Worker API (MDN) παρέχει τη διεπαφή που σας επιτρέπει να δημιουργείτε και να αλληλεπιδράτε με τους υπαλλήλους υπηρεσιών σε JavaScript.

Οι εργαζόμενοι σε υπηρεσίες ασχολούνται κυρίως με αιτήματα δικτύου και άλλα ασύγχρονα συμβάντα. Ως αποτέλεσμα, το API του service worker κάνει μεγάλη χρήση του Υποσχέσεις και ασύγχρονος προγραμματισμός.

Για να δημιουργήσετε έναν εργαζόμενο σέρβις, το πρώτο πράγμα που πρέπει να κάνετε είναι να καλέσετε το navigator.serviceWorker.register() μέθοδος. Δείτε πώς μπορεί να μοιάζει:

αν ('εργάτης υπηρεσιών' στο navigator) {
navigator.serviceWorker.register('/sw.js').then(λειτουργία(εγγραφή){
console.log('Η εγγραφή υπαλλήλου σέρβις πέτυχε:', εγγραφή)·
}).catch((σφάλμα) => {consol.log('Η εγγραφή υπαλλήλου σέρβις απέτυχε:', λάθος); });
} αλλού {
console.log('Οι εργαζόμενοι στην υπηρεσία δεν υποστηρίζονται.');
}

Το πιο εξωτερικό μπλοκ if εκτελεί ανίχνευση χαρακτηριστικών. Διασφαλίζει ότι ο κώδικας που σχετίζεται με το service worker θα εκτελείται μόνο σε προγράμματα περιήγησης που υποστηρίζουν τους εργαζόμενους σε υπηρεσίες.

Στη συνέχεια, ο κωδικός καλεί το κανω ΕΓΓΡΑΦΗ μέθοδος. Του μεταβιβάζει τη διαδρομή στον εργαζόμενο σέρβις (σε σχέση με την προέλευση του ιστότοπου) για να εγγραφεί και να το κατεβάσει. ο κανω ΕΓΓΡΑΦΗ Η μέθοδος δέχεται επίσης μια προαιρετική παράμετρο που ονομάζεται scope, η οποία μπορεί να χρησιμοποιηθεί για τον περιορισμό των σελίδων που ελέγχονται από τον εργαζόμενο. Οι εργαζόμενοι σέρβις ελέγχουν όλες τις σελίδες μιας εφαρμογής από προεπιλογή. ο κανω ΕΓΓΡΑΦΗ Η μέθοδος επιστρέφει μια υπόσχεση που υποδεικνύει εάν η εγγραφή ήταν επιτυχής.

Εάν το Promise επιλυθεί, ο υπάλληλος σέρβις εγγράφηκε με επιτυχία. Στη συνέχεια, ο κωδικός εκτυπώνει ένα αντικείμενο που αντιπροσωπεύει τον εγγεγραμμένο εργαζόμενο σέρβις στην κονσόλα.

Εάν η διαδικασία εγγραφής αποτύχει, ο κωδικός εντοπίζει το σφάλμα και το καταγράφει στην κονσόλα.

Στη συνέχεια, ακολουθεί ένα απλουστευμένο παράδειγμα για το πώς μπορεί να μοιάζει ο ίδιος ο εργαζόμενος στην υπηρεσία:

self.addEventListener('εγκαθιστώ', (γεγονός) => {
event.waitUntil(νέοςΥπόσχεση((επίλυση, απόρριψη) => {
console.log("κάνοντας πράγματα εγκατάστασης")
αποφασίζω()
}))
console.log("Ο υπάλληλος σέρβις ολοκλήρωσε την εγκατάσταση")
})

self.addEventListener('θέτω εις ενέργειαν', (γεγονός) => {
event.waitUntil(νέοςΥπόσχεση((επίλυση, απόρριψη) => {
console.log("κάνει πράγματα καθαρισμού!")
αποφασίζω()
}))
console.log('η ενεργοποίηση έγινε!')
})

self.addEventListener('φέρω', (γεγονός) => {
console.log("Το αίτημα υποκλοπή", Εκδήλωση)
});

Αυτός ο εργαζόμενος υπηρεσίας επίδειξης έχει τρεις ακροατές συμβάντων, εγγεγραμμένοι στον εαυτό του. Έχει ένα για το συμβάν «εγκατάσταση», το συμβάν «ενεργοποίηση» και το συμβάν «ανάκτηση».

Μέσα στους δύο πρώτους ακροατές, ο κώδικας χρησιμοποιεί το Περίμενε μέχρι μέθοδος. Αυτή η μέθοδος δέχεται μια υπόσχεση. Η δουλειά του είναι να βεβαιωθεί ότι ο εργαζόμενος σέρβις θα περιμένει να επιλυθεί ή να απορριφθεί η Υπόσχεση πριν προχωρήσει στο επόμενο συμβάν.

Το πρόγραμμα ακρόασης ανάκτησης ενεργοποιείται κάθε φορά που υποβάλλεται αίτημα για έναν πόρο που ελέγχει ο εργαζόμενος σέρβις.

Οι πόροι που ελέγχονται από έναν υπάλληλο υπηρεσιών περιλαμβάνουν όλες τις σελίδες που ελέγχει, καθώς και τυχόν στοιχεία που αναφέρονται σε αυτές τις σελίδες.

Βελτιώστε τις εφαρμογές Ιστού σας με Υπαλλήλους Υπηρεσιών

Οι εργαζόμενοι σε υπηρεσίες είναι ένα ειδικό είδος εργαζομένου στο διαδίκτυο που εξυπηρετεί έναν μοναδικό σκοπό. Κάθονται μπροστά από αιτήματα δικτύου για να ενεργοποιήσουν λειτουργίες όπως η πρόσβαση σε εφαρμογές εκτός σύνδεσης. Η χρήση υπαλλήλων υπηρεσιών σε μια εφαρμογή Ιστού μπορεί να βελτιώσει σημαντικά την εμπειρία χρήστη της. Μπορείτε να δημιουργήσετε υπαλλήλους υπηρεσιών και να αλληλεπιδράσετε μαζί τους, χρησιμοποιώντας το API του Service Worker.