Δημιουργία εφαρμογών που λειτουργούν εκτός σύνδεσης

Sep 13, 2025

πως να

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

Κατεβάστε τον κωδικό από το FileSilo

01. Ένας διακομιστής HTTPS

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

Για αναπτυξιακούς σκοπούς, ωστόσο, μπορούμε να τρέξουμε χωρίς https από τότε http: // localhost / επιτρέπεται ως εξαίρεση από αυτόν τον κανόνα. Ο απλούστερος τρόπος για να ξεκινήσετε είναι με το NPM http-server πακέτο.

 NPM Εγκατάσταση http-server -g
http-server -p 8000-c-1

02. Ρυθμίστε μια βασική σελίδα

Δεν υπάρχει τίποτα στο διακομιστή τώρα, οπότε ας κάνουμε μια βασική σελίδα για να εξυπηρετήσει. Θα δημιουργήσουμε ένα νέο αρχείο index.html και όταν τρέχουμε το διακομιστή θα είναι τώρα προσβάσιμο στο http: // localhost: 8000 .

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

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
  & lt; κεφάλι & gt;
  & lt; meta charset = "utf-8" / & gt;
  & lt; Τίτλος & GT; εργαζόμενος εξυπηρέτησης & lt; / τίτλος & gt;
  & lt; script src = "site.js" & gt; / script & gt;
  & lt; link rel = "stylesheet" type = "text / css" href = "custom.css" & gt;
  & lt; / head & gt;
  & lt; body & gt;
  & lt; header & gt;
  & lt; h1 & gt; welcome & lt; / h1 & gt;
  & lt; / header & gt;
  & lt; div id = "περιεχόμενο" & gt;
  & lt; p & gt; περιεχόμενο εδώ & lt; / p & gt;
  & lt; img src = "kitty.jpg" πλάτος = "100%" & gt;
  & lt; / div & gt;
  & lt; / Body & GT;
& lt; / html & gt;

03. Καταχωρίστε έναν εργαζόμενο εξυπηρέτησης

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

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

Εγκατάσταση: Μόλις καταχωρηθεί ένας εργαζόμενος υπηρεσίας, η εγκατάστασή του χρησιμοποιείται συνήθως για τη λήψη και τη μνήμη Cache Static Περιεχομένου
Εγκατεστημένο: Ο εργαζόμενος είναι θεωρητικά έτοιμος για χρήση, αλλά δεν ενεργοποιεί αμέσως
Ενεργοποιητικός: Ένας εγκατεστημένος εργαζόμενος εξυπηρέτησης θα ενεργοποιηθεί εάν δεν υπάρχει κανένας υφιστάμενος εργαζόμενος στον τομέα των υπηρεσιών ή ορισμένες προϋποθέσεις να οδηγήσουν το υπάρχον να λήξει. Η ενεργοποίηση χρησιμοποιείται συνήθως για να καθαρίσει τα παλιά αρχεία από το περιεχόμενο χωρίς προσωρινά
Ενεργοποιημένη: Ο εργαζόμενος εξυπηρέτησης έχει τώρα τον έλεγχο του εγγράφου και μπορεί να χειριστεί τα αιτήματα
Περιττός: Εάν ο εργαζόμενος υπηρεσίας δεν κατάφερε να εγκαταστήσει ή να ενεργοποιήσει ή αν αντικατασταθεί από έναν νεότερο εργαζόμενο υπηρεσίας

04. Ελέγξτε ότι είστε εγγεγραμμένοι

Ας καταγράψουμε έναν εργαζόμενο εξυπηρέτησης. Αυτό αποδίδει αποτελεσματικά το πρόγραμμα περιήγησης στο αρχείο Javascript που ορίζει τη συμπεριφορά του εργαζομένου. Η εγγραφή γίνεται χρησιμοποιώντας το αντικείμενο του serveryworker που είναι το σημείο εισόδου στο API. Θα ελέγξουμε επίσης το API είναι στην πραγματικότητα υπάρχει στο πρόγραμμα περιήγησης πριν προσπαθήσετε να το κάνετε αυτό.

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

 εάν («εργαζόμενος» στον πλοηγό του πλοήγησης) {
  window.addeventListener ('φορτίο', λειτουργία () {
  Navigator.servicewworker.register ('serviceworker.js', {Πεδίο: './' }).Then(
  console.log ("εργαζόμενος στον τομέα των υπηρεσιών κατέγραψε επιτυχώς");
  }, λειτουργία (σφάλμα) {
  Console.log ("Σφάλμα καταχώρησης εργαζομένου υπηρεσίας:" + σφάλμα);
  });
  });
}

05. Εφαρμογή εργαζομένων υπηρεσιών

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

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

 var trenionCache = 'demo-cache';
