Κάντε την εργασία σας εκτός σύνδεσης με τους εργαζόμενους στις υπηρεσίες

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

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

Δημιουργία μιας ιστοσελίδας; Εξορμήστε τη διαδικασία σας με ένα μεγάλο οικοδόμος ιστότοπου και να το διατηρήσετε με ένα αξιοπρεπές web hosting υπηρεσία. Και πάρτε το αποθηκευτικό σας ταξινομημένο με αυτά αποθήκευση σύννεφων επιλογές.

Τι είναι ο εργαζόμενος;

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

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

Ο κύκλος ζωής των εργαζομένων υπηρεσιών

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

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

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

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

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

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

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

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

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

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

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

02. Πάρτε το κλειδί API

Για να φτιάξετε τα δεδομένα καιρού από το API, θα χρειαστεί να πάρετε τον εαυτό σας ένα δωρεάν κλειδί API από Openweathermap :

Μόλις έχετε το κλειδί σας, ανοίξτε index.html και αναζητήστε το window.api_key μεταβλητή στο & lt; κεφάλι & gt; . Επικολλήστε το κλειδί σας στην τιμή:

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

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

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

    npm install

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

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

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

04. Εισάγετε τον εργαζόμενο εξυπηρέτησης

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

 self.addeventListener ('Εγκατάσταση', (συμβάν) = & gt; {
      console.log (συμβάν);
    });

    self.addeventListener ('activate', (συμβάν) = & gt; {
      console.log (συμβάν);
    }) · 

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

Στη συνέχεια πρέπει να ενημερώσουμε το αρχείο index.html και να προσθέσουμε τις εντολές για την εγκατάσταση του εργαζόμενου υπηρεσίας. Προσθέστε αυτό το σενάριο λίγο πριν το κλείσιμο & lt; / Body & GT; ετικέτα. Θα καταχωρήσει τον εργαζόμενο και θα καταγράψει την τρέχουσα κατάσταση του.

 & lt; script & gt;
     Εάν ("εργαζόμενος επεξεργαστής" στον πλοηγό) {
       Navigator.serviceworker.register ('/ sw.js')
         .Then (λειτουργία (reg) {
           αν (reg.installing) {
             console.log ('sw seting');
           } αλλιώς εάν (reg.waiting) {
             console.log ('sw αναμονή').
           } αλλιώς εάν (reg.active) {
             console.log («ενεργοποιηθεί η SW»).
           }
         }). Πιάστε (λειτουργία (σφάλμα) {
           // η εγγραφή απέτυχε
           console.log («Η εγγραφή απέτυχε με το σφάλμα» +).
         });
     }
   & lt; / script & gt; 

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

05. Ενεργοποιήστε τον εργαζόμενο

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

 self.skipwaiting (); 

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

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

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

06. Επιβεβαιώστε τις αλλαγές

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

Μπορείτε να το επιβεβαιώσετε με το Ticking The Presserve log Tick Box στον πίνακα Ρυθμίσεις κονσόλας και αναζωογονεί ξανά. Θα πρέπει να δείτε την εγκατάσταση και να ενεργοποιήσετε τα συμβάντα που καταγράφονται, μαζί με το «Foo», ακολουθούμενο από το "πλοηγηθεί στο http: // localhost: 3000 / 'για να υποδείξει ότι η σελίδα επαναφορτώθηκε και στη συνέχεια τότε το τελικό μήνυμα" Ενεργοποιημένο ".

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

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

 self.addeventListener ('fetch', (event) = & gt; {
 console.log (συμβάν);
}) · 

