Karena koneksi internet terkadang tidak stabil atau tidak ada, Anda perlu mempertimbangkan offline terlebih dahulu: tulis aplikasi Anda seolah-olah tidak memiliki koneksi internet. Setelah aplikasi Anda berfungsi secara offline, tambahkan fungsi jaringan apa pun yang diperlukan agar aplikasi dapat melakukan lebih banyak hal saat online. Baca terus untuk mendapatkan tips tentang cara menerapkan aplikasi yang diaktifkan secara offline.
Ringkasan
Aplikasi Chrome mendapatkan hal berikut secara gratis:
- File aplikasi Anda—semua JavaScript, CSS, dan font, serta resource lain yang diperlukan (seperti gambar)—sudah didownload.
- Aplikasi Anda dapat menyimpan dan secara opsional menyinkronkan data dalam jumlah kecil menggunakan Chrome Storage API.
- Aplikasi Anda dapat mendeteksi perubahan konektivitas dengan memproses peristiwa online dan offline.
Namun, kemampuan tersebut tidak cukup untuk menjamin bahwa aplikasi Anda akan berfungsi secara offline. Aplikasi yang diaktifkan untuk offline harus mengikuti aturan berikut:
- Gunakan data lokal jika memungkinkan.
- Saat menggunakan resource dari internet, gunakan
XMLHttpRequestuntuk mendapatkannya, lalu simpan data tersebut secara lokal. Anda dapat menggunakan Chrome Storage API, IndexedDB, atau Filesystem API untuk menyimpan data secara lokal. - Memisahkan UI aplikasi Anda dari datanya.
- Memisahkan UI dan data tidak hanya akan meningkatkan desain aplikasi Anda dan memudahkan tugas untuk mengaktifkan penggunaan offline, tetapi juga memungkinkan Anda memberikan tampilan lain dari data pengguna. Framework MVC dapat membantu Anda memisahkan UI dan data.
- Asumsikan aplikasi Anda dapat ditutup kapan saja.
- Simpan status aplikasi (baik secara lokal maupun jarak jauh, jika memungkinkan) sehingga pengguna dapat melanjutkan dari bagian terakhir yang mereka tinggalkan.
- Uji aplikasi Anda secara menyeluruh.
- Pastikan aplikasi Anda berfungsi dengan baik dalam skenario umum dan sulit.
Batasan keamanan
Aplikasi Chrome dibatasi dalam hal penempatan resource:
- Karena data lokal terlihat di komputer pengguna dan tidak dapat dienkripsi dengan aman, data sensitif harus tetap berada di server. Misalnya, jangan menyimpan sandi atau nomor kartu kredit secara lokal.
- Semua JavaScript yang dijalankan aplikasi harus ada dalam paket aplikasi. Teks tersebut tidak boleh inline.
Semua gaya CSS, gambar, dan font pada awalnya dapat ditempatkan di paket aplikasi atau di URL jarak jauh. Jika sumber daya tersebut bersifat jarak jauh, Anda tidak dapat menentukannya di HTML. Sebagai gantinya, dapatkan data menggunakan
XMLHttpRequest(lihat Mereferensikan resource eksternal). Kemudian, lihat data dengan URL blob atau (lebih baik lagi) simpan, lalu muat data menggunakan Filesystem API.
Namun, Anda dapat memuat resource media berukuran besar seperti video dan suara dari situs eksternal. Salah satu
alasan untuk pengecualian ini terhadap aturan ini adalah bahwa elemen <video> dan <audio> memiliki perilaku penggantian
yang baik saat aplikasi memiliki konektivitas terbatas atau tidak ada sama sekali. Alasan lainnya adalah pengambilan dan penyajian
media dengan URL XMLHttpRequest dan blob saat ini tidak mengizinkan streaming atau buffering sebagian.
Untuk menyediakan iframe dalam sandbox, Anda dapat membuat tag <webview>. Kontennya dapat dilakukan dari jarak jauh, tetapi
tidak memiliki akses langsung ke API aplikasi Chrome (lihat Menyematkan halaman web eksternal).
Beberapa pembatasan di Aplikasi Chrome diterapkan oleh Kebijakan Keamanan Konten (CSP) yang selalu berikut dan tidak dapat diubah untuk Aplikasi Chrome:
default-src 'self';
connect-src * data: blob: filesystem:;
style-src 'self' blob: data: filesystem: 'unsafe-inline';
img-src 'self' blob: data: filesystem:;
frame-src 'self' blob: data: filesystem:;
font-src 'self' blob: data: filesystem:;
media-src * data: blob: filesystem:;
Menentukan offline_enabled
Diasumsikan bahwa aplikasi Anda berperilaku baik saat offline. Jika tidak, Anda harus memberitahukan fakta itu agar
ikon peluncurannya meredup ketika pengguna sedang offline. Untuk melakukannya, setel offline_enabled ke false
dalam file manifes aplikasi:
{
"name": "My app",
...
"offline_enabled": false,
...
}
Menyimpan data secara lokal
Tabel berikut menunjukkan opsi untuk menyimpan data secara lokal (lihat juga Mengelola Data).
| API | Penggunaan terbaik | Catatan |
|---|---|---|
| API Penyimpanan Chrome | Sejumlah kecil data {i>string<i} | Bagus untuk setelan dan status. Mudah disinkronkan dari jarak jauh (tetapi tidak harus). Tidak cocok untuk jumlah data yang lebih besar karena kuota. |
| API IndexedDB | Data terstruktur | Memungkinkan penelusuran cepat pada data. Gunakan dengan izin penyimpanan tak terbatas. |
| API Sistem File | Lainnya | Menyediakan area dalam sandbox tempat Anda dapat menyimpan file. Gunakan dengan izin penyimpanan tak terbatas. |
Menyimpan data dari jarak jauh
Secara umum, Anda bebas menentukan cara menyimpan data dari jarak jauh, tetapi beberapa framework dan API dapat membantu (lihat Arsitektur MVC). Jika Anda menggunakan Chrome Storage API, semua data yang dapat disinkronkan akan otomatis disinkronkan setiap kali aplikasi online dan pengguna login ke Chrome. Jika belum login, pengguna akan diminta login. Namun, perhatikan bahwa data pengguna yang disinkronkan akan dihapus jika pengguna meng-uninstal aplikasi Anda. {QUESTION: true?}
Pertimbangkan untuk menyimpan data pengguna setidaknya selama 30 hari setelah aplikasi di-uninstal, sehingga pengguna akan memiliki pengalaman yang baik jika mereka menginstal ulang aplikasi Anda.
Memisahkan UI dari data
Menggunakan framework MVC dapat membantu Anda mendesain dan mengimplementasikan aplikasi sehingga data benar-benar terpisah dari tampilan aplikasi pada data. Lihat Arsitektur MVC untuk mengetahui daftar framework MVC.
Jika aplikasi Anda berbicara ke server khusus, server akan memberi Anda data, bukan potongan HTML. Pikirkan tentang API RESTful.
Setelah data Anda terpisah dari aplikasi, akan jauh lebih mudah untuk memberikan tampilan alternatif data. Misalnya, Anda dapat memberikan tampilan situs web dari data publik apa pun. Tampilan situs selain dapat berguna saat pengguna Anda tidak membuka Chrome, tetapi juga memungkinkan mesin telusur menemukan data.
Pengujian
Pastikan aplikasi Anda berfungsi dengan baik dalam situasi berikut:
- Aplikasi diinstal, kemudian offline. Dengan kata lain, penggunaan pertama aplikasi adalah offline.
- Aplikasi diinstal di satu komputer, lalu disinkronkan ke komputer lain.
- Aplikasi di-uninstal, lalu langsung diinstal lagi.
- Aplikasi berjalan di dua komputer secara bersamaan, dengan profil yang sama. Aplikasi harus berperilaku wajar saat satu komputer offline, pengguna melakukan banyak hal di komputer tersebut, lalu komputer kembali online.
- Aplikasi memiliki konektivitas internet yang terputus-putus, dan sering kali beralih antara online dan offline.
Pastikan juga aplikasi tidak menyimpan data pengguna yang sensitif (seperti sandi) di komputer pengguna.