Mencoba ulang permintaan saat kembali online

Saat Anda membuat permintaan server web, ada kemungkinan terjadinya kegagalan. Hal ini bisa jadi karena pengguna telah kehilangan konektivitas, atau server jarak jauh tidak aktif.

Meskipun dokumentasi ini terutama berfokus pada penanganan permintaan GET dalam pekerja layanan, metode lain seperti POST, PUT, atau DELETE mungkin berperan. Metode ini sering digunakan untuk berkomunikasi dengan API backend guna menyediakan data bagi aplikasi web. Jika permintaan ini gagal karena tidak ada pekerja layanan, permintaan tersebut harus dicoba lagi secara manual oleh pengguna saat kembali online—dan itu bukanlah hal yang selalu diingat oleh pengguna.

Jika ini menjelaskan aplikasi Anda—dan jika pekerja layanan ada di dalam campuran—idealnya Anda ingin mencoba lagi mengirim permintaan yang gagal saat pengguna kembali online. BackgroundSync API menawarkan solusi untuk masalah ini. Jika mendeteksi permintaan jaringan yang gagal, pekerja layanan dapat mendaftar untuk menerima peristiwa sync saat browser mendeteksi bahwa konektivitas telah kembali. Peristiwa sync dapat dikirimkan meskipun pengguna telah keluar dari halaman yang mendaftarkannya, sehingga lebih efektif daripada metode lain untuk mencoba kembali permintaan yang gagal.

Workbox memisahkan API ini dengan modul workbox-background-sync, yang membuat BackgroundSync API lebih mudah digunakan dengan modul Workbox lainnya. Tindakan ini juga mengimplementasikan strategi penggantian untuk browser yang belum mendukung BackgroundSync.

Penggunaan dasar

BackgroundSyncPlugin diekspor dari modul workbox-background-sync, dan dapat digunakan untuk mengantrekan permintaan yang gagal dan mencoba lagi saat peristiwa sync mendatang diaktifkan:

import {BackgroundSyncPlugin} from 'workbox-background-sync';
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

const bgSyncPlugin = new BackgroundSyncPlugin('myQueueName', {
  maxRetentionTime: 24 * 60 // Retry for max of 24 Hours (specified in minutes)
});

registerRoute(
  /\/api\/.*\/*.json/,
  new NetworkOnly({
    plugins: [bgSyncPlugin]
  }),
  // An optional third parameter specifies the request method
  'POST'
);

Di sini, BackgroundSyncPlugin diterapkan ke rute yang cocok dengan permintaan POST dengan rute API yang mengambil data JSON. Jika pengguna sedang offline, BackgroundSyncPlugin akan mencoba lagi permintaan tersebut saat pengguna kembali online, tetapi hanya hingga satu hari.

Penggunaan lanjutan

workbox-background-sync juga menyediakan class Queue, yang dapat Anda buat instance-nya dan menambahkan permintaan yang gagal. Seperti halnya dengan BackgroundSyncPlugin, permintaan yang gagal disimpan di IndexedDB dan dicoba saat browser berpikir bahwa konektivitas telah dipulihkan.

Membuat antrean

Untuk membuat antrean, buat instance objek Queue dengan string yang mewakili nama antrean:

import {Queue} from 'workbox-background-sync';

const queue = new Queue('myQueueName');

Nama antrean digunakan sebagai bagian dari nama tag yang dibuat oleh metode register() yang disediakan oleh SyncManager global. Nama ini juga digunakan untuk Object Store yang disediakan oleh database IndexedDB.

Menambahkan permintaan ke antrean

Setelah membuat instance Queue, Anda dapat menambahkan permintaan yang gagal ke instance tersebut menggunakan metode pushRequest():

import {Queue} from 'workbox-background-sync';

const queue = new Queue('myQueueName');

self.addEventListener('fetch', (event) => {
  // Add in your own criteria here to return early if this
  // isn't a request that should use background sync.
  if (event.request.method !== 'POST') {
    return;
  }

  const bgSyncLogic = async () => {
    try {
      const response = await fetch(event.request.clone());
      return response;
    } catch (error) {
      await queue.pushRequest({request: event.request});
      return error;
    }
  };

  event.respondWith(bgSyncLogic());
});

Setelah ditambahkan ke antrean, permintaan secara otomatis akan mencoba lagi saat pekerja layanan menerima peristiwa sync karena browser menganggap jaringan tersebut tersedia lagi. Browser yang tidak mendukung BackgroundSync API akan mencoba lagi permintaan tersebut setiap kali pekerja layanan dimulai, yang merupakan cara yang kurang efektif untuk mencoba kembali permintaan yang gagal, tetapi semacam fallback.

Menguji workbox-background-sync

Menguji perilaku Background Sync bisa jadi rumit, tetapi hal ini bisa dilakukan di Chrome DevTools. Pendekatan terbaik saat ini adalah seperti ini:

1. Muat halaman yang mendaftarkan pekerja layanan Anda.
2. Matikan koneksi jaringan komputer atau nonaktifkan server web Anda. Jangan gunakan tombol offline di Chrome DevTools. Kotak centang offline hanya memengaruhi permintaan dari halaman, tetapi permintaan pekerja layanan akan terus berlanjut.
3. Membuat permintaan jaringan yang harus diantrekan dengan workbox-background-sync. Anda dapat memeriksa permintaan yang telah berada dalam antrean dengan melihat di Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests.
4. Sekarang pulihkan konektivitas jaringan atau nyalakan kembali server web Anda.
5. Paksa peristiwa sync awal dengan membuka Chrome DevTools > Application > Service Workers. Masukkan nama tag workbox-background-sync:<your queue name>, dengan <your queue name> adalah nama antrean yang Anda tetapkan.
6. Klik tombol "Sinkronkan".
   
7. Sekarang Anda akan melihat permintaan jaringan yang gagal sebelumnya, dicoba lagi dan dilanjutkan. Akibatnya, IndexedDB store harus kosong, karena permintaan telah berhasil diulang.

Kesimpulan

Menggunakan workbox-background-sync untuk mencoba lagi permintaan jaringan yang gagal dapat menjadi cara yang efektif untuk meningkatkan pengalaman pengguna dan keandalan aplikasi Anda, seperti memungkinkan pengguna mengirim ulang permintaan API yang gagal agar mereka tidak kehilangan data yang ingin dikirimkan ke API Anda. Hal ini juga dapat digunakan untuk mengisi kekosongan dalam data Anda sendiri, seperti analitik. Faktanya, modul workbox-google-analytics menggunakan workbox-background-sync di balik layar untuk mencoba kembali permintaan yang gagal mengirim data ke Google Analytics.

Apa pun kasus penggunaan Anda, workbox-background-sync menyederhanakan tugas semacam ini, meningkatkan pengalaman developer dan memberi Anda lebih banyak peluang untuk meningkatkan pengalaman pengguna dan fungsi aplikasi web.