Αντιμετώπιση προβλημάτων

Γνώση Υπολογιστών >> Αντιμετώπιση προβλημάτων >  >> Browser

Πώς μπορούν οι προοδευτικές εφαρμογές ιστού να επωφεληθούν από την υποστήριξη εκτός σύνδεσης;

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

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

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

* Χειριστείτε αιτήματα δικτύου: Ο εργαζόμενος στον τομέα της υπηρεσίας μπορεί να παρεμποδίσει τα αιτήματα για δεδομένα από API ή άλλους πόρους δικτύου. Εάν ο χρήστης είναι εκτός σύνδεσης, μπορεί να επιστρέψει προσωρινές αποκρίσεις. Εάν online, μπορεί να πάρει τα δεδομένα από το δίκτυο και να ενημερώσει την προσωρινή μνήμη.

* Απαντήστε στις ειδοποιήσεις Push: Οι εργαζόμενοι στις υπηρεσίες επιτρέπουν τις ειδοποιήσεις ώθησης, ακόμη και όταν η εφαρμογή δεν είναι ανοιχτή, καθιστώντας δυνατή την ενημέρωση του χρήστη για ενημερώσεις ή νέο περιεχόμενο ακόμη και εκτός σύνδεσης. Ωστόσο, η ίδια η ειδοποίηση θα εμφανιστεί όταν ο χρήστης πηγαίνει στο διαδίκτυο.

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

3. Στρατηγικές προσωρινής αποθήκευσης: Η αποτελεσματική προσωρινή αποθήκευση είναι ζωτικής σημασίας. Τα PWA χρησιμοποιούν διαφορετικές στρατηγικές προσωρινής αποθήκευσης για να εξισορροπήσουν το φρέσκο περιεχόμενο με τη διαθεσιμότητα εκτός σύνδεσης. Στρατηγικές όπως:

* Cache-First: Σερβίρετε πρώτα την απόκριση προσωρινής αποθήκευσης. Μόνο παραλάβετε από το δίκτυο εάν η αποθηκευμένη απόκριση είναι γεμάτη ή λείπει.

* Δίκτυο-πρώτης: Λήψη πρώτα από το δίκτυο. Προσωρινή μνήμη την απάντηση για μεταγενέστερη χρήση.

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

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

Παράδειγμα εφαρμογής (εννοιολογική χρήση εργαζομένων υπηρεσίας):

`` `javascript

// στον εργαζόμενο της υπηρεσίας σας:

self.addeventListener ('install', (event) => {

event.waituntil (

caches.open ('my-cache'). Στη συνέχεια ((cache) => {

Επιστροφή cache.addall ([[

'/',

'/',

'/styles.css',

'/script.js',

// ... άλλα περιουσιακά στοιχεία

])

})

)

});

self.addeventListener ('fetch', (event) => {

event.respondwith (

caches.match (event.request). Στη συνέχεια ((απάντηση) => {

Απάντηση επιστροφής || fetch (event.request); // στρατηγική προσωρινής μνήμης

})

)

});

`` `

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

Συναφής σύστασή

Πνευματικά δικαιώματα © Γνώση Υπολογιστών Όλα τα δικαιώματα κατοχυρωμένα