self.addeventListener ('Εγκατάσταση', Event = & GT; {
  event.waituntil (
  caches.Open (creathcache) .then (λειτουργία (cache) {
  console.log ("προσθήκη περιεχομένου στην κρυφή μνήμη");
  επιστροφή cache.addall ([
  './index_offline.html',
  './kitty_offline.jpg',
  './custom.css'
  ]);
  })
  )
}) ·

06. Εκδήλωση Fetch

Η σελίδα μας θα αποκτηθεί τώρα το περιεχόμενο της προσωρινής μνήμης όταν φορτωθεί, αλλά χρειαζόμαστε κάποιο μηχανισμό για την παρεμπόδιση των αιτημάτων και να τα ανακατευθύνουμε σε αυτή την προσωρινή μνήμη. Για να το κάνετε αυτό, πρέπει να ακούσουμε φέρω γεγονότα, τα οποία ενεργοποιούνται όταν ένα αίτημα όπως η απόκτηση μας index.html Το αρχείο γίνεται σε ολόκληρο το δίκτυο. Στη συνέχεια ταιριάζουμε το αίτημα κατά της κρυφής μνήμης και εξυπηρετούμε τον αποθηκευμένο πόρο εάν βρεθεί. Διαφορετικά, επιστρέφουμε σε ένα αίτημα API Fetch στο διακομιστή.

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

 self.addeventListener ('fetch', event = & gt; {
  συμβάν. ανταποκρίνεται (
  caches.match (event.request) .then (απάντηση = & gt; {
  απόκριση επιστροφής || fetch (event.request);
  })
   )
    }) ·

07. Επεκτείνετε το συμβάν φόρτωσης

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

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

 self.addeventListener ('fetch', event = & gt; {
  αν (event.request.mode === 'πλοηγηθείτε') {
  συμβάν. ανταποκρίνεται (
  fetch (event.request) .Catch (ERROR = & GT; {
  console.log ("Η σελίδα δεν είναι διαθέσιμη. Επιστρέφοντας περιεχόμενο εκτός σύνδεσης.");
  επιστροφή caches.amatch ('./ index_offline.html');
  })
  )
  } αλλιώς {
  συμβάν. ανταποκρίνεται (
  caches.match (event.request) .then (απάντηση = & gt; {
  απόκριση επιστροφής || fetch (event.request);
  })
  )
  }
}) ·

08. Διαγραφή της προσωρινής μνήμης

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

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

 This.addeventListener ('Activate', Event = & GT; {
  var activecaches = [trenioncache];
  console.log ("ενεργοποιημένος εργαζόμενος υπηρεσίας. Ο έλεγχος της κρυφής μνήμης είναι ενημερωμένος.");
  event.waituntil (
  caches.Keys (). Στη συνέχεια (Keylist = & GT; {
  Επιστροφή Promise.all (Keylist.map (Key = & GT; {
  Εάν (Activecaches.indexof (πλήκτρο) === -1) {
  Console.log ("Διαγραφή παλιάς κρυφής μνήμης" + κλειδί);
  επιστροφή caches.delete (κλειδί);
  }
  }));
  })
  )
}) ·

Αυτό το άρθρο δημοσιεύθηκε στο θέμα του περιοδικού Web Designer # 268. Εγγραφείτε τώρα.

Διαβάστε περισσότερα:

Ένας οδηγός ενός κωδικοποιητή για το apis
Ξεκινήστε με το WebGL χρησιμοποιώντας τρεις
12 τεράστιες τάσεις σχεδιασμού ιστοσελίδων για το 2018

Δημιουργία εφαρμογών που λειτουργούν εκτός σύνδεσης

01. Ένας διακομιστής HTTPS

02. Ρυθμίστε μια βασική σελίδα

03. Καταχωρίστε έναν εργαζόμενο εξυπηρέτησης

04. Ελέγξτε ότι είστε εγγεγραμμένοι

05. Εφαρμογή εργαζομένων υπηρεσιών

06. Εκδήλωση Fetch

07. Επεκτείνετε το συμβάν φόρτωσης

08. Διαγραφή της προσωρινής μνήμης

πως να - Τα πιο δημοφιλή άρθρα

Πώς να χρησιμοποιήσετε εικόνες αναφοράς: 13 βασικές συμβουλές για καλλιτέχνες

Πώς να αφαιρέσετε τις ρυτίδες στο Photoshop

21 βήματα για το Super Speedy JavaScript

Προσθέστε ψηφιακά χρώματα σε σχέδια μολύβι

Βάλτε μια ρύθμιση παιχνιδιού Sci-Fi στο Photoshop

Δημιουργία πινέλου ματιών μετατόπισης διάνυσμα

Πώς να σχεδιάσετε μεταλλικές αντανακλάσεις

Βάλτε μια επική σκηνή της Νέας Υόρκης

Κατηγορίες