Pemrograman cache aplikasi HTML5

Dengan pemrograman cache aplikasi, melalui pembuatan berkas manifest cache, dapat dengan mudah membuat versi offline dari web aplikasi

Apa itu pemrograman cache aplikasi?

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

Pemrograman cache untuk aplikasi memberikan tiga keunggulan bagi aplikasi:

  1. Bacaan offline - Pengguna dapat menggunakan mereka saat aplikasi dalam mode offline
  2. Kecepatan - Sumber daya yang disimpan di cache dapat dimuat lebih cepat
  3. Mengurangi beban server - Browser hanya akan mengunduh sumber daya yang telah diupdate atau diubah

Dukungan Browser

Angka di dalam tabel menunjukkan versi browser yang mendukung cache aplikasi penuh.

API
Cache Aplikasi 4.0 10.0 3.5 4.0 11.5

Contoh HTML Cache Manifest

Contoh berikut menampilkan dokumen HTML dengan cache manifest (untuk diakses secara luar jaringan):

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 dalam tag <html> di dokumen:

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

Setiap halaman yang ditentukan dengan manifest akan disimpan di dalam cache saat pengguna mengaksesnya. Jika atribut manifest belum ditentukan, halaman ini tidak akan disimpan di dalam cache (kecuali halaman ini langsung disebutkan 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 layanan web server.

Manifest Berkas

Manifest berkas adalah berkas teks sederhana yang memberitahu peramban tentang konten yang disimpan di dalam cache (dan konten yang tidak disimpan di dalam cache).

Manifest berkas memiliki tiga bagian:

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

CACHE MANIFEST

Baris pertama, CACHE MANIFEST, adalah yang wajib:

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

Manifest berikut menampilkan tiga sumber daya: berkas CSS, gambar GIF, dan berkas JavaScript. Saat manifest diambil, peramban akan mengunduh tiga berkas ini dari direktori root 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 dalam cache dan tidak tersedia saat berada di luar jaringan:

NETWORK:
login.asp

Dapat digunakan tanda bintang untuk menunjukkan bahwa semua sumber lainnya/file memerlukan 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 penyanggaan

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

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

Contoh - File Cache Manifest 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. Penyanggaan aplikasi hanya akan diperbarui saat file manifest berubah. Jika Anda mengedit gambar, atau merubah fungsi JavaScript, perubahan ini tidak akan disimpan kembali. Memperbarui tanggal dan versi di baris komentar adalah cara untuk memastikan peramban memperbarui file.

Perhatian tentang penyanggaan aplikasi

Perhatikan konten penyanggaan.

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

Keterangan:Kapasitas memori penyanggaan yang dihadirkan peramban mungkin berbeda (batasan beberapa peramban adalah setiap situs 5MB).