Panduan pemula untuk menggunakan cache aplikasi

Pengantar

Semakin penting bagi aplikasi berbasis web untuk dapat diakses secara offline. Ya, semua browser dapat meng-cache halaman dan resource dalam jangka waktu yang lama jika diperintahkan untuk melakukannya, tetapi browser dapat mengeluarkan item tertentu dari cache kapan saja untuk memberi ruang bagi hal-hal lain. HTML5 mengatasi beberapa gangguan offline dengan antarmuka ApplicationCache. Menggunakan antarmuka cache memberikan tiga keuntungan bagi aplikasi Anda:

  1. Penjelajahan offline - pengguna dapat menjelajahi situs lengkap Anda ketika mereka offline
  2. Kecepatan - resource datang langsung dari disk, tanpa perjalanan ke jaringan.
  3. Ketahanan - jika situs Anda tidak aktif karena "pemeliharaan" (seperti, seseorang tidak sengaja merusak semuanya), pengguna Anda akan mendapatkan pengalaman offline

Cache Aplikasi (atau AppCache) memungkinkan developer menentukan file mana yang harus di-cache oleh browser dan disediakan untuk pengguna offline. Aplikasi Anda akan dimuat dan berfungsi dengan benar, meskipun pengguna menekan tombol muat ulang saat sedang offline.

File manifes cache

File manifes cache adalah file teks sederhana yang mencantumkan resource yang harus di-cache browser untuk akses offline.

Mereferensikan file manifes

Untuk mengaktifkan cache aplikasi untuk aplikasi, sertakan atribut manifes pada tag html dokumen:

<html manifest="example.appcache">
  ...
</html>

