Akses offline menjadi semakin penting untuk aplikasi berbasis web. Meskipun semua browser memiliki mekanisme caching, mereka tidak dapat diandalkan dan mungkin tidak selalu memainkan peran yang diharapkan. HTML5 menggunakan antarmuka ApplicationCache untuk menyelesaikan beberapa masalah yang disebabkan oleh penggunaan offline.
Menggunakan antarmuka cache dapat membawa tiga manfaat berikut ke aplikasi Anda :Penjelajahan Offline - Pengguna dapat menelusuri situs web lengkap Anda saat offline
Kecepatan - Sumber daya yang di -cache adalah sumber daya lokal, sehingga memuat lebih cepat.
Server Load Less - Browser hanya mengunduh sumber daya dari server yang telah berubah.
App Cache (juga dikenal sebagai APPCACHE) memungkinkan pengembang untuk menentukan file mana yang harus diakses oleh browser browser untuk diakses oleh pengguna offline. Aplikasi Anda akan memuat dan berjalan secara normal bahkan jika pengguna menekan tombol refresh saat offline.
File manifes cache
File manifes cache adalah file teks sederhana yang mencantumkan sumber daya yang harus disimpan oleh browser untuk akses offline.
File manifes referensi
Untuk mengaktifkan caching aplikasi untuk suatu aplikasi, tambahkan atribut manifes dalam tag HTML dokumen:
<html manifest = "example.appcache">
...
</html>
Anda harus menambahkan properti manifes di setiap halaman aplikasi web yang ingin Anda cache. Jika halaman tidak berisi atribut manifes, browser tidak akan menyimpan halaman (kecuali secara eksplisit terdaftar dalam file manifes). Ini berarti bahwa setiap halaman Web yang pengguna menelusuri dengan manifes akan ditambahkan secara implisit ke cache aplikasi. Karena itu, Anda tidak perlu mendaftar setiap halaman dalam daftar.
Properti manifes dapat menunjuk ke URL absolut atau jalur relatif, tetapi URL absolut harus sama dengan aplikasi jaringan yang sesuai. File manifes dapat menggunakan ekstensi file apa pun, tetapi harus disediakan dengan tipe MIME yang benar (lihat di bawah).
<html manifest = "http://www.example.com/example.mf">
...
</html>
File manifes harus disediakan dalam tipe Mime Teks/Cache-Manifest. Anda mungkin perlu menambahkan jenis file khusus ke server web Anda atau konfigurasi .htaccess.
Misalnya, untuk memberikan jenis MIME ini di Apache, tambahkan baris berikut ke file konfigurasi Anda:
Teks addType/cache-manifest .appcache untuk memberikan jenis mime ini di file app.yaml dari mesin aplikasi google, tambahkan yang berikut:
- url: /mystaticdir/(.*/.appcache)
static_files: mystaticdir // 1
mime_type: teks/cache-manifest
Unggah: mystaticdir /(.*/. appcache) struktur file manifes
Format daftar sederhana adalah sebagai berikut:
Cache Manifest
index.html
stylesheet.css
gambar/logo.png
Scripts/Main.js Contoh ini menyimpan empat file di halaman web yang menentukan file manifes ini.
Poin -poin berikut yang perlu Anda perhatikan:
String manifes cache harus berada di baris pertama dan sangat penting.
Jumlah data yang di -cache di Situs Web tidak boleh melebihi 5 MB. Namun, jika Anda menulis aplikasi untuk Chrome Web Store, Anda dapat menggunakan UNBIMITEDStorage untuk tidak terbatas pembatasan.
Jika file manifes atau sumber daya yang ditentukan di dalamnya tidak dapat diunduh, seluruh proses pembaruan cache tidak dapat dilakukan. Dalam hal ini, browser akan terus menggunakan cache aplikasi asli.
Mari kita lihat contoh yang lebih kompleks:
Cache Manifest
# 2010-06-18: v2
# 'Entri utama' yang di -cache secara eksplisit.
CACHE :/favicon.ico
index.html
stylesheet.css
gambar/logo.png
Script/Main.js
# Sumber daya yang mengharuskan pengguna untuk online.
Jaringan :login.php
/myapi
http://api.twitter.com
# static.html akan disajikan jika Main.py tidak dapat diakses
# offline.jpg akan disajikan sebagai pengganti semua gambar dalam gambar/besar/
# offline.html akan dilayani sebagai pengganti semua file .html
Fallback :/main.py /static.html
gambar/besar/gambar/offline.jpg
*.html /offline.html baris yang dimulai dengan # adalah baris komentar, tetapi dapat digunakan untuk tujuan lain juga. Cache aplikasi diperbarui hanya jika file manifesnya berubah. Misalnya, jika Anda memodifikasi sumber daya gambar atau mengubah fungsi JavaScript, perubahan ini bukan RECACHE. Anda harus memodifikasi file manifes itu sendiri agar browser menyegarkan file yang di -cache. Buat baris komentar dengan nomor versi yang dihasilkan, nilai hash file, atau cap waktu untuk memastikan bahwa pengguna mendapatkan versi terbaru dari perangkat lunak Anda. Anda juga dapat memperbarui cache secara terprogram setelah versi baru muncul, seperti yang dijelaskan di bagian Cache Pembaruan.
Daftar ini dapat mencakup tiga bagian yang berbeda: cache, jaringan, dan fallback.
CACHE :Ini adalah bagian default dari entri. File -file yang tercantum di bawah header ini secara eksplisit di -cache untuk pertama kalinya (atau file segera setelah cache manifes).
Jaringan :File yang tercantum di bawah bagian ini adalah sumber daya whitel yang perlu dihubungkan ke server. Semua permintaan ke sumber daya ini memotong cache terlepas dari apakah pengguna offline atau tidak. Wildcard dapat digunakan.
Fallback :Bagian ini opsional dan digunakan untuk menentukan halaman Fallback ketika sumber daya tidak dapat diakses. URI pertama mewakili sumber daya dan yang kedua mewakili halaman web cadangan. Kedua URI harus terkait dan harus memiliki asal yang sama dengan file manifes. Wildcard dapat digunakan.
Harap dicatat: Bagian ini dapat diatur dalam urutan apa pun, dan setiap bagian dapat diulang dalam daftar yang sama.
Daftar berikut mendefinisikan halaman web komprehensif (offline.html) yang ditampilkan ketika pengguna mencoba mengakses root situs web offline, dan juga menunjukkan bahwa semua sumber daya lainnya (seperti sumber daya di situs jarak jauh) memerlukan koneksi internet.
Cache Manifest
# 2010-06-18: v3
# Entri yang di -cache secara eksplisit
index.html
css/style.css
# offline.html akan ditampilkan jika pengguna offline
Fallback:
//offline.html
# Semua sumber daya lainnya (misalnya situs) mengharuskan pengguna untuk online.
JARINGAN:
*
# Sumber daya tambahan untuk cache
CACHE:
gambar/logo1.png
gambar/logo2.png
Harap dicatat bahwa gambar/logo3.png: Sistem akan secara otomatis men -cache file HTML yang merujuk file manifes. Jadi Anda tidak perlu menambahkannya ke daftar, tetapi kami sarankan Anda melakukannya.
Catatan : Header cache HTTP dan pembatasan cache yang ditetapkan untuk halaman web yang disediakan melalui SSL akan diganti dengan manifes cache. Oleh karena itu, halaman web yang disediakan oleh HTTPS dapat dijalankan secara offline. Perbarui cacheAplikasi ini tetap di -cache setelah offline kecuali salah satu dari berikut ini terjadi:
Pengguna menghapus penyimpanan data browser di situs web Anda.
File manifes telah dimodifikasi. Harap dicatat: Memperbarui file yang tercantum dalam manifes tidak berarti bahwa browser akan menacakan kembali sumber daya. File manifes itu sendiri harus diubah.
Cache aplikasi diperbarui secara terprogram.
Status cacheObjek Window.ApplicationCache adalah metode akses terprogram ke cache aplikasi browser. Atribut statusnya dapat digunakan untuk melihat status cache saat ini:
var appcache = window.applicationCache;
sakelar (appcache.status) {
case appcache.uncached: // uncached == 0
kembali 'Uncached';
merusak;
case appcache.idle: // idle == 1
return 'Idle';
merusak;
case appcache.checking: // checking == 2
mengembalikan 'checking';
merusak;
case appcache.downloading: // download == 3
return 'downloading';
merusak;
case appcache.updateready: // updateready == 4
return 'updateready';
merusak;
case appcache.obsolete: // usang == 5
kembali 'usang';
merusak;
bawaan:
mengembalikan 'status cache yang diketahui';
merusak;
};
Untuk memperbarui cache secara terprogram, hubungi ApplicationCache.update () terlebih dahulu. Ini akan mencoba memperbarui cache pengguna (asalkan file manifes telah diubah). Akhirnya, ketika ApplicationCache.Status berada dalam keadaan UpdatereAde, hubungi ApplicationCache.swapcache () untuk mengganti cache asli dengan cache baru.
var appcache = window.applicationCache;
appcache.update (); // Coba perbarui cache pengguna.
...
if (appcache.status == window.applicationCache.updateready) {
appcache.swapcache (); // Fetch berhasil, bertukar di cache baru.
}
Harap dicatat : Menggunakan pembaruan () dan swapcache () dengan cara ini tidak akan menyediakan sumber daya yang diperbarui kepada pengguna. Proses ini hanya memungkinkan browser memeriksa manifes baru, mengunduh pembaruan yang ditentukan, dan mengisi ulang cache aplikasi. Oleh karena itu, halaman web perlu dimuat ulang dua kali sebelum konten baru diberikan kepada pengguna, yang pertama adalah mendapatkan cache aplikasi baru, dan yang kedua adalah menyegarkan konten halaman web.Berita baiknya adalah Anda dapat menghindari kerumitan memuat ulang dua kali. Untuk memperbarui pengguna ke versi terbaru dari situs web ini, siapkan pendengar untuk memantau acara Updateready saat halaman web memuat:
// Periksa apakah cache baru tersedia pada pemuatan halaman.
window.addeventListener ('load', function (e) {
window.applicationCache.addeventListener ('updateready', function (e) {
if (window.applicationCache.status == window.applicationCache.updateready) {
// Browser mengunduh cache aplikasi baru.
// Tukar dan muat ulang halaman untuk mendapatkan panas baru.
window.applicationCache.swapcache ();
if (konfirmasi ('versi baru dari situs ini tersedia. Muat?')) {
window.location.reload ();
}
} kalau tidak {
// Manifes tidak berubah. Tidak ada yang baru di server.
}
}, PALSU);
}, PALSU);
Acara APPCACHESeperti yang Anda harapkan, acara tambahan digunakan untuk mendengarkan keadaan cache. Browser akan memicu acara yang sesuai untuk kemajuan unduhan, pembaruan cache aplikasi, dan status kesalahan. Cuplikan kode berikut mengatur pendengar acara untuk setiap jenis acara cache:
fungsi handlecacheevent (e) {
// ...
}
fungsi handlecacheerror (e) {
peringatan ('Kesalahan: cache gagal memperbarui!');
};
// ditembakkan setelah cache pertama manifes.
appcache.addeventListener ('cacheed', handlecacheevent, false);
// Memeriksa pembaruan. Selalu acara pertama yang ditembakkan dalam urutan.
appcache.addeventListener ('checking', handlecacheevent, false);
// Pembaruan ditemukan. Browser mengambil sumber daya.
appcache.addeventListener ('mengunduh', handlecacheevent, false);
// manifes mengembalikan 404 atau 410, unduhan gagal,
// atau manifes berubah saat unduhan sedang berlangsung.
appcache.addeventListener ('error', handlecacheerror, false);
// Dipecat setelah unduhan pertama manifes.
appcache.addeventListener ('noupdate', handlecacheevent, false);
// dipecat jika file manifes mengembalikan 404 atau 410.
// Ini menghasilkan cache aplikasi yang dihapus.
appcache.addeventListener ('usang', handlecacheevent, false);
// Dipecat untuk setiap sumber daya yang tercantum dalam manifes saat sedang diambil.
appcache.addeventListener ('progress', handlecacheevent, false);
// dipecat ketika sumber daya manifes baru saja dimuat.
appcache.addeventListener ('updateready', handlecacheevent, false);
Jika file manifes atau sumber daya yang ditentukan di dalamnya tidak dapat diunduh, seluruh pembaruan akan gagal. Dalam hal ini, browser akan terus menggunakan cache aplikasi asli