Beranda>Tutorial Desain Web>tutorial HTML

Implementasi aplikasi offline HTML5 dan penyimpanan klien

Penulis：Eve Cole Waktu Pembaruan：2025-01-25 09:00:03

Mendukung pengembangan aplikasi Web offline adalah fokus lain dari HTML5. Yang disebut aplikasi web offline adalah aplikasi yang tetap dapat berjalan meskipun perangkat tidak dapat mengakses Internet.

Mengembangkan aplikasi web offline memerlukan beberapa langkah. Yang pertama adalah memastikan aplikasi mengetahui apakah perangkat memiliki akses Internet sehingga selanjutnya dapat mengambil tindakan yang benar. Kemudian, aplikasi juga harus memiliki akses ke sumber daya tertentu (gambar, Javascript, CSS, dll) agar dapat berfungsi dengan baik. Yang terbaik, harus ada ruang lokal bagi pengguna untuk menyimpan data, dan membaca dan menulis tidak akan terhambat terlepas dari apakah mereka memiliki akses ke Internet.

HTML5 dan API terkait membuat pengembangan aplikasi offline menjadi kenyataan.

Deteksi offline

Untuk mengetahui apakah perangkat sedang online atau offline, HTML5 mendefinisikan atribut navigator.onLine. Nilai true menunjukkan bahwa perangkat dapat mengakses Internet, dan nilai false menunjukkan bahwa perangkat sedang offline.

 if (navigator.onLine) { // Bekerja secara normal} else { // Melakukan tugas dalam keadaan offline}

Karena navigator.onLine memiliki masalah kompatibilitas tertentu, selain atribut navigator.onLine, untuk lebih menentukan apakah jaringan tersedia, HTML5 juga mendefinisikan dua peristiwa, online dan offline.

Kedua peristiwa ini dipicu pada objek window ketika jaringan beralih antara offline dan online:

 window.addEventListener('online', function() { // Bekerja secara normal}); window.addEventListener('offline', function() { // Melakukan tugas saat offline});

Dalam aplikasi praktis, yang terbaik adalah mendapatkan status awal melalui navigator.onLine setelah halaman dimuat. Kemudian gunakan dua peristiwa di atas untuk menentukan apakah status koneksi jaringan berubah. Ketika peristiwa di atas dipicu, nilai properti navigator.onLine juga akan berubah, namun properti ini harus disurvei secara manual untuk mendeteksi perubahan status jaringan.

tembolok aplikasi

Cache aplikasi HTML5, atau disingkat appcache, dirancang khusus untuk mengembangkan aplikasi web offline. Appcache adalah area cache yang terpisah dari cache browser. Untuk menyimpan data dalam cache ini, Anda dapat menggunakan file manifes yang mencantumkan sumber daya yang akan diunduh dan di-cache. Contoh file deskripsi:

 MANIFESTASI CACHE# File Komentar.jsfile.css

Kemudian kutipan dalam html:

 <html manifes=./xxx.manifest>

Tipe MIME dari file xxx.manifest harus berupa text/cache-manifest.

Inti dari API ini adalah objek applicationCache. Objek ini memiliki atribut status. Nilai atributnya adalah konstan, yang menunjukkan status cache aplikasi saat ini:

  • 0: Tidak ada cache, yaitu tidak ada cache aplikasi yang terkait dengan halaman tersebut
  • 1: Idle, yaitu cache aplikasi belum diperbarui
  • 2: Memeriksa yaitu mengunduh file deskripsi dan memeriksa pembaruan
  • 3: Mengunduh, yaitu cache aplikasi mengunduh sumber daya yang ditentukan dalam file deskripsi.
  • 4: Pembaruan selesai, yaitu cache aplikasi telah memperbarui sumber daya, dan semua sumber daya telah diunduh dan dapat digunakan melalui swapCache().
  • 5: Ditinggalkan, yaitu file deskripsi cache aplikasi sudah tidak ada lagi, sehingga halaman tidak dapat lagi mengakses cache aplikasi.

Acara terkait:

  • pemeriksaan: Dipicu saat browser mencari pembaruan pada cache aplikasi
  • error: dipicu ketika terjadi kesalahan saat memeriksa pembaruan atau mengunduh sumber daya
  • noupdate: Dipicu ketika memeriksa file deskripsi dan menemukan bahwa file tersebut tidak ada perubahan.
  • pengunduhan: Dipicu saat pengunduhan sumber daya cache aplikasi dimulai
  • kemajuan: Dipicu terus menerus selama proses pengunduhan file cache aplikasi
  • updateready: Dipicu ketika cache aplikasi baru pada halaman telah diunduh dan dapat digunakan melalui swapCache()
  • cached: Dipicu ketika cache aplikasi tersedia sepenuhnya

Secara umum, kejadian ini akan dipicu sesuai urutan yang disebutkan di atas saat halaman dimuat. Event di atas juga dapat dipicu secara manual dengan memanggil metode update().

penyimpanan data

kue

Cookie HTTP, biasanya disebut cookie secara langsung, digunakan pada klien untuk menyimpan informasi sesi. Standar ini mengharuskan server untuk mengirimkan header HTTP Set-Cookie sebagai bagian dari respons terhadap permintaan HTTP apa pun, yang berisi informasi sesi. Contoh header respons server:

HTTP/1.1 200 Oke

Tipe konten: teks/html

Set-Cookie: nama=nilai

Header lainnya: nilai header lainnya

Browser kemudian Mengatur Cookie informasi sesi, dan kemudian menambahkan header HTTP Cookie ke setiap permintaan untuk mengirim informasi kembali ke server, seperti yang ditunjukkan di bawah ini:

DAPATKAN /index.html HTTP/1.1

Cookie: nama=nilai

Header lainnya: nilai header lainnya

Informasi tambahan yang dikirim kembali ke server dapat digunakan untuk memverifikasi secara unik permintaan mana yang berasal dari klien.

Cookie lengkap meliputi:

  1. Nama: Nama yang mengidentifikasi cookie secara unik. Harus dikodekan URL.
  2. Nilai: Nilai string yang disimpan dalam cookie. Harus dikodekan URL.
  3. Domain: Domain yang cookie-nya valid.
  4. Jalur: Untuk jalur tersebut di domain yang ditentukan, cookie harus dikirim ke server.
  5. Waktu kedaluwarsa: Stempel waktu yang menunjukkan kapan cookie harus dihapus.
  6. Bendera keamanan: Jika ditentukan, cookie hanya dikirim ke server saat menggunakan koneksi SSL.
Salin kode
Artikel Terkait