Cache aplikasi HTML5

Dengan cache aplikasi, melalui pengembangan berkas manifest cache, dapat dengan mudah membuat versi offline web aplikasi

Apa itu cache aplikasi?

HTML5 memperkenalkan cache aplikasi (Application Cache), yang berarti web aplikasi dapat disimpan dan diakses tanpa koneksi internet

Kekurangan aplikasi cache untuk aplikasi adalah tiga keunggulan:

  1. Bacaan luar jaringan - Pengguna dapat menggunakannya saat aplikasi offline
  2. Kecepatan - Sumber daya yang di-cache diunggulkan lebih cepat
  3. Mengurangi beban server - Browser hanya akan mengunduh sumber daya yang telah diupdate atau diubah

Dukungan Peramban

Angka di tabel menunjukkan versi peramban yang mendukung aplikasi cache penuh.

API
Aplikasi Cache 4.0 10.0 3.5 4.0 11.5

Contoh HTML Cache Manifest

Contoh di bawah ini menampilkan dokumen HTML dengan cache manifest (untuk penyimpanan dalam layar offline):

Contoh

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

Coba Sendiri

Dasar Cache Manifest

Untuk mengaktifkan cache aplikasi, tambahkan atribut manifest di tag <html> dokumen:

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

Setiap halaman yang ditentukan manifest akan disimpan di cache saat pengguna mengaksesnya. Jika halaman tidak ditentukan properti manifest, halaman ini tidak akan disimpan di cache (kecuali halaman ini disimpan langsung di dalam berkas manifest)

Ekstensi berkas yang disarankan untuk manifest berkas adalah: ".appcache"

Perhatian:Manifest berkas memerlukan pengaturan MIME-type yang benar, yaitu "text/cache-manifest". Harus di konfigurasi di server web.

Manifest Berkas

Manifest berkas adalah berkas teks sederhana yang menyampaikan keperluan peramban tentang konten yang disimpan di cache (dan konten yang tidak disimpan di cache)

Manifest berkas memiliki tiga bagian:

  • CACHE MANIFEST - Berkas yang ditampilkan di bawah judul ini akan disimpan di cache setelah diunduh untuk pertama kalinya
  • NETWORK - Berkas yang ditampilkan di bawah judul ini memerlukan koneksi ke server dan tidak akan disimpan di cache
  • FALLBACK - Berkas yang ditampilkan di bawah judul ini menentukan halaman cadangan saat halaman tidak dapat diakses (seperti halaman 404)

CACHE MANIFEST

Baris pertama, CACHE MANIFEST, adalah wajib:

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

Manifest yang ada di atas menampilkan tiga sumber daya: berkas CSS, gambar GIF, dan berkas JavaScript. Saat manifest diunggah, peramban akan mengunduh tiga berkas ini dari direktori utama situs. kemudian, setiap kali pengguna terputus dari internet, sumber daya ini tetap tersedia.

NETWORK

Bagian NETWORK di bawah ini menetapkan bahwa berkas "login.php" tidak akan disimpan di cache dan tidak dapat digunakan saat offline:

NETWORK:
login.asp

Dapat digunakan tanda asterisk untuk menunjukkan bahwa semua sumber lainnya/perfiles perlu koneksi internet:

NETWORK:
*
FALLBACK

Bagian FALLBACK di bawah menentukan jika koneksi internet tidak dapat dibangun, gunakan "offline.html" untuk menggantikan semua file di direktori /html/:

FALLBACK:
/html/ /offline.html

Keterangan:URI pertama adalah sumber, yang kedua adalah alternatif.

Perbarui pengecer

Sekali aplikasi disimpan di pengecer, ia akan tetap disimpan di pengecer sampai terjadi salah satu hal berikut:

  • Pengguna mengosongkan pengecer peramban
  • File manifest diubah (lihat petunjuk di bawah)
  • Perbarui pengecer aplikasi dengan program

Contoh - File Cache Manifest yang Lengkap

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

Petunjuk:Yang dimulai dengan "#" adalah baris komentar, tetapi dapat memenuhi tujuan lain. Pengecer aplikasi hanya akan diperbarui saat file manifestnya berubah. Jika Anda mengedit gambar, atau merubah fungsi JavaScript, perubahan tersebut tidak akan disimpan kembali. Memperbarui tanggal dan versi di baris komentar adalah cara untuk memastikan peramban memperbarui file.

Perhatian tentang pengecer aplikasi

Perhatikan konten pengecer.

Sekali file disimpan di pengecer, peramban akan terus menampilkan versi yang disimpan, meskipun Anda merubah file di server.Untuk memastikan peramban memperbarui pengecer, Anda perlu memperbarui file manifest.

Keterangan:Kapasitas memori penyanggaan data pengecer diantara peramban mungkin berbeda (batasan beberapa peramban adalah setiap situs 5MB).