Karena koneksi internet bisa saja tidak stabil atau tidak ada, Anda perlu mempertimbangkan offline terlebih dahulu: menulis aplikasi seolah-olah tidak ada koneksi internet. Setelah aplikasi bekerja offline, tambahkan apa pun fungsi jaringan yang diperlukan agar aplikasi Anda dapat melakukan lebih banyak hal saat online. Baca untuk mendapatkan tips menerapkan aplikasi Anda yang diaktifkan secara offline.
Ringkasan
Aplikasi Chrome mendapatkan hal berikut secara gratis:
- File aplikasi Anda—semua JavaScript, CSS, dan font-nya, serta resource lain yang diperlukan (seperti image)—sudah didownload.
- Aplikasi Anda dapat menyimpan dan menyinkronkan sejumlah kecil data menggunakan Chrome Storage API secara opsional.
- Aplikasi Anda dapat mendeteksi perubahan dalam konektivitas dengan memproses peristiwa online dan offline.
Namun, kemampuan itu tidak cukup untuk menjamin bahwa aplikasi Anda akan berfungsi secara offline. Anda saat offline aplikasi 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. - Pisahkan UI aplikasi Anda dari datanya.
- Memisahkan UI dan data tidak hanya meningkatkan desain aplikasi dan memudahkan tugas untuk mengaktifkan penggunaan offline, tetapi juga memungkinkan Anda memberikan tampilan lain dari data pengguna. Framework MVC dapat membantu Anda tetap 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 mana saja mereka tinggalkan.
- Uji aplikasi Anda secara menyeluruh.
- Pastikan aplikasi Anda berfungsi dengan baik dalam skenario umum dan rumit.
Pembatasan keamanan
Penempatan resource Aplikasi Chrome sangatlah terbatas:
- Karena data lokal terlihat di komputer pengguna dan tidak dapat dienkripsi dengan aman, maka sensitif data harus tetap berada di server. Misalnya, jangan simpan sandi atau nomor kartu kredit secara lokal.
- Semua JavaScript yang dijalankan aplikasi harus berada dalam paket aplikasi. Kolom ini tidak boleh inline.
Semua gaya CSS, gambar, dan font dapat ditempatkan di dalam paket aplikasi terlebih dahulu atau di URL jarak jauh. Jika resource merupakan jarak jauh, Anda tidak dapat menentukannya di HTML. Sebagai gantinya, dapatkan data menggunakan
XMLHttpRequest(lihat Merujuk ke referensi eksternal). Lalu merujuk ke data dengan URL blob atau (lebih baik lagi) simpan dan muat data menggunakan API sistem file.
Namun, Anda dapat memuat resource media berukuran besar seperti video dan suara dari situs eksternal. paket Premium AI
alasan untuk pengecualian aturan ini adalah karena elemen <video> dan <audio> memiliki penggantian yang baik
perilaku ketika aplikasi memiliki konektivitas terbatas atau tidak ada sama sekali. Alasan lainnya adalah pengambilan dan penayangan
media dengan URL XMLHttpRequest dan blob saat ini tidak mengizinkan streaming atau buffering sebagian.
Untuk menyediakan iframe sandbox, Anda dapat membuat tag <webview>. Isinya bisa jarak jauh, tapi
tidak memiliki akses langsung ke API aplikasi Chrome (lihat Menyematkan halaman web eksternal).
Beberapa pembatasan pada Aplikasi Chrome diberlakukan oleh Kebijakan Keamanan Konten (CSP) yang selalu berupa hal 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 menyampaikan fakta tersebut, sehingga
bahwa ikon peluncurannya diredupkan
saat pengguna sedang {i>offline<i}. Untuk melakukannya, tetapkan offline_enabled ke false
di 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} | Sangat cocok untuk setelan dan status. Mudah disinkronkan dari jarak jauh (tetapi Anda tidak harus melakukannya). Tidak cocok untuk jumlah data yang lebih besar karena kuota. |
| API tensorflow | Data terstruktur | Memungkinkan penelusuran data yang cepat. Gunakan dengan izin unlimitedStorage. |
| API Sistem File | Lainnya | Menyediakan area dalam sandbox tempat Anda dapat menyimpan file. Gunakan dengan izin unlimitedStorage. |
Menyimpan data dari jarak jauh
Secara umum, cara menyimpan data dari jarak jauh bergantung pada Anda, tetapi beberapa framework dan API dapat membantu (lihat MVC Arsitektur). Jika Anda menggunakan Chrome Storage API, semua data yang dapat disinkronkan akan otomatis disinkronkan setiap kali aplikasi online dan pengguna masuk ke Chrome. Jika pengguna tidak {i>login<i}, mereka akan diminta untuk login. Namun, perhatikan bahwa data yang disinkronkan pengguna akan dihapus jika pengguna meng-uninstal aplikasi Anda. {QUESTION: true?}
Pertimbangkan untuk menyimpan data setidaknya 30 hari setelah aplikasi Anda di-uninstal, sehingga pengguna akan memiliki pengalaman yang baik jika mereka menginstal ulang aplikasi Anda.
Memisahkan UI dari data
Penggunaan framework MVC dapat membantu Anda mendesain dan menerapkan aplikasi sehingga data sepenuhnya terpisah dari tampilan aplikasi pada data. Lihat Arsitektur MVC untuk mengetahui daftar framework MVC.
Jika aplikasi Anda berbicara dengan server khusus, server harus memberikan data, bukan potongan HTML. Berpikirlah persyaratan RESTful API.
Setelah data Anda terpisah dari aplikasi, akan jauh lebih mudah untuk memberikan tampilan alternatif data. Misalnya, Anda dapat memberikan tampilan situs dari data publik apa pun. Tampilan situs web tidak hanya dapat berguna saat pengguna tidak menggunakan Chrome, tetapi hal ini dapat memungkinkan mesin telusur menemukan data.
Pengujian
Pastikan aplikasi Anda berfungsi dengan baik dalam situasi berikut:
- Aplikasi diinstal, lalu segera offline. Dengan kata lain, penggunaan pertama aplikasi sedang offline.
- Aplikasi diinstal di satu komputer lalu disinkronkan ke komputer lain.
- Aplikasi di-uninstal lalu segera diinstal kembali.
- Aplikasi berjalan di dua komputer secara bersamaan, dengan profil yang sama. Aplikasi harus berperilaku wajar ketika satu komputer {i>offline<i}, pengguna melakukan banyak hal di komputer itu, dan kemudian komputer kembali {i>online<i}.
- Aplikasi memiliki konektivitas yang terputus-putus, sering beralih antara online dan offline.
Pastikan juga bahwa aplikasi tidak menyimpan data pengguna sensitif (seperti sandi) di mesin Linux dan Windows.