Αποθήκευση εφαρμογών HTML5

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

Τι είναι η αποθήκευση εφαρμογών;

Το HTML5 εισήγαγε την αποθήκευση εφαρμογών (Application Cache), αυτό σημαίνει ότι μπορεί να αποθηκευτούν οι εφαρμογές web και να προσβάλλονται χωρίς σύνδεση στο Διαδίκτυο.

Η αποθήκευση εφαρμογών του HTML5 προσφέρει τρία πλεονεκτήματα για την εφαρμογή:

  1. Περιήγηση εκτός σύνδεσης - οι χρήστες μπορούν να τα χρησιμοποιούν όταν η εφαρμογή είναι εκτός σύνδεσης
  2. Σταθερότητα - οι αποθηκευμένα πόροι φορτώνουν γρηγορότερα
  3. Μείωση φόρτου σερβερών - ο περιηγητής θα κατεβάσει μόνο τα πόροι που έχουν ενημερωθεί ή更改θεί από τον διακομιστή

Υποστήριξη περιηγητών

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

API
Αποθήκευση Εφαρμογής 4.0 10.0 3.5 4.0 11.5

Παράδειγμα HTML Cache Manifest

Το παρακάτω παράδειγμα δείχνει ένα αρχείο HTML με cache manifest (για περιήγηση εκτός σύνδεσης):

Παράδειγμα

!DOCTYPE HTML
<html manifest="demo.appcache">
<body>
Περιεχόμενο εγγράφου ......
</body>
</html>

Δοκιμάστε το προσωπικά

Βασικά του Cache Manifest

Για να ενεργοποιήσετε την αποθήκευση εφαρμογής, περιλαμβάνετε την ιδιότητα manifest στο ετικέτα <html>:

!DOCTYPE HTML
<html manifest="demo.appcache">
...
</html>

Κάθε σελίδα που καθορίζει το manifest αποθηκεύεται στον προμηθευτή όταν ο χρήστης την επισκέπτεται. Αν δεν καθοριστεί η ιδιότητα manifest, η σελίδα δεν θα αποθηκευτεί στον προμηθευτή (εκτός αν η σελίδα καθοριστεί άμεσα στο αρχείο manifest)

Η προτεινόμενη επέκταση αρχείου για το αρχείο manifest είναι: ".appcache".

Σημείωση:Το αρχείο manifest πρέπει να έχει το σωστό τύπο MIME, δηλαδή "text/cache-manifest". Μust be configured on the web server.

Αρχείο Manifest

Το αρχείο manifest είναι ένα απλό αρχείο κειμένου που ενημερώνει τον περιηγητή για το περιεχόμενο που αποθηκεύεται στον προμηθευτή (και το περιεχόμενο που δεν αποθηκεύεται)

Το αρχείο manifest έχει τρία μέρη:

  • CACHE MANIFEST - Στην ενότητα αυτού του τίτλου αναφέρονται τα αρχεία που θα αποθηκευτούν στον προμηθευτή μετά την πρώτη λήψη
  • NETWORK - Στην ενότητα αυτού του τίτλου αναφέρονται τα αρχεία που χρειάζονται σύνδεση με τον διακομιστή και δεν θα αποθηκευτούν στον προμηθευτή
  • FALLBACK - Στην ενότητα αυτού του τίτλου αναφέρονται τα αρχεία που καθορίζουν την επαναφορά σελίδας όταν η σελίδα δεν είναι προσβάσιμη (π.χ. σελίδα 404)

CACHE MANIFEST

Η πρώτη γραμμή, CACHE MANIFEST, είναι απαραίτητη:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

Το αρχείο manifest παραθέτει τρεις πόρους: ένα αρχείο CSS, μια εικόνα GIF και ένα αρχείο JavaScript. Όταν το αρχείο manifest φορτωθεί, ο περιηγητής θα κατεβάσει αυτά τα τρία αρχεία από το ριζικό κατάλογο του ιστοχώρου. Στη συνέχεια, αυτές οι πόροι θα είναι διαθέσιμοι αν ο χρήστης αποσυνδεθεί από το Διαδίκτυο.

NETWORK

Η ενότητα NETWORK καθορίζει ότι το αρχείο "login.php" δεν θα αποθηκευτεί στον προμηθευτή και δεν θα είναι διαθέσιμο όταν είναι εκτός σύνδεσης:

NETWORK:
login.asp

Μπορείτε να χρησιμοποιήσετε το asterisk (*) για να υποδεικνύσετε ότι όλες οι άλλες πόροι/αρχεία χρειάζονται σύνδεση στο Διαδίκτυο:

NETWORK:
*
FALLBACK

Η ενότητα FALLBACK παρακάτω ορίζει ότι αν δεν μπορέσει να δημιουργηθεί σύνδεση στο Διαδίκτυο, θα χρησιμοποιηθεί το "offline.html" για να αντικαταστήσει όλα τα αρχεία του φακέλου /html/:

FALLBACK:
/html/ /offline.html

Σημείωση:Ο πρώτος URI είναι το πόρο, ο δεύτερος είναι ο αντικαταστάτης.

Ενημέρωση του cache

Μόνο όταν συμβεί κάποια από τις παρακάτω περιπτώσεις, η εφαρμογή θα διατηρηθεί στο cache:

  • Ο χρήστης καθαρίζει το cache του περιηγητή
  • Το αρχείο manifest έχει τροποποιηθεί (βλέπε παρακάτω τις συμβουλές)
  • Ενημέρωση του cache της εφαρμογής από το πρόγραμμα

Παράδειγμα - Πλήρες αρχείο Cache Manifest

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html

Συμβουλή:Τα γραμμάτια που ξεκινούν με '#' είναι γραμμάτια σχολίων, αλλά μπορούν να ικανοποιούν και άλλες χρήσεις. Το cache της εφαρμογής θα ενημερωθεί μόνο όταν αλλάξει το αρχείο manifest. Αν επεξεργαστείτε μια εικόνα ή τροποποιήσετε μια συνάρτηση JavaScript, αυτές οι αλλαγές δεν θα επανεγκατασταθούν στο cache. Η ενημέρωση της ημερομηνίας και της έκδοσης στο σχόλιο είναι ένας τρόπος για να κάνετε τον περιηγητή να επανεγκαταστήσει τα αρχεία στο cache.

Σημεία προσοχής για την εφαρμογή cache

Παρακαλώ προσέξτε το περιεχόμενο του cache.

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

Σημείωση:Οι περιορισμοί του περιεχομένου του cache από τους περιηγητές μπορεί να διαφέρουν (οι περιορισμοί ορισμένων περιηγητών είναι 5MB ανά ιστοσελίδα).