Atribut manifest harus disertakan di setiap halaman aplikasi web yang ingin Anda sertakan dalam cache. Browser tidak akan menyimpan halaman dalam cache jika halaman tidak berisi atribut manifest (kecuali jika tercantum secara eksplisit dalam file manifes tersebut. Artinya, setiap halaman yang dibuka pengguna yang menyertakan manifest akan secara implisit ditambahkan ke cache aplikasi. Dengan demikian, Anda tidak perlu mencantumkan setiap halaman dalam manifes. Jika halaman mengarah ke manifes, tidak ada cara untuk mencegah halaman ini di-cache.

Anda dapat melihat URL yang dikontrol oleh cache aplikasi dengan mengunjungi about://appcache-internals/ di Chrome. Dari sini, Anda dapat menghapus {i> cache<i} dan melihat entrinya. Ada alat developer yang serupa di Firefox.

Atribut manifest dapat mengarah ke URL absolut atau jalur relatif, tetapi URL absolut harus memiliki asal yang sama dengan aplikasi web. File manifes dapat memiliki ekstensi file apa pun, tetapi harus ditayangkan dengan jenis mime yang benar (lihat di bawah).

<html manifest="http://www.example.com/example.mf">
  ...
</html>

File manifes harus ditayangkan dengan text/cache-manifest jenis mime. Anda mungkin perlu menambahkan jenis file kustom ke server web Anda atau konfigurasi .htaccess.

Misalnya, untuk menyajikan jenis mime ini di Apache, tambahkan baris berikut ke file konfigurasi Anda:

AddType text/cache-manifest .appcache

Atau, di file app.yaml Anda di Google App Engine:

- url: /mystaticdir/(.*\.appcache)
  static_files: mystaticdir/\1
  mime_type: text/cache-manifest
  upload: mystaticdir/(.*\.appcache)

Persyaratan ini dihapus dari spesifikasi beberapa waktu lalu, dan tidak lagi diperlukan oleh Chrome, Safari, dan Firefox versi terbaru, tetapi Anda memerlukan jenis mime agar dapat berfungsi di browser lama dan IE11.

Struktur file manifes

Manifes adalah file terpisah yang Anda tautkan melalui atribut manifes pada elemen html. Manifes sederhana terlihat seperti ini:

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
http://cdn.example.com/scripts/main.js

Contoh ini akan meng-cache empat file pada halaman yang menentukan file manifes ini.

Ada beberapa hal yang perlu diperhatikan:

  • String CACHE MANIFEST adalah baris pertama dan diperlukan.
  • File dapat berasal dari domain lain
  • Beberapa browser membatasi jumlah kuota penyimpanan yang tersedia untuk aplikasi Anda. Di Chrome misalnya, AppCache menggunakan kumpulan bersama dari penyimpanan TEMPORARY yang dapat digunakan bersama oleh API offline lain. Jika Anda menulis aplikasi untuk Chrome Web Store, menggunakan unlimitedStorage akan menghapus batasan tersebut.
  • Jika manifes itu sendiri menampilkan 404 atau 410, cache akan dihapus.
  • Jika manifes atau resource yang ditentukan di dalamnya gagal didownload, seluruh proses update cache akan gagal. Browser akan tetap menggunakan cache aplikasi lama jika terjadi kegagalan.

Mari kita lihat contoh yang lebih kompleks:

CACHE MANIFEST
# 2010-06-18:v2

# Explicitly cached 'master entries'.
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js

# Resources that require the user to be online.
NETWORK:
*

# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg

Baris yang dimulai dengan '#' merupakan baris komentar, tetapi juga dapat memiliki fungsi lain. Cache aplikasi hanya diperbarui saat file manifesnya berubah. Misalnya, jika Anda mengedit resource gambar atau mengubah fungsi JavaScript, perubahan tersebut tidak akan disimpan dalam cache ulang. Anda harus mengubah file manifes itu sendiri untuk memberi tahu browser agar memuat ulang file yang di-cache.

Hindari penggunaan stempel waktu atau string acak yang terus diperbarui untuk memaksa update setiap saat. Manifes diperiksa dua kali selama pembaruan, sekali di awal dan sekali setelah semua file dalam cache diperbarui. Jika manifes telah berubah selama update, browser mungkin mengambil beberapa file dari satu versi, serta file lainnya dari versi lain, sehingga cache tidak diterapkan dan mencoba lagi nanti.

Meskipun cache diperbarui, browser tidak akan menggunakan file tersebut hingga halaman disegarkan, karena pembaruan terjadi setelah halaman dimuat dari versi cache saat ini.

Manifes dapat memiliki tiga bagian yang berbeda: CACHE, NETWORK, dan FALLBACK.

CACHE:
Ini adalah bagian default untuk entri. File yang tercantum di bawah header ini (atau segera setelah CACHE MANIFEST) akan disimpan dalam cache secara eksplisit setelah didownload untuk pertama kalinya. NETWORK:
File yang tercantum di bagian ini mungkin berasal dari jaringan jika file tersebut tidak ada di cache. Jika tidak, jaringan tidak akan digunakan, meskipun pengguna sedang online. Anda dapat memasukkan URL tertentu ke daftar putih di sini, atau cukup "", yang mengizinkan semua URL. Sebagian besar situs memerlukan "". FALLBACK:
Bagian opsional yang menentukan halaman penggantian jika resource tidak dapat diakses. URI pertama adalah resource, yang kedua adalah penggantian yang digunakan jika permintaan jaringan gagal atau error. Kedua URI harus dari asal yang sama dengan file manifes. Anda dapat menangkap URL tertentu, tetapi juga awalan URL. "images/large/" akan mencatat kegagalan dari URL seperti "images/large/whatever/img.jpg".

Manifes berikut menentukan halaman "catch-all" (offline.html) yang akan ditampilkan saat pengguna mencoba mengakses root situs saat offline. Ini juga mendeklarasikan bahwa semua resource lainnya (misalnya yang berada di situs jarak jauh) memerlukan koneksi internet.

CACHE MANIFEST
# 2010-06-18:v3

# Explicitly cached entries
index.html
css/style.css

# offline.html will be displayed if the user is offline
FALLBACK:
/ /offline.html

# All other resources (e.g. sites) require the user to be online.
NETWORK:
*

# Additional resources to cache
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png

Memperbarui cache

Setelah offline, aplikasi akan tetap di-cache hingga salah satu hal berikut terjadi:

  1. Pengguna menghapus penyimpanan data browser untuk situs Anda.
  2. File manifes diubah. Catatan: mengupdate file yang tercantum dalam manifes tidak berarti browser akan meng-cache ulang resource tersebut. File manifes itu sendiri harus diubah.

Status cache

Objek window.applicationCache adalah akses terprogram Anda ke cache aplikasi browser. Properti status berguna untuk memeriksa status cache saat ini:

var appCache = window.applicationCache;

switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
break;
case appCache.IDLE: // IDLE == 1
return 'IDLE';
break;
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING';
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING';
break;
case appCache.UPDATEREADY:  // UPDATEREADY == 4
return 'UPDATEREADY';
break;
case appCache.OBSOLETE: // OBSOLETE == 5
return 'OBSOLETE';
break;
default:
return 'UKNOWN CACHE STATUS';
break;
};

