Κάντε την εφαρμογή σας να λειτουργεί εκτός σύνδεσης με το Service Workers

Σελίδα 1 από 2: Σελίδα 1: Ταχύτερη φόρτωση

Το Service Workers μπορεί να χρησιμοποιηθεί για να βελτιώσει τους χρόνους φόρτωσης και την υποστήριξη εκτός σύνδεσης για τους ιστότοπους και τις εφαρμογές ιστού σας. Σε αυτό το σεμινάριο θα σας δείξουμε πώς να βελτιώσετε προοδευτικά μια εφαρμογή ιστού με ένα Service Worker. Πρώτα θα καλύψουμε τι είναι ένας εργαζόμενος σέρβις και πώς λειτουργεί ο κύκλος ζωής του, στη συνέχεια θα σας δείξουμε πώς να το χρησιμοποιήσετε και στη συνέχεια να επιταχύνετε τον ιστότοπό σας (αυτή τη σελίδα) και να προσφέρουμε περιεχόμενο εκτός σύνδεσης (σελίδα 2).

πώς να φτιάξετε πρότυπα ιστότοπου προς πώληση

Τότε θα σας δείξουμε πώς να το κάνετε πώς να δημιουργήσετε μια εφαρμογή με εργαζόμενους σέρβις. Θα μάθετε πώς μπορείτε να δημιουργήσετε ένα Worker με γυμνά οστά που θα αποθηκεύει κρυφή μνήμη και θα εξυπηρετεί στατικά στοιχεία (παρέχοντας τεράστια ώθηση στην απόδοση σε επακόλουθα φορτία) και, στη συνέχεια, πώς να αποθηκεύσετε προσωρινά τις δυναμικές αποκρίσεις API και να δώσετε στην εφαρμογή επίδειξης πλήρη υποστήριξη εκτός σύνδεσης. Κατ 'αρχάς, ας δούμε τι ακριβώς είναι οι Workers και πώς λειτουργούν.

Δημιουργία ιστότοπου; Βελτιώστε τη διαδικασία σας με μια μεγάλη οικοδόμος ιστότοπου και διατηρήστε το με αξιοπρεπή φιλοξενία ιστοσελίδων υπηρεσία. Και κάντε τον αποθηκευτικό χώρο σας ταξινομημένο με αυτά αποθήκευση στο cloud επιλογές.



Τι είναι το Worker Service;

Λοιπόν, τι είναι το Worker Service; Είναι ένα σενάριο, γραμμένο σε JavaScript, το πρόγραμμα περιήγησής σας εκτελείται στο παρασκήνιο. Δεν επηρεάζει το κύριο νήμα (όπου το JavaScript εκτελείται συνήθως σε μια ιστοσελίδα) και δεν θα έρχεται σε διένεξη με τον κώδικα της εφαρμογής σας ούτε θα επηρεάζει την απόδοση του χρόνου εκτέλεσης.

Το Service Worker δεν έχει άμεση πρόσβαση στο DOM ή σε συμβάντα και αλληλεπιδράσεις χρηστών που συμβαίνουν στην ίδια την ιστοσελίδα. Σκεφτείτε το ως ένα επίπεδο που βρίσκεται μεταξύ της ιστοσελίδας και του δικτύου, επιτρέποντάς του να παρακολουθεί και να διαχειρίζεται αιτήματα δικτύου (π.χ. αιτήματα Ajax) που υποβάλλονται από τη σελίδα σας. Αυτό το καθιστά ιδανικό για τη διαχείριση κρυφής μνήμης και την υποστήριξη χρήσης εκτός σύνδεσης.

Ο κύκλος ζωής του Service Worker

Η ζωή ενός Service Worker ακολουθεί μια απλή ροή, αλλά μπορεί να είναι λίγο συγκεχυμένη όταν έχετε συνηθίσει τα σενάρια JS να δουλεύουν αμέσως:

Εγκατάσταση> Αναμονή (εγκατεστημένο)> Ενεργοποίηση> Ενεργοποιημένο> Περιττό

Όταν φορτώνεται η σελίδα σας για πρώτη φορά, ο κωδικός εγγραφής που προσθέσαμε index.html ξεκινά την εγκατάσταση του Service Worker. Όταν δεν υπάρχει υπάρχων Worker, το νέο Service Worker θα ενεργοποιηθεί αμέσως μετά την εγκατάσταση. Μια ιστοσελίδα μπορεί να έχει μόνο έναν Εργαζόμενο Εξυπηρέτησης ενεργό κάθε φορά.

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

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

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

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

