sinkronisasi-latar belakang-workbox

Saat Anda mengirim data ke server web, terkadang permintaan akan gagal. Ini mungkin karena pengguna telah kehilangan konektivitas, atau mungkin karena server mati; dalam kedua kasus tersebut, Anda sering ingin mencoba mengirim permintaan lagi nanti.

BackgroundSync API baru adalah solusi ideal untuk masalah ini. Ketika pekerja layanan mendeteksi bahwa permintaan jaringan gagal, jaringan dapat mendaftar untuk menerima peristiwa sync, yang dikirimkan ketika browser berpikir bahwa konektivitas telah kembali. Perhatikan bahwa peristiwa sinkronisasi dapat ditayangkan meskipun pengguna telah meninggalkan aplikasi, sehingga jauh lebih efektif daripada metode tradisional mencoba lagi permintaan yang gagal.

Workbox Latar Belakang Sinkronisasi dirancang untuk mempermudah penggunaan BackgroundSync API dan mengintegrasikan penggunaannya dengan modul Workbox lainnya. Ini juga menerapkan strategi penggantian untuk browser yang belum menerapkan BackgroundSync.

Browser yang mendukung BackgroundSync API akan gagal memutar ulang secara otomatis permintaan atas nama Anda di interval yang dikelola oleh browser, kemungkinan menggunakan backoff eksponensial di antara upaya replay. Di browser yang tidak mendukung BackgroundSync API secara native, Workbox Background Sync akan secara otomatis mencoba replay setiap kali pekerja layanan dimulai.

Penggunaan Dasar

Cara termudah untuk menggunakan Sinkronisasi Latar Belakang adalah menggunakan Plugin yang akan Mengantrekan permintaan yang gagal secara otomatis dan mencobanya kembali saat sync mendatang peristiwa 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],
  }),
  'POST'
);

BackgroundSyncPlugin hook ke dalam callback plugin fetchDidFail, dan fetchDidFail hanya dipanggil jika ada pengecualian yang ditampilkan, kemungkinan besar karena hingga kegagalan jaringan. Artinya, permintaan tidak akan dicoba ulang jika ada yang diterima dengan Status error 4xx atau 5xx. Jika Anda ingin mencoba lagi semua permintaan yang menghasilkan, misalnya, status 5xx, Anda dapat melakukannya dengan menambahkan plugin fetchDidSucceed dalam strategi Anda:

const statusPlugin = {
  fetchDidSucceed: ({response}) => {
    if (response.status >= 500) {
      // Throwing anything here will trigger fetchDidFail.
      throw new Error('Server error.');
    }
    // If it's not 5xx, use the response as-is.
    return response;
  },
};

// Add statusPlugin to the plugins array in your strategy.

Penggunaan Lanjutan

Workbox Background Sync juga menyediakan class Queue, yang dapat Anda membuat instance dan menambahkan permintaan yang gagal. Permintaan yang gagal akan disimpan di IndexedDB dan dicoba lagi saat browser merasa konektivitas telah dipulihkan (yaitu saat diterima peristiwa sinkronisasi).

Membuat Antrean

Untuk membuat Workbox Background Sync Queue, Anda perlu membuatnya dengan nama antrean (yang harus unik untuk origin):

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

const queue = new Queue('myQueueName');

Nama antrean digunakan sebagai bagian dari nama tag yang mendapat Edisi register() oleh model SyncManager. Penting juga digunakan sebagai Nama Object Store untuk database tensorflow.

Menambahkan permintaan ke Antrean

Setelah membuat instance Antrean, Anda dapat menambahkan permintaan yang gagal ke instance tersebut. Anda menambahkan permintaan yang gagal dengan memanggil metode .pushRequest(). Misalnya, kode berikut menangkap setiap permintaan yang gagal dan menambahkannya ke antrean:

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 akan dicoba ulang secara otomatis ketika pekerja layanan menerima peristiwa sync (yang terjadi saat browser berpikir bahwa konektivitas telah pulih). Browser yang tidak mendukung BackgroundSync API akan mencoba lagi antrean setiap kali pekerja layanan dimulai. Ini mengharuskan halaman yang mengontrol pekerja layanan untuk berjalan, sehingga sistem itu tidak akan terlalu efektif.

Menguji Sinkronisasi Latar Belakang Kotak Kerja

Sayangnya, pengujian BackgroundSync agak tidak intuitif dan sulit karena sejumlah alasan.

Pendekatan terbaik untuk menguji penerapan Anda adalah melakukan hal berikut:

1. Memuat halaman dan mendaftarkan pekerja layanan Anda.
2. Nonaktifkan jaringan komputer atau server web Anda.
   • JANGAN GUNAKAN DEVTOOLS CHROME SECARA OFFLINE. Kotak centang offline di DevTools hanya memengaruhi permintaan dari halaman. Permintaan Service Worker akan terus dibahas.
3. Membuat permintaan jaringan yang harus diantrekan dengan Workbox Background Sync.
   • Anda dapat memeriksa permintaan yang telah masuk dalam antrean dengan melihat Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests
4. Sekarang aktifkan jaringan atau server web Anda.

5. Paksa peristiwa sync awal dengan membuka Chrome DevTools > Application > Service Workers, dengan memasukkan nama tag workbox-background-sync:<your queue name> dengan <your queue name> yang seharusnya nama antrean yang Anda tetapkan, lalu klik tombol tombol.

   

6. Anda akan melihat permintaan jaringan untuk permintaan yang gagal dan data IndexedDB kini seharusnya kosong karena permintaan telah berhasil di-replay.