Cara membuat aplikasi Anda bekerja secara offline dengan kekuatan JavaScript

Di dunia saat ini, konektivitas telah membuat kita lebih mobile dari sebelumnya yang (secara paradoks) terkadang menyebabkan kita offline: saat kita dalam mode pesawat, memiliki koneksi yang buruk, tidak memiliki data lagi, berada di kereta bawah tanah… dan sebagainya.

Efek kedua dari mobilitas ini adalah lambatnya pemuatan situs web yang berat: Amazon menemukan bahwa hanya 100 milidetik waktu muat tambahan membuat mereka kehilangan 1% dari penjualan.

Dalam situasi ini, kami ingin memiliki akses offline ke konten kami. Itulah mengapa alat seperti Instapaper dan Pocket ada. Spotify dan Netflix juga memungkinkan Anda mengunduh media untuk penggunaan offline.

Kami dapat dengan mudah melihat ada permintaan untuk fitur ini dan bagaimana hal itu dapat menguntungkan bisnis Anda.

Sudah waktunya web offline.

Untungnya kami tidak perlu membuat aplikasi asli untuk mencapai tujuan ini lagi. Kami dapat membuat situs web offline dengan kekuatan JavaScript berkat pekerja layanan baru dan fitur Cache API .

Apa itu Service Worker (SW)?

Pekerja layanan adalah kode JavaScript yang berjalan di latar belakang situs web Anda, bahkan saat halaman ditutup. Untuk penggunaan offline, salah satu tujuannya adalah menyimpan permintaan jaringan atau gambar di cache browser.

Agensi BETC membuat situs demo bernama whentheinternetisdown.com untuk perusahaan telekomunikasi Prancis Bouygues. Ini hanya berfungsi secara offline dan terasa agak ajaib. Ayo coba :)

Cachinglah yang membuat keajaiban situs: Anda dapat kembali dalam 3 minggu, 1 bulan, 1 tahun, masih tanpa koneksi, dan mengakses semua konten. - Maxime Huygue, Kepala BETC Digital Studio

Oke, ini keren, beri tahu saya cara melakukannya.

Oke, mari kita mulai dengan beberapa prasyarat:

  • Untuk menggunakan SW, Anda harus mengaktifkan https di situs web Anda.
  • Anda harus memiliki pemahaman yang baik tentang cara kerja JavaScript promise.
  • SW bekerja di semua browser modern kecuali teman kita IE.
  • Meskipun itu JavaScript, mereka berjalan dalam konteks pekerja web. Artinya: tanpa DOM, dan berjalan di luar thread utama.
  • Pahami bagaimana database beroperasi.
  • Kode pekerja layanan Anda harus berada dalam file JavaScript terpisah. Contoh: service-worker.js

Siklus hidup pekerja layanan

Agar dapat bekerja, SW harus didaftarkan dalam aplikasi Anda, kemudian dipasang. Anda harus memeriksa apakah SW kompatibel dengan klien Anda sebelum melakukannya.

1) Pendaftaran

Jika tersedia, daftarkan file SW Anda. Ini akan mengembalikan janji, sehingga Anda dapat menangani kesalahan. Anda juga dapat menentukan cakupan url di opsi pendaftaran.

2) Instalasi

Pekerja layanan berbasis acara. Singkatnya, Anda harus melampirkan callback ke peristiwa, seperti yang akan Anda lakukan dengan element.addEventListener. Acara pertama yang perlu Anda gunakan adalah acara instal. Ini adalah saat yang tepat untuk menyimpan semua sumber daya penting Anda sebagai Javascript, CSS, HTML, Gambar… Di sinilah Cache API bergabung!

Kemudian buka metode atau buat cache yang ditautkan ke nama yang diinginkan. Promise yang dikembalikan perlu digabungkan ke dalam event.waitUntil (), yang akan menunda penginstalan pekerja layanan hingga promise diselesaikan. Jika tidak, peristiwa penginstalan gagal dan pekerja layanan akan dibuang.

Berhati-hatilah dengan caching: penyimpanan pengguna Anda sangat berharga, jadi jangan menyalahgunakannya. Selain itu, berhati-hatilah: peristiwa penginstalan hanya dapat dipanggil sekali, dan Anda harus memperbarui SW untuk mengubahnya.

3) Aktivasi

Yang ini agak halus.

Setelah penginstalan selesai, pekerja layanan belum aktif: kami berada dalam status terinstal.

Dalam keadaan ini, ia menunggu untuk mengambil kendali atas halaman. Kemudian beralih ke fase berikutnya dalam siklus hidup, yaitu fase aktivasi.

Fase aktivasi berguna saat Anda memperbarui SW. Kasus yang paling umum adalah menghapus cache dari SW sebelumnya yang terpasang.

Harap diperhatikan bahwa, setelah berhasil dipasang, pekerja yang diperbarui akan menunggu hingga pekerja yang ada tidak mengontrol klien (klien tumpang tindih selama penyegaran).

self.skipWaiting () mencegah menunggu, artinya service worker aktif segera setelah selesai dipasang. Keuntungan dari metode ini adalah Anda dapat menerima peristiwa pengambilan lebih cepat.

Tidak masalah saat Anda memanggil skipWaiting (), selama atau sebelum menunggu. Sangat umum untuk menyebutnya dalam acara instal.