01. Κλωνοποιήστε την εφαρμογή επίδειξης

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

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

Κατασκευάστηκε αναποτελεσματικά (σκόπιμα) χρησιμοποιώντας μεγάλες, περιττές βιβλιοθήκες όπως το jQuery και το Bootstrap, με μεγάλες μη βελτιστοποιημένες εικόνες για να δείξει τη διαφορά στην απόδοση όταν χρησιμοποιείτε ένα Service Worker. Αυτή τη στιγμή ζυγίζει σε ένα γελοίο 4,1 MB.

02. Αποκτήστε το κλειδί API σας

Για να λάβετε τα δεδομένα καιρού από το API θα πρέπει να αποκτήσετε δωρεάν ένα κλειδί API OpenWeatherMap :

Μόλις αποκτήσετε το κλειδί σας, ανοίξτε index.html και αναζητήστε το window.API_KEY μεταβλητή στο . Επικολλήστε το κλειδί σας στην τιμή:

window.API_KEY = 'paste-your-key-here';

03. Ξεκινήστε τον διακομιστή ανάπτυξης

Τώρα είμαστε έτοιμοι να αρχίσουμε να εργαζόμαστε στο έργο. Πρώτα απ 'όλα ας εγκαταστήσουμε τις εξαρτήσεις εκτελώντας:

npm install

Υπάρχουν δύο εργασίες για το εργαλείο κατασκευής. Τρέξιμο αρχή πάνω από τη στάθμη της θάλασσας για να ξεκινήσετε τον διακομιστή ανάπτυξης στη θύρα 3000. Εκτελέστε npm run build για να προετοιμάσετε την έκδοση «παραγωγής». Λάβετε υπόψη ότι αυτό είναι μόνο μια επίδειξη, οπότε δεν είναι πραγματικά μια έκδοση παραγωγής - δεν υπάρχει ελαχιστοποίηση ή τίποτα - τα αρχεία απλώς 'αναβιώνονται'.

Ένας αλγόριθμος χρησιμοποιείται για τη δημιουργία κατακερματισμού, όπως το 9c616053e5, από τα περιεχόμενα του αρχείου. Ο αλγόριθμος θα εξάγει πάντα τον ίδιο κατακερματισμό για τα ίδια περιεχόμενα, πράγμα που σημαίνει ότι όσο δεν τροποποιείτε το αρχείο, ο κατακερματισμός δεν θα αλλάξει. Στη συνέχεια, το κατακερματισμό προσαρτάται στο όνομα του αρχείου, οπότε για παράδειγμα, το styles.css μπορεί να γίνει στυλ-9c616053e5.css. Το κατακερματισμό αντιπροσωπεύει την αναθεώρηση του αρχείου - ως εκ τούτου «αναβιώνει».

cyber monday 2016 55 τηλεοπτικές προσφορές

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

04. Εισαγάγετε το Service Worker σας

Τώρα ας ξεκινήσουμε με το Service Worker μας. Δημιουργήστε ένα αρχείο που ονομάζεται sw.js στη ρίζα του src Ευρετήριο. Στη συνέχεια, προσθέστε αυτούς τους δύο ακροατές συμβάντων για να καταγράψετε το εγκαθιστώ και θέτω εις ενέργειαν εκδηλώσεις:

self.addEventListener('install', (event) => { console.log(event); }); self.addEventListener('activate', (event) => { console.log(event); });

ο εαυτός Η μεταβλητή εδώ αντιπροσωπεύει το συνολικό εύρος μόνο για ανάγνωση του Service Worker. Είναι λίγο σαν το παράθυρο αντικείμενο σε μια ιστοσελίδα.

πώς να φτιάξετε μια μάσκα προσώπου χαρτιού

Στη συνέχεια πρέπει να ενημερώσουμε το αρχείο index.html και να προσθέσουμε τις εντολές για να εγκαταστήσουμε το Service Worker. Προσθέστε αυτό το σενάριο λίγο πριν από το κλείσιμο ετικέτα. Θα εγγράψει τον εργαζόμενό μας και θα καταγράψει την τρέχουσα κατάστασή του.

