Ενδιαφέρεστε για εφαρμογές ιστού εκτός σύνδεσης και πώς να επιτύχετε επίπεδα απόδοσης κοντά σε εγγενή προγράμματα; Μην κοιτάξετε πέρα ​​από τους υπαλλήλους υπηρεσιών.

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

Αυτές οι δυνατότητες φέρνουν την απρόσκοπτη και φιλική προς το χρήστη εμπειρία εγγενών εφαρμογών στο πρόγραμμα περιήγησης ιστού.

Οι εργαζόμενοι σε υπηρεσίες είναι ένα θεμελιώδες στοιχείο στη δημιουργία Προοδευτικών Εφαρμογών Ιστού (PWA).

Κατανόηση των εργαζομένων υπηρεσιών

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

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

instagram viewer

Βασικές εφαρμογές για υπαλλήλους υπηρεσιών

Υπάρχουν πολλές εφαρμογές για υπαλλήλους υπηρεσιών. Περιλαμβάνουν:

  • PWA: Οι εργαζόμενοι σε υπηρεσίες παρέχουν μεγάλη δύναμη στις Προοδευτικές εφαρμογές Ιστού. Εκτελούν προσαρμοσμένα αιτήματα δικτύου, ειδοποιήσεις push, υποστήριξη εκτός σύνδεσης και γρήγορη φόρτωση.
  • Προσωρινή αποθήκευση: Οι εργαζόμενοι στην υπηρεσία μπορούν να αποθηκεύσουν τα στοιχεία της εφαρμογής —εικόνες, κώδικα JavaScript και αρχεία CSS— στην προσωρινή αποθήκευση του προγράμματος περιήγησης. Αυτό επιτρέπει στο πρόγραμμα περιήγησης να τα ανακτήσει από την κρυφή μνήμη αντί να τα ανακτήσει από τον απομακρυσμένο διακομιστή μέσω του δικτύου. Ως αποτέλεσμα, το περιεχόμενο φορτώνεται πιο γρήγορα, κάτι που είναι ιδιαίτερα χρήσιμο για χρήστες με αργές ή αναξιόπιστες συνδέσεις στο διαδίκτυο.
  • Συγχρονισμός φόντου: Οι εργαζόμενοι στην υπηρεσία μπορούν να συγχρονίσουν δεδομένα και να εκτελέσουν άλλες εργασίες στο παρασκήνιο, ακόμη και όταν ο χρήστης δεν αλληλεπιδρά ενεργά με την εφαρμογή ή όταν η εφαρμογή δεν είναι ανοιχτή στο πρόγραμμα περιήγησης.

Ενσωμάτωση Service Workers στις εφαρμογές Next.js

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

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

const registerServiceWorker = async () => {
if ("serviceWorker"in navigator) {
 registration = await navigator.serviceWorker.register("/sw.js");
 }
};
registerServiceWorker();

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

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

registration.addEventListener("install", () => {
console.log("Service worker installed");
});
registration.addEventListener("activate", () => {
console.log("Service worker activated");
});

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

Μπορείτε να βρείτε τον κωδικό αυτού του έργου σε αυτό GitHub αποθήκη.

Δημιουργήστε ένα έργο Next.js

Για να ξεκινήσετε, εκτελέστε αυτήν την εντολή για να δημιουργήσετε ένα έργο Next.js τοπικά:

npx create-next-app next-project

Η προσθήκη ενός service worker σε μια εφαρμογή Next.js περιλαμβάνει τα ακόλουθα βήματα:

  1. Καταχωρίστε έναν εργαζόμενο σέρβις στο περιβάλλον παγκόσμιας εμβέλειας.
  2. Δημιουργήστε ένα αρχείο JavaScript του Service Worker στον δημόσιο κατάλογο.

Προσθήκη υπαλλήλου υπηρεσιών

Πρώτα, εγγράψτε έναν εργαζόμενο σέρβις. Ενημερώστε το src/pages/_app.js αρχείο ως εξής. Η συμπερίληψη του κώδικα σε αυτό το αρχείο διασφαλίζει ότι ο εργαζόμενος σέρβις εγγράφεται όταν φορτώνεται η εφαρμογή και έχει πρόσβαση σε όλα τα στοιχεία ενεργητικού της εφαρμογής.

import { useEffect } from'react';
exportdefaultfunctionApp({ Component, pageProps }) {
 useEffect(() => {
if ('serviceWorker'in navigator) {
 navigator.serviceWorker
 .register('/service-worker.js', { scope: '/' })
 .then((registration) => {
console.log(
'Service worker registered successfully. Scope:',
 registration.scope
 );
 })
 .catch((error) => {
console.error('Service worker registration failed:', error);
 });
 }
 }, []);
return<Component {...pageProps} />;
}

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

Εάν υπάρχει υποστήριξη, καταχωρεί το σενάριο του Service Worker που βρίσκεται στην καθορισμένη διαδρομή αρχείου και καθορίζει το εύρος του ως "/”. Αυτό σημαίνει ότι ο εργαζόμενος σέρβις έχει τον έλεγχο όλων των πόρων στην εφαρμογή. Μπορείτε να παρέχετε ένα πιο αναλυτικό εύρος αν θέλετε, π.χ./products”.

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

Εγκαταστήστε και ενεργοποιήστε το Service Worker

Προσθέστε τον ακόλουθο κώδικα σε ένα νέο αρχείο, public/service-worker.js.

const installEvent = () => {
 self.addEventListener('install', () => {
console.log('service worker installed!!!');
 });
};
installEvent();

const activateEvent = () => {
 self.addEventListener('activate', () => {
console.log('service worker activated!!!');
 });
};
activateEvent();

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

npm run dev

Ανοιξε Εργαλεία προγραμματιστών του Chrome παράθυρο (ή το αντίστοιχο του προγράμματος περιήγησής σας) και μεταβείτε στο Εφαρμογή αυτί. Σύμφωνα με το Υπάλληλοι υπηρεσιών στην ενότητα, θα πρέπει να δείτε τον υπάλληλο σέρβις που έχετε εγγράψει.

Με τον εργαζόμενο σέρβις εγγεγραμμένο, εγκατεστημένο και ενεργοποιημένο με επιτυχία, μπορείτε να εφαρμόσετε πολλές λειτουργίες όπως η προσωρινή αποθήκευση, ο συγχρονισμός φόντου ή αποστολή ειδοποιήσεων push.

Προσωρινή αποθήκευση πόρων με υπαλλήλους υπηρεσιών

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

Για να αποθηκεύσετε προσωρινά τα στοιχεία της εφαρμογής, συμπεριλάβετε τον ακόλουθο κώδικα στο service-worker.js αρχείο.

const cacheName = 'test-cache';
self.addEventListener('fetch', (event) => {
 event.respondWith(
 caches.match(event.request).then((cachedResponse) => {
return cachedResponse || fetch(event.request).then((response) => {
return caches.open(cacheName).then((cache) => {
 cache.put(event.request, response.clone());
return response;
 });
 });
 })
 );
});

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

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

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

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

Χρήση εργαζομένων υπηρεσιών για τη βελτίωση της απόδοσης

Το Service Workers είναι ένα ισχυρό εργαλείο για τη βελτίωση της απόδοσης των εφαρμογών Next.js. Μπορούν να αποθηκεύσουν πόρους στην κρυφή μνήμη, να υποκλέψουν αιτήματα και να παρέχουν υποστήριξη εκτός σύνδεσης, όλα αυτά μπορούν να βελτιώσουν την εμπειρία του χρήστη.

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