Τι είναι η κρυφή μνήμη της εφαρμογής στο HTML5…

Ο μηχανισμός Application Cache (Μνήμη Εφαρμογής) στο HTML5 είναι ένας μηχανισμός που επιτρέπει σε μια ιστοσελίδα να λειτουργεί offline, παρέχοντας ένα σύνολο πόρων (σελίδες HTML, CSS, JavaScript, εικόνες) που ο φυλλομετρητής αποθηκεύει τοπικά.

Για τη χρήση της μνήμης εφαρμογής, απαιτείται ένα αρχείο manifest με επέκταση .appcache, το οποίο συνδέεται με τη σελίδα HTML μέσω του χαρακτηριστικού manifest στην ετικέτα <html>:

<html manifest="manifest.appcache">
...
</html>

Η δομή του αρχείου manifest είναι η εξής:

CACHE MANIFEST
# Έκδοση του manifest (προαιρετικό, για ενημέρωση της cache)
# v1.0

CACHE:
# Ρόυθμιση πόρων σε cache
/css/style.css
/js/script.js
/images/logo.png

FALLBACK:
# Εφεδρικοί πόροι σε περίπτωση απουσίας σύνδεσης
/offline.html /

NETWORK:
# Πόροι που πρέπει πάντα να ζητούνται από το δίκτυο
*

Οι κύριες ενότητες του αρχείου manifest:

CACHE:: Οι πόροι που αναφέρονται σε αυτήν την ενότητα θα αποθηκευτούν στην cache μετά το πρώτο φόρτωμα της σελίδας με το συγκεκριμένο manifest.
FALLBACK:: Ορίζει εφεδρικούς πόρους. Αν μια αίτηση δικτύου για έναν κύριο πόρο αποτύχει, ο περιηγητής θα φορτώσει τον καθορισμένο εφεδρικό πόρο. Μορφή: κύριος_πόρος εφεδρικός_πόρος.
NETWORK:: Οι πόροι που αναφέρονται σε αυτήν την ενότητα δεν θα αποθηκευτούν ποτέ στην cache και θα ζητούνται πάντα από το δίκτυο. Το σύμβολο * σημαίνει ότι όλοι οι πόροι που δεν αναφέρονται σε άλλες ενότητες θα ζητούνται πάντα από το δίκτυο.

Η ενημέρωση της cache γίνεται όταν αλλάξει το αρχείο manifest. Ο περιηγητής κατεβάζει το ενημερωμένο manifest, το συγκρίνει με το τρέχον και κατεβάζει νέους ή τροποποιημένους πόρους. Τα νέα αρχεία είναι διαθέσιμα μόνο μετά την ανανέωση της σελίδας.

Εκδηλώσεις που σχετίζονται με την cache της εφαρμογής:

checking: Ο περιηγητής ελέγχει αν υπάρχει νέα έκδοση του manifest.
downloading: Ο περιηγητής κατεβάζει τους πόρους που αναφέρονται στη νέα έκδοση του manifest.
progress: Η πρόοδος της λήψης πόρων.
updateready: Η νέα έκδοση της cache είναι έτοιμη για χρήση. Απαιτείται ανανέωση της σελίδας.
cached: Οι πόροι έχουν αποθηκευτεί με επιτυχία στην cache κατά την πρώτη φόρτωση.
noupdate: Το manifest δεν έχει αλλάξει.
error: Παρουσιάστηκε σφάλμα κατά τη φόρτωση ή την ενημέρωση της cache.

Η API της cache της εφαρμογής είναι διαθέσιμη μέσω του window.applicationCache.

// Έλεγχος κατάστασης cache
console.log(window.applicationCache.status);

// Διαχείριση του γεγονότος updateready
window.applicationCache.addEventListener('updateready', function() {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    // Εφαρμογή της νέας έκδοσης της cache και επαναφόρτωση της σελίδας
    window.applicationCache.swapCache();
    window.location.reload();
  }
}, false);

Αν και η Application Cache παρείχε offline δυνατότητες, η χρήση της δεν συνιστάται σε νέα έργα λόγω της δυσκολίας διαχείρισης, των προβλημάτων με τις ενημερώσεις και της έλλειψης ευελιξίας. Για σύγχρονες προσεγγίσεις offline πρόσβασης και άλλων λειτουργιών των προοδευτικών web εφαρμογών (PWA), χρησιμοποιούνται οι Service Workers.

Τι είναι η κρυφή μνήμη της εφαρμογής στο HTML5;