if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(function(reg) { if (reg.installing) { console.log('SW installing'); } else if (reg.waiting) { console.log('SW waiting'); } else if (reg.active) { console.log('SW activated'); } }).catch(function(error) { // registration failed console.log('Registration failed with ' + error); }); }

Ξεκινήστε τον διακομιστή ανάπτυξης εκτελώντας αρχή πάνω από τη στάθμη της θάλασσας και ανοίξτε τη σελίδα σε ένα σύγχρονο πρόγραμμα περιήγησης. Θα συνιστούσαμε τη χρήση του Google Chrome, καθώς διαθέτει καλή υποστήριξη από τους εργαζόμενους στις υπηρεσίες DevTools, στην οποία θα αναφερθούμε σε όλο αυτό το σεμινάριο. Θα πρέπει να δείτε τρία πράγματα συνδεδεμένα στην Κονσόλα σας. δύο από το Service Worker για το εγκαθιστώ και θέτω εις ενέργειαν συμβάντα και το άλλο θα είναι το μήνυμα από την εγγραφή.

05. Ενεργοποιήστε το Worker

Θα πούμε στον εργαζόμενό μας να παραλείψει το βήμα αναμονής και να ενεργοποιηθεί τώρα. Ανοίξτε το αρχείο sw.js και προσθέστε αυτήν τη γραμμή οπουδήποτε μέσα στο εγκαθιστώ ακροατής εκδηλώσεων:

self.skipWaiting();

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

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

Το Chrome DevTools έχει μια χρήσιμη επιλογή που σημαίνει ότι μπορείτε να ενημερώσετε το Worker σας μόνο φορτώνοντας ξανά. Ανοίξτε το DevTools και μεταβείτε στην καρτέλα Εφαρμογή και, στη συνέχεια, επιλέξτε Service Worker από την αριστερή στήλη. Στο επάνω μέρος του πίνακα υπάρχει ένα πλαίσιο επιλογής με την ένδειξη Ενημέρωση για επαναφόρτωση, σημειώστε το. Το ενημερωμένο Worker σας θα εγκατασταθεί και θα ενεργοποιηθεί κατά την ανανέωση.

06. Επιβεβαίωση αλλαγών

Ας το επιβεβαιώσουμε προσθέτοντας console.log («foo») καλέστε σε οποιονδήποτε από τους ακροατές της εκδήλωσης και ανανεώστε τη σελίδα. Αυτό μας έβγαλε γιατί περιμέναμε να δούμε το αρχείο καταγραφής στην κονσόλα όταν ανανεώσαμε, αλλά το μόνο που βλέπαμε ήταν το μήνυμα 'SW ενεργοποιημένο'. Αποδεικνύεται ότι το Chrome ανανεώνει τη σελίδα δύο φορές όταν είναι επιλεγμένη η επιλογή Ενημέρωση για επαναφόρτωση.

Μπορείτε να το επιβεβαιώσετε επιλέγοντας το πλαίσιο ελέγχου Διατήρηση αρχείου καταγραφής στον πίνακα ρυθμίσεων της Κονσόλας και ανανεώνοντας ξανά. Θα πρέπει να δείτε την καταχώρηση εγκατάστασης και ενεργοποίησης συμβάντων, μαζί με το «foo», ακολουθούμενο από το «Πλοήγηση στο http: // localhost: 3000 /» για να υποδείξετε ότι η σελίδα φορτώθηκε ξανά και, στη συνέχεια, το τελικό μήνυμα «Ενεργοποιήθηκε SW».

07. Παρακολουθήστε το συμβάν ανάκτησης

Ώρα να προσθέσετε έναν άλλο ακροατή. Αυτή τη φορά θα παρακολουθήσουμε το φέρω συμβάν που ενεργοποιείται κάθε φορά που η σελίδα φορτώνει έναν πόρο, όπως ένα αρχείο CSS, μια εικόνα ή ακόμα και μια απόκριση API. Θα ανοίξουμε μια προσωρινή μνήμη, θα επιστρέψουμε την απόκριση αιτήματος στη σελίδα και στη συνέχεια - στο παρασκήνιο - προσωρινά αποθηκεύσουμε την απάντηση. Αρχικά ας προσθέσουμε τον ακροατή και να ανανεώσουμε, ώστε να μπορείτε να δείτε τι συμβαίνει. Στην κονσόλα θα δείτε πολλά FetchEvent αρχεία καταγραφής.

self.addEventListener('fetch', (event) => { console.log(event); });

Η λειτουργία εξυπηρέτησης χρησιμοποιεί το BrowserSync, το οποίο προσθέτει το δικό του σενάριο στη σελίδα και υποβάλλει αιτήματα στο websocket. Θα δείτε και τα FetchEvents για αυτά, αλλά θέλουμε να τα αγνοήσουμε. Θέλουμε επίσης να αποθηκεύσουμε προσωρινά τα αιτήματα GET από τον δικό μας τομέα. Ας προσθέσουμε λοιπόν μερικά πράγματα για να αγνοήσουμε τα ανεπιθύμητα αιτήματα, συμπεριλαμβανομένης της ρητής παραβίασης του / διαδρομή ευρετηρίου:

self.addEventListener('fetch', (event) => { // Ignore crossdomain requests if (!event.request.url.startsWith(self.location.origin)) { return; } // Ignore non-GET requests if (event.request.method !== 'GET') { return; } // Ignore browser-sync if (event.request.url.indexOf('browser-sync') > -1) { return; } // Prevent index route being cached if (event.request.url === (self.location.origin + '/')) { return; } // Prevent index.html being cached if (event.request.url.endsWith('index.html')) { return; } console.log(event); });

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

08. Κρυφή μνήμη των στοιχείων

Τώρα μπορούμε να ξεκινήσουμε την προσωρινή αποθήκευση αυτών των απαντήσεων. Πρώτα πρέπει να δώσουμε ένα όνομα στην κρυφή μνήμη. Ας καλέσουμε το δικό μας v1-περιουσιακά στοιχεία . Προσθέστε αυτήν τη γραμμή στην κορυφή του αρχείου sw.js:

const assetsCacheName = 'v1-assets';

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

// Tell the fetch to respond with this Promise chain event.respondWith( // Open the cache caches.open(assetsCacheName) .then((cache) => { // Make the request to the network return fetch(event.request) .then((response) => { // Cache the response cache.put(event.request, response.clone()); // Return the original response to the page return response; }); }) );

Αυτό θα προωθήσει το αίτημα στο δίκτυο και μετά θα αποθηκεύσει την απόκριση στην προσωρινή μνήμη, προτού στείλει την αρχική απόκριση πίσω στη σελίδα.

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

κορυφαία επεισόδια 10 ren και stimpy

Ανανεώστε μερικές φορές και ελέγξτε την προσωρινή μνήμη στην καρτέλα DevTools> Application. Αναπτύξτε το δέντρο αποθήκευσης προσωρινής μνήμης στην αριστερή στήλη και θα πρέπει να δείτε την προσωρινή μνήμη σας με όλες τις αποθηκευμένες απαντήσεις.

09. Προβολή από την προσωρινή μνήμη

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

// Tell the fetch to respond with this chain event.respondWith( // Open the cache caches.open(assetsCacheName) .then((cache) => { // Look for matching request in the cache return cache.match(event.request) .then((matched) => { // If a match is found return the cached version first if (matched) { return matched; } // Otherwise continue to the network return fetch(event.request) .then((response) => { // Cache the response cache.put(event.request, response.clone()); // Return the original response to the page return response; }); }); }) );

Αποθηκεύστε το αρχείο και ανανεώστε. Ελέγξτε την καρτέλα DevTools> Network και θα πρέπει να δείτε (από το ServiceWorker) στη στήλη Μέγεθος για καθένα από τα στατικά στοιχεία.

Φου, τελειώσαμε. Για τόσο μικρό αριθμό κώδικα, υπάρχουν πολλά να καταλάβουμε. Θα πρέπει να δείτε ότι η ανανέωση της σελίδας μόλις αποθηκευτούν όλα τα στοιχεία είναι αρκετά γρήγορη, αλλά ας κάνουμε έναν γρήγορο (μη επιστημονικό) έλεγχο των χρόνων φόρτωσης σε μια πεταλούμενη σύνδεση (καρτέλα DevTools> Network).

Χωρίς το Service Worker, η φόρτωση μέσω ενός προσομοιωμένου γρήγορου δικτύου 3G διαρκεί σχεδόν 30 δευτερόλεπτα για τη φόρτωση όλων. Με το Service Worker, με την ίδια σύνδεση πεταλούδας αλλά η φόρτωση από την προσωρινή μνήμη, διαρκεί λίγο λιγότερο από ένα δευτερόλεπτο.

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

Επόμενη σελίδα: χρησιμοποιήστε το Service Worker για να προσφέρετε διαδικτυακή πρόσβαση

  • 1
  • δύο

Τρέχουσα σελίδα: Σελίδα 1: Ταχύτερη φόρτωση

Επόμενη σελίδα Σελίδα 2: Προσθήκη πρόσβασης εκτός σύνδεσης