tutorial pengembangan web terbaru

HTML5 Aplikasi Cache


Dengan aplikasi cache mudah untuk membuat versi offline dari aplikasi web, dengan menciptakan cache file manifest.


Apa Aplikasi Cache?

HTML5 memperkenalkan aplikasi cache, yang berarti bahwa aplikasi web-cache, dan dapat diakses tanpa koneksi internet.

Cache aplikasi memberikan sebuah aplikasi tiga keuntungan:

  1. Browsing offline - pengguna dapat menggunakan aplikasi ini ketika mereka sedang offline
  2. Kecepatan - sumber cache memuat lebih cepat
  3. Mengurangi beban server - browser hanya akan mendownload update / sumber berubah dari server

Latar Belakang

aplikasi web terdiri dari halaman web yang perlu di-download dari jaringan. Agar hal ini terjadi harus ada koneksi jaringan. Namun, ada banyak contoh ketika pengguna tidak dapat terhubung ke jaringan karena keadaan di luar kendali mereka. HTML5 menyediakan kemampuan untuk mengakses aplikasi web bahkan tanpa koneksi jaringan menggunakan manifest tembolok.

aplikasi web terdiri dari sumber daya diidentifikasi oleh URL. Ini bisa HTML, CSS, JavaScript, gambar atau sumber lain yang diperlukan untuk aplikasi web yang akan diberikan. alamat mereka dapat disalin ke dalam file manifest, yang dapat diperbarui secara teratur oleh penulis aplikasi web, yang menunjukkan setiap alamat web baru yang ditambahkan atau dihapus. Saat menghubungkan ke jaringan untuk pertama kalinya, web browser akan membaca HTML5 file manifest, men-download sumber daya yang diberikan dan menyimpannya secara lokal. Kemudian, dengan tidak adanya koneksi jaringan, web browser akan bergeser ke salinan lokal bukan dan membuat aplikasi web offline.


Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung Aplikasi Cache.

API
Application Cache 4.0 10,0 3,5 4.0 11,5

HTML Cache Manifest Contoh

Contoh di bawah ini menunjukkan sebuah dokumen HTML dengan manifest cache yang (for offline browsing) :

Contoh

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

<body>
The content of the document......
</body>

</html>
Cobalah sendiri "

Cache Manifest Dasar

Agar aplikasi offline untuk bekerja, cache file manifest harus diciptakan oleh pengembang web. Jika aplikasi web melebihi lebih dari satu halaman maka setiap halaman harus memiliki atribut manifest yang menunjuk ke manifest cache yang. Setiap halaman referensi manifest akan disimpan secara lokal. Cache file manifest adalah file teks yang terletak di bagian lain dari server. Ini harus dilayani dengan jenis konten berikut:

text/cache-manifest

Untuk mengaktifkan aplikasi cache, termasuk manifest atribut dalam dokumen <html> tag:

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

Setiap halaman dengan manifest atribut tertentu akan di-cache ketika pengguna mengunjungi itu. Jika manifest atribut tidak ditentukan, halaman tidak akan di-cache (unless the page is specified directly in the manifest file) .

Ekstensi file yang direkomendasikan untuk file manifest adalah: ".appcache"

Sebuah file manifest perlu dilayani dengan correct media type , yang merupakan "text/cache-manifest" . Harus dikonfigurasi pada server web.


The Manifest Berkas

File manifest adalah file teks sederhana, yang memberitahu browser apa cache (and what to never cache) .

File manifest memiliki tiga bagian:

  • CACHE MANIFEST - File terdaftar di bawah header ini akan di-cache setelah mereka di-download untuk pertama kalinya
  • NETWORK - File terdaftar di bawah header ini membutuhkan koneksi ke server, dan tidak akan pernah cache
  • FALLBACK - File terdaftar di bawah header ini menentukan halaman fallback jika halaman tidak bisa diakses

CACHE MANIFEST

Baris pertama, CACHE MANIFEST, diperlukan:

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

File manifest atas daftar tiga sumber: file CSS, gambar GIF, dan file JavaScript. Ketika file manifest dimuat, browser akan men-download tiga file dari direktori root dari situs web. Kemudian, setiap kali pengguna tidak terhubung ke internet, sumber daya akan tetap tersedia.

JARINGAN

Bagian NETWORK bawah menentukan bahwa file "login.asp" tidak boleh cache, dan tidak akan tersedia secara offline:

NETWORK:
login.asp

Tanda bintang dapat digunakan untuk menunjukkan bahwa semua sumber daya lainnya / file membutuhkan koneksi internet:

NETWORK:
*

fallback

Bagian mundur di bawah ini menetapkan bahwa "offline.html" akan disajikan di tempat semua file di / html / katalog, dalam hal koneksi internet tidak dapat dibangun:

FALLBACK:
/html/ /offline.html

Catatan: URI pertama adalah sumber daya, yang kedua adalah fallback.


Memperbarui Cache

Setelah aplikasi di-cache, tetap cache sampai salah satu dari berikut terjadi:

  • Pengguna membersihkan cache browser
  • File manifest dimodifikasi (see tip below)
  • Cache aplikasi pemrograman diperbarui

Contoh - Complete Cache Manifest Berkas

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html/ /offline.html

Tip: Garis dimulai dengan "#" adalah baris komentar, tetapi juga dapat melayani tujuan lain. Cache aplikasi ini hanya diperbarui bila perubahan file manifes. Jika Anda mengedit gambar atau mengubah fungsi JavaScript, perubahan tersebut tidak akan kembali cache. Memperbarui tanggal dan versi di baris komentar adalah salah satu cara untuk membuat browser re-tembolok file Anda.


Catatan tentang Aplikasi Cache

Hati-hati dengan apa yang Anda cache.

Setelah file cache, browser akan terus menunjukkan versi cache, bahkan jika Anda mengubah file di server. Untuk memastikan browser update cache, Anda perlu mengubah file manifest.

Catatan: Browser mungkin memiliki batas ukuran yang berbeda untuk data cache (some browsers have a 5MB limit per site) .