Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

Storage Offline untuk Progressive Web App

PWA di DevTools
Pokedex Progressive Web App menggunakan IndexedDB untuk keadaan aplikasi dan dataset Pokemon sedangkan Cache API digunakan untuk sumber daya yang bisa dialamatkan URL.

Koneksi Internet bisa turun-naik atau tidak ada saat di perjalanan, yang merupakan sebab dukungan offline dan kinerja yang bisa diandalkan menjadi fitur umum di aplikasi web progresif. Bahkan di lingkungan nirkabel yang sempurna, penggunaan yang bijak atas caching dan teknik storage lainnya bisa meningkatkan pengalaman pengguna secara mendasar. Dalam entri blog ini, kita akan merangkum beberapa ide seputar storage data offline untuk PWA — memikirkan payload JSON, gambar dan data statis umum yang diambil untuk menyediakan pengalaman yang bermakna secara offline.

Saran

Mari kita langsung ke pokok masalah dengan saran umum untuk menyimpan data secara offline:

Inilah dasar pemikirannya:

Kedua API asinkron (IndexedDB adalah berbasis kejadian dan Cache API berbasis Promise). Keduanya juga dapat digunakan bersama web worker, jendela, dan service worker. IndexedDB tersedia di mana saja. Service Worker (dan Cache API) kini tersedia di Chrome, Firefox, Opera dan sedang dalam development untuk Edge. Pembungkus Promise untuk IndexedDB menyembunyikan sebagian mesin andal namun kompleks (mis. transaksi, penetapan versi skema) yang disertakan bersama pustaka IndexedDB. IndexedDB akan mendukung pengamat, yang memungkinkan sinkronisasi mudah antar tab.

Safari 10 telah memperbaiki banyak bug yang sudah berjalan lama di IndexedDB dalam Tech Previews terbaru mereka. CATATAN: Sebagian orang mengalami masalah stabilitas pada IndexedDB dan PouchDB di Safari 10 serta mengalami sedikit kelambatan. Sebelum dilakukan banyak riset di sini, mileage Anda mungkin bervariasi. Lakukanlah pengujian dan laporkan bug browser agar orang-orang @webkit dan paa penulis pustaka OSS terkait bisa melihatnya. LocalForage, PouchDB, YDN dan Lovefield menggunakan WebSQL di Safari secara default (karena tidak ada cara efisien untuk pengujian fitur bagi IndexedDB yang rusak). Berarti pustaka-pustaka ini akan berfungsi di Safari 10 tanpa upaya ekstra (cuma tidak menggunakan IndexedDB secara langsung).

Untuk PWA, Anda meng-cache sumber daya statis, menulis shell aplikasi (file JS/CSS/HTML) dengan menggunakan Cache API dan mengisi data laman offline dari IndexedDB. Dukungan debug bagi IndexedDB kini tersedia di Chrome (tab Application), Opera, Firefox (Storage Inspector) dan Safari (lhat tab Storage).

Bagaimana dengan mekanisme storage lainnya?

Web Storage (mis. LocalStorage dan SessionStorage) bersifat sinkron, tidak memiliki dukungan Web Worker dan dibatasi ukuran serta tipenya (hanya string). Cookie menggunakannya namun bersifat sinkron, tidak memiliki dukungan web worker, juga dibatasi ukurannya. WebSQL tidak memiliki dukungan browser yang luas dan penggunaannya tidak disarankan. File System API tidak didukung di browser selain Chrome. File API sedang ditingkatkan di File and Directory Entries API dan spesifikasi File API namun belum ada yang cukup matang atau terstandar untuk mendorong adopsi secara luas.

Berapa banyak yang bisa saya simpan?

Browser Batas
Chrome <6% dari ruang bebas
Firebox <10% dari ruang bebas
Safari <50 MB
IE10 <250 MB

Di Chrome dan Opera, storage Anda adalah per titik asal (bukan per API). Kedua mekanisme storage akan menyimpan data hingga kuota browser tercapai. Aplikasi bisa memeriksa banyaknya kuota yang sedang digunakan dengan Quota Management API. Di Chrome, aplikasi bisa menggunakan hingga 6% dari ruang bebas di disk. Di Firefox, aplikasi bisa menggunakan hingga 10% dari ruang bebas di disk, namun akan mengkonfirmasi pengguna untuk permintaan storage lebih jauh setelah menyimpan data 50 MB. Di Safari versi seluler, aplikasi bisa menggunakan hingga 50 MB maks, sedangkan Safari versi desktop memungkinkan storage tak terbatas (dan mengonfirmasi setelah 5 MB). IE10+ maksimal 250 MB dan akan mengonfirmasi pengguna saat 10 MB. PouchDB melacak perilaku storage IDB.

Bagaimana saya bisa tahu berapa banyak ruang storage yang digunakan aplikasi saya?