Η λειτουργία Serve χρησιμοποιεί το Browsersync, το οποίο προσθέτει το δικό του σενάριο στη σελίδα και κάνει τα ζητήματα Websocket. Θα δείτε και τα παρατήρηση για αυτά, αλλά θέλουμε να το αγνοήσουμε. Επίσης, θέλουμε μόνο να προσάπουμε τα αιτήματα από το δικό μας τομέα. Ας προσθέσουμε λοιπόν μερικά πράγματα για να αγνοήσουμε ανεπιθύμητα αιτήματα, συμπεριλαμβανομένης της ρητώς αγνοώντας το / Διαδρομή δείκτη:

 self.addeventListener ('fetch', (event) = & gt; {
 // αγνοούν τα αιτήματα του Crossdomain
 αν (! event.request.url.startswith (self.location.Origin)) {
   ΕΠΙΣΤΡΟΦΗ;
 }
 // αγνοήστε τα μη ληφθέντα αιτήματα
 αν (event.request.method! == 'get') {
   ΕΠΙΣΤΡΟΦΗ;
 }
 // αγνοήστε το πρόγραμμα περιήγησης-συγχρονισμού
 Εάν (event.request.url.indexof ('browser-sync') & gt; -1) {
   ΕΠΙΣΤΡΟΦΗ;
 }
 // Αποτρέψτε την προσωρινή αποθήκευση του δείκτη
 εάν (event.request.url === (self.location.Origin + '/')) {
   ΕΠΙΣΤΡΟΦΗ;
 }
 // Αποτρέψτε το index.html να προσδιοριστεί
 αν (event.request.url.endswith ('index.html')) {
   ΕΠΙΣΤΡΟΦΗ;
 }
 console.log (συμβάν);
}) · 

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

08. Cache Τα περιουσιακά στοιχεία

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

 const conct cachename = 'v1-περιουσιακά στοιχεία'. 

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

 // Πείτε τη φέτα να ανταποκριθεί με αυτή την αλυσίδα υπόσχεσης
 συμβάν. ανταποκρίνεται (
   // ανοίξτε την προσωρινή μνήμη
   Caches.Open (EuropgateCachename)
     .Then ((cache) = & gt; {
       // Κάντε το αίτημα στο δίκτυο
       Επιστροφή φέτα (Event.Request)
         .Then ((απάντηση) = & gt; {
           // cache την απάντηση
           cache.put (event.request, απάντηση.Clone ());
           // επιστρέψτε την αρχική απόκριση στη σελίδα
           Επιστρέψτε την απάντηση;
         });
     })
 ) · 

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

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

Ανανεώστε μερικές φορές και ελέγξτε την κρυφή μνήμη στο Devtools & GT; Καρτέλα εφαρμογής. Αναπτύξτε τη δομή αποθήκευσης κρυφής μνήμης στην αριστερή στήλη και θα πρέπει να δείτε την προσωρινή μνήμη σας με όλες τις αποθηκευμένες αποκρίσεις.

09. Σερβίρετε από την κρυφή μνήμη

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

// Πείτε τη φέτα να ανταποκριθεί με αυτή την αλυσίδα
 συμβάν. ανταποκρίνεται (
   // ανοίξτε την προσωρινή μνήμη
   Caches.Open (EuropgateCachename)
     .Then ((cache) = & gt; {
       // αναζητήστε το αίτημα αντιστοίχισης στην κρυφή μνήμη
       επιστροφή cache.match (event.request)
         .Then ((αντιστοιχισμένο) = & gt; {
           // αν βρεθεί ένας αγώνας επιστρέψει πρώτα την αποθηκευμένη έκδοση
           Εάν (αντιστοιχία) {
             επιστροφή αντιστοιχούσε;
           }
           // διαφορετικά συνεχίστε στο δίκτυο
           Επιστροφή φέτα (Event.Request)
             .Then ((απάντηση) = & gt; {
               // cache την απάντηση
               cache.put (event.request, απάντηση.Clone ());
               // επιστρέψτε την αρχική απόκριση στη σελίδα
               Επιστρέψτε την απάντηση;
             });
         });
     })
) · 

Αποθηκεύστε το αρχείο και ανανέωση. Ελέγξτε DEVTOOLS & GT; Καρτέλα δικτύου και θα πρέπει να δείτε (από το Serverworker) που αναφέρονται στη στήλη μεγέθους για κάθε ένα από τα στατικά περιουσιακά στοιχεία.

PHEW, έχουμε τελειώσει. Για ένα τόσο μικρό ποσό κώδικα, υπάρχουν πολλά που πρέπει να καταλάβουμε. Θα πρέπει να δείτε ότι η ανανέωση της σελίδας μόλις αποθηκευτούν όλα τα περιουσιακά στοιχεία είναι αρκετά ελεύθερα, αλλά ας κάνουμε έναν γρήγορο (μη αντεπιστημονικό) έλεγχο των χρόνων φόρτωσης σε μια γλωσσική σύνδεση (DEVTOOLS & GT; TAB).

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

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

Επόμενη Σελίδα: Χρησιμοποιήστε εργαζόμενο εξυπηρέτησης για να προσφέρετε πρόσβαση στο διαδίκτυο

• 1
• 2

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