Untuk memeriksa update manifes secara terprogram, panggil applicationCache.update() terlebih dahulu. Tindakan ini akan mencoba memperbarui cache pengguna (yang mengharuskan file manifes telah diubah). Terakhir, saat applicationCache.status dalam status UPDATEREADY, memanggil applicationCache.swapCache() akan menukar cache lama dengan yang baru.

var appCache = window.applicationCache;

appCache.update(); // Attempt to update the user's cache.

...

if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache();  // The fetch was successful, swap in the new cache.
}

Kabar baiknya: Anda dapat mengotomatiskan proses ini. Untuk memperbarui pengguna ke versi terbaru situs Anda, tetapkan pemroses untuk memantau peristiwa updateready saat pemuatan halaman:

// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {

window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    // Browser downloaded a new app cache.
    if (confirm('A new version of this site is available. Load it?')) {
    window.location.reload();
    }
} else {
    // Manifest didn't changed. Nothing new to server.
}
}, false);

}, false);

Peristiwa AppCache

Seperti yang mungkin Anda duga, peristiwa tambahan diekspos untuk memantau status cache. Browser memicu peristiwa untuk hal-hal seperti progres download, mengupdate cache aplikasi, dan kondisi error. Cuplikan berikut menyiapkan pemroses peristiwa untuk setiap jenis peristiwa cache:

function handleCacheEvent(e) {
//...
}

function handleCacheError(e) {
alert('Error: Cache failed to update!');
};

// Fired after the first cache of the manifest.
appCache.addEventListener('cached', handleCacheEvent, false);

// Checking for an update. Always the first event fired in the sequence.
appCache.addEventListener('checking', handleCacheEvent, false);

// An update was found. The browser is fetching resources.
appCache.addEventListener('downloading', handleCacheEvent, false);

// The manifest returns 404 or 410, the download failed,
// or the manifest changed while the download was in progress.
appCache.addEventListener('error', handleCacheError, false);

// Fired after the first download of the manifest.
appCache.addEventListener('noupdate', handleCacheEvent, false);

// Fired if the manifest file returns a 404 or 410.
// This results in the application cache being deleted.
appCache.addEventListener('obsolete', handleCacheEvent, false);

// Fired for each resource listed in the manifest as it is being fetched.
appCache.addEventListener('progress', handleCacheEvent, false);

// Fired when the manifest resources have been newly redownloaded.
appCache.addEventListener('updateready', handleCacheEvent, false);

Jika file manifes atau resource yang ditentukan di dalamnya gagal didownload, seluruh update akan gagal. Browser akan terus menggunakan cache aplikasi lama jika terjadi kegagalan tersebut.

Referensi