Di Chrome, Quota Management API memungkinkan Anda melakukan kueri terhadap ukuran ruang storage yang saat ini digunakan dan berapa banyak yang tersedia untuk aplikasi. Storage Quota Estimate API yang lebih baru mencoba membuatnya lebih mudah lagi untuk mengetahui banyaknya kuota yang digunakan titik asal dengan dukungan untuk Promises.

Bagaimana cara kerja penggusuran cache?

Browser Kebijakan Penggusuran
Chrome LRU setelah Chrome kehabisan ruang
Firebox LRU jika disk sudah penuh
Safari Tanpa penggusuran
Edge Tanpa penggusuran

Titik asal diberi sejumlah ruang untuk digunakan sesukanya. Ruang kosong ini digunakan bersama oleh semua bentuk storage asal (IndexedDB, Cache API, localStorage, dll). Jumlah yang diberikan tidak ditetapkan dan akan bervariasi, bergantung pada kondisi perangkat dan storage.

Bila web storage tinggal sedikit, UA akan mengosongkan storage agar ruang tersedia. Hal ini bisa mengganggu daya respons offline sehinngga spesifikasi Storage yang baru-baru ini diperbarui mendefinisikan strategi "persisten", dan “upaya terbaik”, dengan “upaya terbaik” sebagai default. “Upaya terbaik” berarti storage bisa dikosongkan tanpa menyela pengguna, namun kurang tahan lama untuk data jangka panjang dan/atau data kritis. IndexedDB dan Cache API keduanya termasuk dalam kategori “upaya terbaik” saat ini.

Storage "persisten" tidak secara otomatis dikosongkan bila tinggal sedikit. Pengguna perlu mengosongkan storage ini secara manual (lewat setelan browser). Chrome sedang bereksperimen dengan dukungan untuk Storage Persisten pada percobaan asal, dan berita terbaru mengatakan penyediaannya akan bersama Chrome 55.

Pekerjaan storage offline saat ini dan akan datang

Jika tertarik dengan storage offline, upaya di bawah ini layak disimak.

  • Storage Tahan Lama: melindungi storage dari kebijakan pengosongan oleh agen-pengguna.

  • Indexed Database API 2.0: manajemen data kunci-nilai.

  • IndexedDB versi Promise: dukungan asli untuk IndexedDB versi Promise.

  • IndexedDB Observer: observasi IndexedDB asli tanpa perlu pembungkus untuk database.

  • Async Cookies API: API cookie JavaScript asinkron untuk dokumen dan worker.

  • Quota Management API: memeriksa banyaknya kuota yang digunakan oleh aplikasi/titik asal.

  • file yang bisa ditulis: memungkinkan situs berinteraksi dengan file lokal secara lebih sempurna.

  • Pengunduhan direktori: memungkinkan situs mengunduh direktori tanpa file .zip.

  • File and Directory Entries API: dukungan untuk pengunggahan file dan direktori dengan cara seret-dan-letakkan.

  • Dukungan untuk Async Cookies API sedang dirancang saat ini bersama polyfill yang sedang dikerjakan.

  • Debug IndexedDB saat ini tidak didukung di Edge (akan tetapi, dimungkinkan men debug JetDB yang mendasarinya) — berikan suara Anda di sini untuk dukungan bawaan.

  • Walaupun gagasan untuk LocalStorage asinkron dahulu telah dimulai, fokus saat ini adalah tentang mendapatkan IndexedDB 2.0 dalam keadaan bagus.

  • Proposal file yang bisa ditulis mungkin pada akhirnya akan memberi kita solusi pelacakan standar yang lebih baik untuk interaksi file lokal secara mulus.

  • Untuk aplikasi yang memerlukan storage lebih persisten, lihat pekerjaan yang sedang berlangsung pada Storage Tahan Lama.

Storage offline bukanlah keajaiban dan pemahaman atas API yang mendasarinya akan berguna dalam membantu Anda memanfaatkan sebaik mungkin apa yang sekarang tersedia. Bila Anda lebih suka menggunakan API ini secara langsung atau menggunakannya bersama pustaka abstraksi, sisihkan waktu untuk mempelajari opsi Anda.

Semoga panduan ini akan membantu Anda menciptakan pengalaman offline yang membuat PWA Anda bersinar! ✨

Bacaan latar belakang

Sumber daya berguna

  • sw-toolbox (offline-caching untuk permintaan dinamis/waktu proses)

  • sw-precache (melakukan precache offline untuk shell aplikasi/aset statis)

  • Pengguna Webpack bisa menggunakan secara langsung plugin di atas atau plugin offline

Pustaka-pustaka IndexedDB layak untuk diperiksa

Terima kasih untuk Nolan Lawson, Joshua Bell (yang mengerjakan Open Web Storage dan BlinkOn talk banyak mengilhami artikel ini), Jake Archibald, Dru Knox, dan pihak lainnya atas karya mereka sebelumnya di bidang web storage.