Teknologi HTML5 tradisional sensitif terhadap kondisi jaringan, yang dapat menurunkan performa halaman HTML5. Paket offline mengatasi masalah ini sekaligus mempertahankan keunggulan HTML5.
Offline package adalah file terkompresi yang menggabungkan sumber daya statis, seperti file HTML, JavaScript, dan CSS. Anda dapat mengunduh paket offline tersebut ke perangkat lokal terlebih dahulu. Saat klien membuka paket tersebut, sumber daya dimuat langsung dari perangkat lokal, sehingga meminimalkan dampak kondisi jaringan terhadap halaman HTML5.
Penggunaan paket offline HTML5 memberikan keunggulan berikut:
Tingkatkan pengalaman pengguna: Sertakan sumber daya statis dalam aplikasi Anda dan rilis aplikasi tersebut. Saat pengguna pertama kali membuka aplikasi, mereka tidak perlu mengunduh sumber daya tersebut melalui jaringan dan dapat langsung menggunakan aplikasi.
Aktifkan pembaruan dinamis: Saat Anda merilis versi baru atau perbaikan darurat, letakkan sumber daya yang telah dimodifikasi ke dalam paket offline. Dengan memperbarui konfigurasi, aplikasi secara otomatis mengunduh pembaruan tersebut. Hal ini memungkinkan pengguna menerima pembaruan lebih cepat karena Anda tidak perlu melewati proses peninjauan di toko aplikasi.
Cara kerja paket offline
Bagian ini menjelaskan cara kerja paket offline, mencakup topik-topik berikut:
Struktur paket offline
Paket offline adalah file terkompresi dalam format .amr. Jika Anda mengubah ekstensi .amr menjadi .zip dan mengekstrak file tersebut, Anda akan melihat bahwa file tersebut berisi sumber daya HTML dan kode JavaScript. Setelah kontainer HTML5 memuat sumber daya ini, konten tersebut dapat dirender di WebView.
Sebagai contoh, gambar berikut menunjukkan struktur folder dari paket sumber daya tipikal pada sistem iOS:
Folder tingkat pertama: Mewakili ID paket sumber daya umum, seperti
20150901.Folder tingkat kedua dan subdirektorinya berisi file resource kustom. Simpan semua file antarmuka depan dalam satu folder. Anda dapat memberi nama kustom pada folder tersebut, misalnya
/www. Selain itu, tetapkan file entri utama yang dibuka secara default oleh paket offline, misalnya/www/index.html.
Jenis paket offline
Saat mengembangkan HTML5, Anda sering menggunakan pustaka umum dasar, seperti Zepto dan FastClick. Di WebView aplikasi, cache bisa tidak andal. Pada beberapa model perangkat, cache secara otomatis dihapus setelah aplikasi ditutup. Untuk lebih meningkatkan performa halaman HTML5, gunakan paket offline global. Paket offline global menggabungkan serangkaian sumber daya umum ke dalam paket aplikasi khusus dan mengirimkannya ke klien.
Paket offline dibagi menjadi jenis-jenis berikut:
Global offline package: Berisi sumber daya publik yang dapat digunakan bersama oleh beberapa aplikasi.
Private offline package: Hanya dapat digunakan oleh satu aplikasi.
Saat Anda menggunakan paket offline global, sistem akan selalu mencoba membaca dari paket ini setiap kali mengakses halaman HTML5. Jika paket tersebut berisi sumber daya yang diminta, sistem akan mengambilnya langsung dari paket tersebut alih-alih dari jaringan. Oleh karena itu, tujuan utama mekanisme paket offline global adalah untuk mengelola penggunaan pustaka umum.
Untuk memastikan cakupan klien yang luas dan fleksibilitas, paket ini biasanya diperbarui minimal sebulan sekali. Ukuran paket offline juga dikontrol secara ketat.
Proses rendering
Saat kontainer HTML5 meminta sumber daya, URL yang sama digunakan untuk mengakses sumber daya lokal maupun online.
Kontainer HTML5 terlebih dahulu melakukan intersepsi terhadap permintaan tersebut. Setelah permintaan diintersepsi, salah satu dari skenario berikut terjadi:
Jika sumber daya lokal dapat memenuhi permintaan, kontainer HTML5 menggunakan sumber daya lokal tersebut.
Jika tidak ada sumber daya lokal yang dapat memenuhi permintaan, kontainer HTML5 menggunakan sumber daya online.
Oleh karena itu, WebView tidak mengetahui apakah sumber daya tersebut berasal dari lokal atau online.
Pengunduhan paket offline bergantung pada konfigurasinya:
Jika Download Timing diatur ke Wi-Fi only, paket offline secara otomatis diunduh di latar belakang hanya saat terhubung ke jaringan Wi-Fi.
Jika Download Timing diatur ke Download over all networks, paket offline secara otomatis diunduh melalui jaringan non-Wi-Fi, yang mengonsumsi kuota data pengguna. Gunakan opsi ini dengan hati-hati.
Jika pengguna membuka aplikasi sebelum paket offline selesai diunduh, aplikasi akan dialihkan ke alamat fallback untuk menampilkan halaman online. Fitur fallback menangani kasus di mana paket offline belum selesai diunduh. Saat paket offline dipublikasikan, versi online yang sesuai juga dipublikasikan ke CDN. Struktur folder versi online identik dengan paket offline. Alamat fallback dikirim ke perangkat lokal bersama informasi paket offline. Dalam kasus di mana paket offline belum selesai diunduh, klien melakukan intersepsi terhadap permintaan halaman dan mengalihkannya ke alamat CDN yang sesuai. Hal ini memungkinkan aplikasi beralih antara halaman online dan offline kapan saja.
Mode jalannya paket offline
Untuk membuka paket offline, lakukan langkah-langkah berikut:
Minta informasi paket. Klien meminta informasi paket offline dari server dan menyimpannya di database lokal. Informasi paket offline mencakup alamat unduh dan nomor versi paket tersebut.
Unduh paket offline. Klien mengunduh paket offline dari server ke ponsel.
Instal paket offline. Klien menyalin paket dari folder unduhan ke folder instalasi di ponsel.
Nama domain virtual
Nama domain virtual adalah mekanisme kontainer unik yang hanya berlaku untuk aplikasi offline. Setelah halaman disimpan di klien, WebView menggunakan skema file untuk mengaksesnya dari perangkat lokal. Namun, pengguna kemudian dapat melihat path file di bilah alamat. Hal ini menimbulkan masalah berikut:
Pengalaman pengguna. Saat pengguna melihat alamat file, mereka mungkin merasa alamat yang terpapar tidak aman atau asing.
Keamanan. Protokol file secara langsung menyertakan path lokal. Artinya, siapa pun dapat melihat path file tersebut, yang menimbulkan risiko keamanan.
Karena alasan tersebut, gunakan mekanisme nama domain virtual alih-alih langsung menggunakan path file untuk akses. Nama domain virtual adalah alamat domain HTTPS yang mematuhi spesifikasi skema URL, seperti https://xxxxxxx.HTML5app.example.com. Domain induk dari nama domain virtual, seperti example.com, harus merupakan nama domain yang telah Anda daftarkan.
Format standar untuk nama domain virtual adalah sebagai berikut:
https://{appid}.HTML5app.example.com.