Cara Membuat PWA Anda Bekerja Offline

Anda mungkin tahu apa itu Progressive Web App—bersama dengan fitur-fiturnya yang mengubah industri—, tetapi demi iterasi, mari kita ulangi sekali lagi fitur PWA yang luar biasa dan unik yang berpotensi merevolusi pengalaman web, yaitu kemampuan offline -nya .

 Bacaan yang disarankan: Apa itu PWA?

Tidak seperti web biasa yang tampilan kontennya hanya tersedia dengan koneksi, Progressive Web App berbeda sedemikian rupa sehingga setelah pekerja layanan —mekanisme bawaan yang bertanggung jawab atas banyak fitur progresif PWA —telah memuat file yang diperlukan, tampilan offline akan dimungkinkan dan pengguna dapat berinteraksi dengan aplikasi bahkan saat offline.

Aplikasi Web Progresif dan Ketersediaan Offline

Untuk mengetahui apa yang diributkan dengan PWA—terutama kemampuan offline-nya, mungkin inilah saatnya Anda harus mengalami secara langsung tampilan offline situs web utama kami, yang menurut definisi juga merupakan PWA.

Dengan Progressive Web Apps, seluruh pengalaman offline tidak berbeda dengan pengalaman biasa Anda dengan koneksi—dan itulah keindahannya. Ini adalah fitur yang sangat berguna untuk toko eCommerce yang membutuhkan pengalaman menjelajah tanpa gangguan, bahkan saat tidak ada koneksi.

Catatan : Setiap situs PWA memerlukan caching awal sumber daya penting terlebih dahulu sebelum tampilan offline tersedia bagi pengguna.

Cara Membuat PWA Anda berfungsi Offline

Akan rumit untuk masuk ke semua detail membangun Aplikasi Web Progresif yang berfungsi penuh dan berkemampuan offline, itulah sebabnya hari ini kita akan mulai dengan dasar-dasarnya terlebih dahulu. Tujuan kami adalah membuat Aplikasi Web Progresif barebone yang berfungsi offline .

Prasyarat

• Situs web/aplikasi web biasa. Apa pun dengan satu index.html , satu index.js dan satu style.css akan dilakukan.

Setelah Anda memiliki semua prasyarat, saatnya untuk membuat PWA barebone Anda bekerja secara offline!

Membuat pekerja layanan dasar

Hal pertama yang pertama, Anda harus membuat sw.js Anda yang berisi semua kode yang diperlukan untuk pekerja layanan fungsional.

 //sw.js
self.addEventListener("mengambil", acara => {
    console.log("Anda mengambil " + event.url);
});

Setelah service worker Anda dibuat, mari periksa apakah browser Anda mendukungnya dan merujuknya di index.js :

 // indeks.js
if ("serviceWorker" di navigator) {
    navigator.serviceWorker
        .register("sw.js")
        .then(() => console.log("pekerja layanan terdaftar!"));
}
// sisa kode halaman Anda...

Kode di atas harus cukup sederhana. Ini memeriksa apakah browser Anda mendukung pekerja layanan dan jika demikian, mengembalikan " pekerja layanan terdaftar! ”. Dengan mendaftarkan pekerja layanan, Anda pada dasarnya memberi tahu browser untuk menggunakan sw.js sebagai instruksi untuk pekerja layanan Anda dan pada gilirannya, mengaitkan pekerja layanan baru dengan situs Anda.

Sekarang, kembali ke sw.js , tambahkan kode berikut:

 //sw.js
self.addEventListener("mengambil", acara => {
    console.log("Anda mengambil " + event.url);
});

Kode menambahkan EventListener yang penting untuk operasi kami selanjutnya. Faktanya, banyak browser termasuk Chrome tidak akan mengizinkan PWA Anda untuk diinstal kecuali jika ada fetch listener yang terdaftar.

addEventListener dalam kode di atas memiliki dua argumen: event yang akan didengarkan dan callback yang mengambil objek event. Setelah peristiwa ini diterapkan, pekerja layanan Anda sekarang akan mulai mendengarkan peristiwa fetch yang mencakup permintaan untuk HTML, CSS, JS, audio, gambar, dan permintaan lain situs web Anda ke API/situs web lain.

Caching sumber daya Anda

Agar PWA Anda dapat offline, pekerja layanan membayar sebagian dalam menyajikan konten , tetapi Anda juga perlu men-cache sumber daya laman Anda juga.

Untuk men-cache sumber daya halaman Anda, pertama-tama Anda perlu merencanakan ukuran Penyimpanan Cache Anda karena ada batasnya.

Batas Penyimpanan Cache

Setiap browser memiliki cara berbeda dalam menangani penyimpanan cache. Hampir semua dari mereka, bagaimanapun, memiliki batas ukuran untuk Penyimpanan Cache —batas ini sering menjadi alasan mengapa Anda tidak melihat situs besar dan gemuk seperti Amazon menyimpan seluruh toko mereka menggunakan pekerja layanan.

