Akses offline semakin penting untuk aplikasi berbasis web. Meskipun semua browser memiliki mekanisme cache, mekanisme tersebut tidak dapat diandalkan dan mungkin tidak selalu berfungsi sesuai harapan. HTML5 menggunakan antarmuka ApplicationCache untuk menyelesaikan beberapa masalah yang disebabkan oleh offline.
Menggunakan antarmuka cache memberikan tiga keuntungan pada aplikasi Anda:
Cache Aplikasi (juga dikenal sebagai AppCache) memungkinkan pengembang menentukan file mana yang harus di-cache oleh browser agar dapat diakses oleh pengguna offline. Meskipun pengguna menekan tombol segarkan saat offline, aplikasi Anda akan dimuat dan berjalan normal.
File manifes referensiUntuk mengaktifkan cache aplikasi pada suatu aplikasi, tambahkan atribut manifes ke tag html dokumen:
Atribut manifes dapat menunjuk ke URL absolut atau jalur relatif, namun URL absolut harus memiliki asal yang sama dengan aplikasi web terkait. File manifes dapat menggunakan ekstensi file apa pun, namun harus disajikan dengan jenis MIME yang benar (lihat di bawah).
<html manifes=/cache.manifest> ...</html>
atau
<html manifes=http://www.example.com/example.mf> ...</html>
Anda harus menambahkan atribut manifes pada setiap halaman aplikasi web yang ingin Anda cache. Jika halaman web tidak berisi atribut manifes, browser tidak akan menyimpan halaman tersebut dalam cache (kecuali atribut tersebut secara eksplisit tercantum dalam file manifes).
Artinya setiap halaman web yang dijelajahi pengguna yang berisi manifes akan secara implisit ditambahkan ke cache aplikasi. Oleh karena itu, Anda tidak perlu mencantumkan setiap halaman di inventaris Anda.
File manifes harus disediakan sebagai tipe MIME text/cache-manifest. Nama akhiran file dapat disesuaikan (disarankan .manifest), jadi kita perlu mendeklarasikan jenis file dengan akhiran .manifest sebagai text/cache-manifest di sisi server.
Mengambil Apache sebagai contoh, kita perlu menambahkan: AddType text/cache-manifest .manifest ke httpd.conf
Struktur file manifesFormat daftar sederhana adalah sebagai berikut:
CACHE MANIFESTindex.htmlstylesheet.cssimages/logo.pngscripts/main.js
Contoh ini akan menyimpan empat file pada halaman web yang menentukan file manifes ini.
Anda perlu memperhatikan hal-hal berikut:
Mari kita lihat contoh yang lebih kompleks:
CACHE MANIFEST# 18-06-2010:v2# 'entri master' yang di-cache secara eksplisit.CACHE:/favicon.icoindex.htmlstylesheet.cssimages/logo.pngscripts/main.js# Sumber daya yang mengharuskan pengguna online.JARINGAN:login. php/myapihttp://api.twitter.com# static.html akan disajikan jika main.py tidak dapat diakses# offline.jpg akan disajikan disajikan sebagai pengganti semua gambar di images/large/# offline.html akan disajikan sebagai pengganti semua file .html lainnyaFALLBACK:/main.py /static.htmlimages/large/ images/offline.jpg*.html /offline.html
Baris yang dimulai dengan # adalah baris komentar, tetapi dapat digunakan untuk tujuan lain juga. Misalnya, perbarui cache
Cache aplikasi hanya diperbarui ketika file manifesnya berubah. Misalnya, jika Anda memodifikasi sumber daya gambar atau mengubah fungsi JavaScript, perubahan tersebut tidak akan disimpan ulang. Anda harus memodifikasi file manifes itu sendiri agar browser dapat menyegarkan file cache. Membuat baris komentar dengan nomor versi, hash file, atau stempel waktu yang dihasilkan akan memastikan pengguna memiliki versi terbaru perangkat lunak Anda.
Anda juga dapat memperbarui cache secara terprogram ketika versi baru tersedia, seperti yang dijelaskan di bagian Memperbarui cache.
Jika halaman memasukkan file manifes cache, maka file manifes harus berisi semua file (css, js, gambar...) yang diperlukan oleh halaman saat ini, jika tidak maka tidak akan dimuat, jadi kecuali file yang perlu di-cache , disarankan untuk menambahkan NETWORK dalam file. Tambahkan tanda bintang * ke item untuk menunjukkan semua file lainnya
Manifes dapat mencakup tiga bagian berbeda: CACHE, NETWORK, dan FALLBACK.
CACHE:Ini adalah bagian default dari entri. File yang terdaftar di bawah header ini (atau file yang segera setelah CACHE MANIFEST) secara eksplisit di-cache setelah diunduh pertama kali.
JARINGAN:File yang tercantum di bagian ini adalah sumber daya yang masuk daftar putih yang diperlukan untuk terhubung ke server. Semua permintaan untuk sumber daya ini melewati cache terlepas dari apakah pengguna sedang offline. Wildcard dapat digunakan.
Mundur:Bagian ini bersifat opsional dan menentukan halaman cadangan jika sumber daya tidak dapat diakses. URI pertama mewakili sumber daya, dan URI kedua mewakili halaman pendukung. Kedua URI tersebut harus terkait dan harus memiliki asal yang sama dengan file manifes. Wildcard dapat digunakan.
Catatan: Bagian dapat disusun dalam urutan apa pun, dan setiap bagian dapat muncul berulang kali dalam daftar yang sama.
Daftar berikut mendefinisikan halaman web komprehensif (offline.html) yang ditampilkan ketika pengguna mencoba mengakses akar situs secara offline, dan juga menunjukkan bahwa semua sumber daya lainnya (seperti yang ada di situs jarak jauh) memerlukan koneksi Internet.
CACHE MANIFEST# 2010-06-18:v3# Entri yang di-cache secara eksplisitindex.htmlcss/style.css# offline.html akan ditampilkan jika pengguna sedang offlineFALLBACK:/// /offline.html# Semua sumber daya lain (misalnya situs) memerlukan pengguna akan online.JARINGAN:*# Sumber daya tambahan untuk cacheCACHE:images/logo1.pngimages/logo2.pngimages/logo3.png
Harap diperhatikan: File HTML yang mereferensikan file manifes secara otomatis di-cache. Jadi Anda tidak perlu menambahkannya ke daftar Anda, tetapi kami menyarankan Anda melakukannya.
Catatan: Header cache HTTP dan batas cache yang ditetapkan pada halaman yang disajikan melalui SSL akan diganti dengan manifes cache. Oleh karena itu, halaman web yang disajikan melalui https dapat berjalan secara offline.
Perbarui tembolokAplikasi akan tetap disimpan dalam cache saat offline kecuali salah satu kondisi berikut terjadi:
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.