Fiuh! Mari kita istirahat dan menyimpulkan apa yang telah kita lihat:

  • Pekerja layanan adalah bagian dari JavaScript yang mengaktifkan fitur offline seperti cache.
  • Kami menjelajahi Siklus Hidup SW: pendaftaran, instalasi, aktivasi
  • Kami telah mempelajari cara mengimplementasikan kasus penggunaan umum seperti: sumber daya cache dan membersihkan cache dengan API Cache.
  • Kami melihat self.skipWaiting dan self.clients.claim memungkinkan kami mengaktifkan SW lebih cepat untuk menangkap acara lebih cepat.

Oke langsung saja…

4) Ambil

Peristiwa pengambilan memungkinkan kita untuk mencegat permintaan jaringan dan menyimpan tanggapan atau menyesuaikannya.

Keuntungan utama dari hook ini adalah mengembalikan sumber daya yang di-cache alih-alih membuat panggilan permintaan. Anda harus melihat Fetch API untuk menangani panggilan permintaan Anda.

Kami tidak dapat menutupi semua kemungkinan yang ditawarkan oleh service worker dalam satu artikel. Namun, saya mendorong Anda untuk melihat apa yang mungkin: 404 Khusus, API Sinkronisasi Latar Belakang untuk analitik offline, pembuatan template sisi ServiceWorker…. masa depan terlihat menarik!

Sejauh ini kita telah melihat apa itu service worker, cara kerjanya melalui siklus hidupnya, dan kasus penggunaan paling umum dengan bermain-main dengan Cache dan Fetch API. Kedua API tersebut memberi kita cara baru dalam mengelola sumber daya yang dapat dialamatkan URL di browser. Untuk melengkapi panduan ini, mari kita lihat bagaimana kita bisa menyimpan tipe data lain, misalnya JSON pengguna dari database Anda.

Simpan data khusus dengan IndexedDB

Panduan umum untuk penyimpanan data adalah bahwa sumber daya beralamat URL harus disimpan dengan antarmuka Cache, dan data lain harus disimpan dengan IndexedDB. Misalnya file HTML, CSS, dan JS harus disimpan di cache, sedangkan data JSON harus disimpan di IndexedDB. Perhatikan bahwa ini hanya pedoman, bukan aturan tegas. (sumber)

Singkatnya, kita akan melihat kapan Anda seharusnya tidak menggunakan Cache API tetapi IndexedDB sebagai gantinya. Keduanya asinkron dan dapat diakses di pekerja layanan, pekerja web, dan antarmuka jendela. Kabar baiknya adalah ini didukung dengan baik, bahkan di versi IE terbaru.

IndexedDB adalah database NoSQL. Data IndexedDB disimpan sebagai pasangan nilai kunci di penyimpanan objek, bukan tabel. Database tunggal dapat berisi sejumlah penyimpanan objek. Setiap kali nilai disimpan di penyimpanan objek, itu dikaitkan dengan kunci. Ini terlihat seperti ini:

Sangat klasik, bukan? Hal utama yang harus dipahami adalah konsep jalur kunci. Ini memberi tahu browser kunci mana yang akan digunakan untuk mengekstrak data dari dalam penyimpanan objek atau indeks.

Dalam contoh ini, kita dapat melihat bahwa jalur kunci kita adalah id properti, dan itu didefinisikan di baris 10. Kemudian kita mengembalikan semua item dari database. Ini adalah kasus penggunaan yang sangat mendasar, jadi jika Anda ingin mempelajari lebih lanjut tentang cara kerja IndexedDB, saya menyarankan Anda untuk membaca artikel yang sangat bagus ini.

Kesimpulan

Memanfaatkan web offline sangat bagus untuk pengalaman pengguna, dan beberapa perusahaan sudah mulai mengambil keuntungan darinya. Ini sebagian besar bergantung pada pekerja layanan, skrip JavaScript yang berjalan di latar belakang situs web Anda.

Kami telah melihat cara menggunakannya melalui siklus hidup pekerja layanan dan apa yang dapat Anda lakukan dengan menggunakan Cache and Fetch API. Kemungkinannya hampir tidak terbatas. jadi jadilah kreatif dan jangan terlalu rakus pada penyimpanan perangkat.

Anda bahkan dapat menggunakan database secara offline: untuk itulah IndexedDB dibuat. Kemampuan offline ini tentunya merupakan bagian dari masa depan web, jadi ini cocok dengan jenis situs web baru yang dibuat oleh Google: Aplikasi Web Progresif.

Bacaan lebih lanjut:

  • Buku Masakan Offline: //developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
  • PWA dan offline: //developers.google.com/web/ilt/pwa/lab-offline-quickstart
  • Lab: Menyimpan File dengan Service Worker: //developers.google.com/web/ilt/pwa/lab-caching-files-with-service-worker
  • Siklus Hidup Pekerja Layanan: //developers.google.com/web/fundamentals/primers/service-workers/lifecycle
  • Mengungkap Siklus Hidup Pekerja Layanan: //scotch.io/tutorials/demystifying-the-service-worker-lifecycle
  • Aktifkan Service Worker Lebih Cepat: //davidwalsh.name/service-worker-claim
  • Data Langsung di Pekerja Layanan: //developers.google.com/web/ilt/pwa/live-data-in-the-service-worker
  • IndexedDBKonsep dasar: //developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
  • Memulai Penyimpanan Offline Persisten dengan IndexedDB: //itnext.io/getting-started-with-persistent-offline-storage-with-indexeddb-1af66727246c