Sekarang, batas ini bervariasi karena bergantung pada perangkat pengguna akhir; tetapi biasanya harus sekitar 20% dari ruang disk maksimum pengguna Anda. Untuk informasi lebih lanjut, Anda dapat merujuk ke bagan kami di bawah ini atau ke panduan resmi Google tentang Penyimpanan Offline untuk Aplikasi Web Progresif.

Sekarang setelah kita menghilangkan batas Penyimpanan Cache ini, mari kita beralih ke cache sumber daya Anda .

Untuk menyimpan sumber daya laman Anda, kami memerlukan larik global yang berisi semua aset yang ingin kami simpan:

 /* 
  Ini semua hal yang ingin kami simpan di cache.
  Agar aplikasi berfungsi offline/dapat diinstal,
  kita harus menyimpan tidak hanya gambar tetapi HTML, JS, dan CSS kita
  juga - apa pun yang ingin kami gunakan saat offline.
*/
const ASET = [
    "https://i.imgur.com/Kbkqr2n.png",
    "https://i.imgur.com/lgLaG0x.png",
    "https://i.imgur.com/0iL8mxP.png",
    "https://i.imgur.com/KDsdYeS.png",
    "https://i.imgur.com/mK50fqL.png",
    "https://i.imgur.com/KYGH2Qa.png",
    "/style.css",
    "/index.html",
    "/ offline.html",
    "/"
];

Di sinilah semua yang ingin Anda gunakan secara offline disimpan. Pada contoh di atas, beberapa gambar pertama adalah jalur ke Imgur tempat berbagai logo SimiCart disimpan.

Dengan langkah ini, daftar sumber daya yang diperlukan untuk penggunaan offline sekarang sudah siap. Mari kita cache mereka menggunakan service worker.

Tambahkan bagian atas ini di bagian atas sw.js Anda:

 //sw.js

biarkan cache_name = "SimiCart"; // String yang digunakan untuk mengidentifikasi cache kita

self.addEventListener("instal", acara => {
    console.log("menginstal...");
    acara.tungguSampai(
        cache
            .buka(nama_cache)
            .kemudian(tembolok => {
                kembali cache.addAll(aset);
            })
            .catch(err => console.log(err))
    );
});

Pada dasarnya, kode ini menginstruksikan browser untuk menunggu (menggunakan panggilan waitUntil() ) untuk caching kita.

Dengan menggunakan API cache, khususnya addAll() , larik aset kita dapat dengan mudah ditambahkan ke cache, siap untuk dilayani oleh service worker. Nah, setelah dipikir-pikir, itu belum siap. Kita masih perlu sedikit memodifikasi event handler fetch kita.

Ini akan terlihat seperti sekarang:

 self.addEventListener("mengambil", acara => {
    if (event.request.url === "https://www.simicart.com/") {
        // atau apa pun URL aplikasi Anda
        acara.responsDengan(
            ambil(event.request).catch(err =>
                self.cache.open(cache_name).lalu(cache => cache.match("/offline.html"))
            )
        );
    } kalau tidak {
        acara.responsDengan(
            ambil(event.request).catch(err =>
                caches.match(event.request).lalu(respons => respon)
            )
        );
    }
});

Seharusnya sekarang jelas dalam kode di atas bahwa kami mencoba untuk menyimpan sumber daya bahkan ketika aplikasi sedang offline. Logikanya adalah sebagai berikut:

• Pertama, aplikasi mencoba untuk mendapatkan sumber daya secara online dan merespons dengan sumber daya yang di-cache jika pengambilan itu gagal (menggunakan respondWith() ).
• Di dalam respondWith() , kami memanggil fetch(event.request) untuk mencoba mengambil sumber daya dari jaringan, dan karena fetch berbasis Promise , Promise akan menolak jika gagal terhubung ke jaringan dan pada gilirannya, memicu catch() pernyataan.
• Dalam pernyataan catch() adalah tempat Anda ingin memanggil sumber daya yang di-cache.

Dan itu saja. PWA Anda sekarang seharusnya dapat bekerja secara offline! Cukup mudah, bukan?

Kesimpulan

Segalanya bergerak cukup cepat di dunia teknologi dan semakin lama Anda menunggu untuk mengonversi ke PWA atau mengintegrasikan fungsi vital seperti kemampuan offline ke PWA Anda, semakin banyak biaya peluang untuk Anda dan bisnis Anda.

Namun, selalu ada penyedia solusi yang tersedia seperti SimiCart yang dapat memenuhi setiap kebutuhan Anda. Jika, secara kebetulan, Anda seorang pedagang online dan mencari solusi PWA Magento yang sempurna, Anda berada di tempat yang tepat. Kami adalah penyedia solusi terkenal untuk situs web eCommerce Magento dengan lebih dari 5 tahun keahlian dalam PWA dan Aplikasi Asli.