Kursus Membuat Web

iklan

HTML 5 Aplikasi Cache

Dengan HTML 5 sangat mudah untuk membuat versi offline dari aplikasi web, dengan membuat file manifest cache.

Apa Itu Aplikasi Cache ?

HTML 5 memperkenalkan aplikasi cache, yang berarti bahwa aplikasi web cache, dapat diakses tanpa koneksi internet atau offline.

aplikasi cache memberikan tiga keuntungan aplikasi:

  • Offline browsing - pengguna dapat menggunakan aplikasi ini ketika mereka sedang offline.
  • Kecepatan - sumber daya cache meload lebih cepat.
  • Mengurangi beban server - browser hanya akan men-download sumber daya yang diperbarui / yang berubah dari server.

Dasar Cache Manifest

Untuk mengaktifkan aplikasi cache, gunakan attribute manifest pada tag <html>

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

Setiap halaman yang menggunakan attribute manifest maka akan di-cache ketika pengguna berkunjung. Jika attribute manifest tidak ditentukan, halaman tidak akan di-cache kecuali halaman ditentukan langsung dalam file manifest.

ekstension atau akhiran file untuk file manifest adalah: "appcache."

Sebuah file manifest harus benar MIME-typenya, yaitu "text / cache-manifest". Harus dikonfigurasi pada server web.

File Manifest

File manifest adalah file teks sederhana yang memberitahu browser apa yang di cache dan apa yang tidak harus di cache.

File manifest memiliki tiga bagian:

  • CACHE MANIFEST - daftar file di bawah header ini akan di-cache setelah mereka di-download untuk pertama kalinya.
  • NETWORK - daftar file di bawah header ini membutuhkan koneksi ke server, dan tidak akan di-cache.
  • FALLBACK - daftar file di bawah header ini menentukan halaman fallback jika halaman tidak bisa diakses.

CACHE MANIFEST

Diperlukan pada baris pertama, CACHE MANIFEST

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

File manifest di atas memiliki tiga daftar sumber : file CSS, gambar GIF, dan file JavaScript. Ketika file manifest diload, browser akan men-download tiga file dari direktori root dari situs web. Kemudian, setiap kali pengguna tidak terhubung ke internet, sumber daya akan tetap tersedia.

NETWORK

Bagian bawah NETWORK menentukan bahwa file "login.asp" tidak harus di-cache, dan tidak akan tersedia secara offline.

NETWORK
NETWORK:
login.asp

Tanda bintang dapat digunakan untuk menunjukkan bahwa semua sumber daya lain atau file membutuhkan koneksi internet :

NETWORK:
*

FALLBACK

FALLBACK di bagian bawah menetapkan bahwa "offline.html" akan disajikan di tempat semua file di / html / katalog, jika koneksi internet tidak dapat diakses :

FALLBACK
FALLBACK:
/html/ /offline.html

Catatan: URI pertama adalah sumber daya, yang kedua adalah fallback.

Memperbaharui Cache

Setelah aplikasi di-cache, cache tetap, sampai salah satu dari hal berikut terjadi :

  • Pengguna membersihkan cache browser
  • File manifest dimodifikasi (lihat tips di bawah ini)
  • Cache aplikasi pemrograman diperbaharui

Contoh Lengkap - File Manifest Cache

Contoh Lengkap - File Manifest Cache
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

Tips : Garis yang dimulai dengan "#" adalah baris komentar, tetapi juga dapat digunakan untuk tujuan lain. Sebuah aplikasi cache hanya diperbaharui bila file manifest ada perubahan. Jika Anda mengedit gambar atau mengubah function JavaScript, perubahan tersebut tidak akan di cache ulang. Memperbaharui tanggal dan versi dalam baris komentar adalah salah satu cara untuk membuat browser men-cache ulang file Anda.

Catatan Untuk Aplikasi Cache

Berhati-hatilah dengan apa yang Anda cache.

Setelah file di-cache, browser akan terus menunjukkan versi cache, bahkan jika Anda mengubah file di server. Untuk memastikan browser memperbaharui cache, Anda perlu mengubah file manifest.

Catatan: Browser mungkin memiliki batas ukuran yang berbeda untuk data cache (beberapa browser memiliki batas 5MB per situs).

Browser Yang Mendukung Aplikasi Cache

Aplikasi cache didukung di Internet Explorer 10, Firefox, Opera, Chrome, dan Safari.

Catatan: Internet Explorer 9 dan versi sebelumnya, tidak mendukung aplikasi cache.

Browser Internet Explorer Browser Mozila Firefox Browser Opera Browser Google Chrome Browser Safari

Contoh Penggunaan Aplikasi Cache

Contoh Penggunaan Aplikasi Cache
<!DOCTYPE html>
<html manifest="demo_html.appcache">
  <head>
   <title>Selamat Belajar</title>
   <meta charset="UTF-8" />
  </head>
  <body>
  <script  src="js/demo_time.js"></script>
  <p id="timePara"><button  onclick="getDateTime()">
Tampilkan Tanggal dan Jam</button></p>
  <p><img  src="image/falah.gif" alt="falah" /></p>
  <p>Cobalah membuka <a href="contoh_tag_html_manifest.html"  
target="_blank">halaman ini</a>, kemudian offline, dan  reload halaman tersebut. 
script dan image masih harus bisa bekerja.</p>
  <p><b>Catatan: </b> attribute manifest tidak didukung di Internet Explorer 9
dan versi  sebelumnya.</p>
  </body>
</html>
File demo_html.appcache
CACHE MANIFEST
js/demo_time.js
image/falah.gif
File demo_time.js
function getDateTime()
{
var d=new Date();
document.getElementById('timePara').innerHTML=d;
}

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015