Caching aplikasi memungkinkan aplikasi web untuk menyimpan sumber dayanya seperti HTML, CSS, Gambar, halaman JavaScript, dll. di browser, sehingga aplikasi dapat diakses sepenuhnya atau sebagian saat offline atau saat koneksi internet tidak tersedia
File manifes
Caching aplikasi dapat dilakukan dengan bantuan file manifes cache. File manifes menentukan daftar sumber daya yang akan di-cache di browser
Bagian dalam File Manifes
MANIFESTASI CACHE. Baris pertama file manifes harus dimulai dengan kata kunci CACHE MANIFEST
CACHE MANIFEST # 2010-02-08:v2 index.html images/profile.JPG css/main.cssDaftar sumber daya yang akan di-cache harus disebutkan di bawah bagian CACHE MANIFEST
Ingatlah untuk meng-cache gambar dan file CSS yang terkait dengan halaman web tertentu
Pada contoh di atas, index. html, gambar profil dan utama. file css adalah sumber daya yang harus di-cache oleh browser
Baris yang dimulai dengan simbol # menunjukkan komentar
KEMBALI. Bagian ini memberi tahu browser apa yang harus ditampilkan saat browser mencoba mengakses file yang tidak di-cache selama offline
FALLBACK /html /offline.html_Contoh di atas menunjukkan bahwa browser harus menampilkan offline. html setiap kali mencoba mengakses file yang tidak di-cache di bawah folder html selama offline
/index.html /offline.htmlMenentukan bahwa browser harus menampilkan offline. html bukannya index. html selama offline jika index. html tidak di-cache
/ /offline.htmlMenunjukkan bahwa setiap kali pengguna sedang offline, semua file yang tidak di-cache di bawah folder root akan diganti dengan offline. html
JARINGAN. Sumber daya yang hanya dapat diakses selama online dan tidak boleh di-cache tercantum di bawah bagian ini
NETWORK /sample.php_Contoh di atas menentukan sampel itu. php hanya dapat diakses selama online
NETWORK *Tanda bintang di bagian jaringan menunjukkan bahwa semua sumber daya kecuali yang disebutkan di bagian CACHE MANIFEST hanya dapat diakses saat online
Contoh Berkas
CACHE MANIFEST # 2010-02-08:v12 CACHE: index.html images/IMG_1713.JPG css/main.css # Require the user to be online. NETWORK: * # offline.html will be served in place of all other .html files FALLBACK: /index.html /offline.html_Referensi file Manifest
Setelah file manifes disiapkan, itu harus direferensikan dari halaman web yang ingin Anda cache menggunakan atribut manifes dalam tag html seperti yang diberikan di bawah ini
<!DOCTYPE html> <html manifest="developer.appcache"> Page to be cached goes here </html>Halaman tempat referensi dibuat akan di-cache secara otomatis meskipun tidak tercantum dalam file manifes
Izin cache
Cache akan tetap utuh hingga salah satu dari hal berikut terjadi
• Tembolok peramban dihapus oleh pengguna
• Sumber daya yang di-cache diperbarui. Harap perhatikan bahwa memperbarui sumber daya dalam file manifes tidak akan mengaktifkan browser untuk menyimpan ulang file secara otomatis. File manifes harus diubah. Ingin tahu apa yang harus diubah dalam file manifes jika tidak ada perubahan dalam daftar sumber daya yang akan di-cache? . Ini sudah cukup
• Ubah file manifes
• Tembolok aplikasi diperbarui secara terprogram
Peristiwa cache
Cache aplikasi dapat diakses secara terprogram menggunakan objek jendela
Proses di mana browser berinteraksi dengan file manifes dan membuat cache melibatkan sejumlah peristiwa cache. Status cache aplikasi selama proses caching dapat dilacak secara terprogram menggunakan properti status dari objek cache aplikasi
Saat browser mengunjungi halaman web yang berisi atribut manifes untuk pertama kalinya, kejadian berikut terjadi
• Memeriksa. Terjadi saat browser mengunjungi halaman web dan membaca atribut manifes pada elemen
• Mengunduh. Terjadi saat browser mulai mengunduh sumber daya dalam file manifes
• Kemajuan. Memberikan informasi berapa banyak file yang diunduh dan berapa banyak file yang belum diunduh
• Di-cache. Terjadi saat semua sumber daya dalam file manifes diunduh dan aplikasi siap digunakan secara offline
Jika browser telah mengunjungi halaman web dan dapat mengenali file manifes, kejadian berikut dapat terjadi
• Tidak ada pembaruan. Terjadi bila tidak ada perubahan pada file manifes
• Mengunduh. Terjadi bila file manifes cache dan sumber daya yang tercantum dalam file diubah. Browser mulai mengunduh sumber daya
• Kemajuan. Memberikan informasi berapa banyak file yang diunduh dan berapa banyak file yang belum diunduh
• Update Ready – Terjadi bila sumber daya dalam file manifes diunduh lagi untuk perubahan dan aplikasi baru jika siap digunakan untuk offline
Peristiwa galat terjadi dalam skenario berikut ini
• File manifes adalah halaman 404 atau 410, jadi caching dibatalkan
• File manifes cache diubah saat pembaruan sedang dijalankan
• Terjadi kesalahan saat mengunduh sumber daya yang tercantum dalam file manifes
• File manifes tidak berubah tetapi halaman yang mereferensikan manifes gagal diunduh dengan benar
Jika file manifes aplikasi dihapus dari server, browser menghapus semua sumber daya yang di-cache yang menggunakan manifes tersebut dan mengirimkan kejadian "usang" ke objek applicationCache
Pembaruan Tembolok
Anda dapat secara terprogram memeriksa apakah suatu aplikasi memiliki file manifes cache yang diperbarui dengan mendengarkan acara updateready dari objek cache aplikasi. Saat cache aplikasi dalam status siap diperbarui, gunakan fungsi swap cache untuk menukar file manifes lama dengan yang lebih baru dan muat ulang jendela untuk memuat ulang sumber daya yang diubah dalam file manifes
function onUpdateReady() { if(window.applicationCache.status === window.applicationCache.UPDATEREADY) { window.applicationCache.swapCache(); location.reload(); } } window.applicationCache.addEventListener('updateready', onUpdateReady);_Kesimpulan
Fitur cache aplikasi telah mengungkapkan potensi sebenarnya dari HTML5 dengan mengaktifkan penjelajahan offline, pengambilan sumber daya yang disimpan dalam cache lebih cepat, dan dengan mengurangi beban server