Apa itu html5 bagaimana kita mengimplementasikan cache aplikasi di dalamnya?

Question

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

Table of Contents Show

File manifes
Bagian dalam File Manifes
Contoh Berkas
Referensi file Manifest
Peristiwa cache
Pembaruan Tembolok
Bagaimana Anda menerapkan cache di html?
Bagaimana cara menggunakan caching di HTML5?
Apa itu cache aplikasi?
Apa itu file manifes dalam HTML5?

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.css

Daftar 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.html

Menentukan bahwa browser harus menampilkan offline. html bukannya index. html selama offline jika index. html tidak di-cache

/ /offline.html

Menunjukkan 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

window.applicationCache.status.

_

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

Bagaimana Anda menerapkan cache di html?

Cache Manifest Basics. To enable application cache, include the manifest attribute in the document's tag:

File Manifes. File manifes adalah file teks sederhana, yang memberi tahu browser apa yang harus di-cache (dan apa yang tidak boleh di-cache). .

Contoh - File Manifes Cache Lengkap. MANIFESTASI CACHE

Bagaimana cara menggunakan caching di HTML5?

Untuk mengaktifkan cache aplikasi, sertakan atribut manifes dalam tag . Ekstensi file yang disarankan untuk file manifes adalah. appcache. File harus disajikan menggunakan jenis MIME teks/cache-manifest.

Apa itu cache aplikasi?

Apa itu cache? . lets applications like browsers, games, and streaming services store temporary files to reduce load times and make your overall experience faster.

Apa itu file manifes dalam HTML5?

Manifes cache dalam HTML5 adalah fitur penyimpanan perangkat lunak yang memberikan kemampuan untuk mengakses aplikasi web bahkan tanpa koneksi jaringan .

kode html