Memaksa waktu tunggu jaringan

Ada kalanya Anda memiliki koneksi jaringan, tetapi koneksi tersebut terlalu lambat, atau koneksi Anda berbohong kepada Anda bahwa Anda sedang online. Dalam situasi semacam ini, ketika pekerja layanan terlibat, strategi caching yang mengutamakan jaringan mungkin memerlukan waktu terlalu lama untuk mendapatkan respons dari jaringan, atau permintaan akan hang—dan indikator lingkaran berputar pemuatan akan berputar tanpa henti—hingga Anda mendapatkan halaman error.

Apa pun situasinya, akan lebih baik bila kita beralih kembali ke respons terakhir yang di-cache untuk suatu aset atau halaman setelah periode waktu tertentu. Namun, ada masalah lain yang dapat diatasi oleh Workbox.

Menggunakan networkTimeoutSeconds

Memaksa waktu tunggu untuk permintaan jaringan dapat dilakukan saat menggunakan strategi NetworkFirst atau NetworkOnly. Strategi ini menawarkan opsi networkTimeoutSeconds, yang menentukan jumlah detik pekerja layanan harus menunggu respons jaringan tiba sebelum melakukan bail out dan menampilkan versi terakhir yang di-cache:

// sw.js
import { NetworkFirst } from 'workbox-strategies';
import { registerRoute, NavigationRoute } from 'workbox-routing';

// Only wait for three seconds before returning the last
// cached version of the requested page.
const navigationRoute = new NavigationRoute(new NetworkFirst({
  networkTimeoutSeconds: 3,
  cacheName: 'navigations'
}));

registerRoute(navigationRoute);

Kode di atas menginstruksikan pekerja layanan Anda untuk menyelamatkan permintaan navigasi yang mengutamakan jaringan dan menggunakan versi yang terakhir di-cache setelah tiga detik. Saat digunakan dengan permintaan navigasi, hal ini akan menjamin akses ke respons yang terakhir di-cache dari halaman yang dikunjungi sebelumnya.

Namun, bagaimana jika halaman yang Anda akses tidak memiliki respons lama di cache? Dalam kasus seperti itu, Anda dapat membuat respons penggantian ke halaman HTML offline umum:

import {registerRoute, NavigationRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

// Hardcode the fallback cache name and the offline
// HTML fallback's URL for failed responses
const FALLBACK_CACHE_NAME = 'offline-fallback';
const FALLBACK_HTML = '/offline.html';

// Cache the fallback HTML during installation.
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(FALLBACK_CACHE_NAME).then((cache) => cache.add(FALLBACK_HTML)),
  );
});

// Apply a network-only strategy to navigation requests.
// If offline, or if more than five seconds pass before there's a
// network response, fall back to the cached offline HTML.
const networkWithFallbackStrategy = new NetworkOnly({
  networkTimeoutSeconds: 5,
  plugins: [
    {
      handlerDidError: async () => {
        return await caches.match(FALLBACK_HTML, {
          cacheName: FALLBACK_CACHE_NAME,
        });
      },
    },
  ],
});

// Register the route to handle all navigations.
registerRoute(new NavigationRoute(networkWithFallbackStrategy));

Ini berfungsi karena saat Anda menggunakan networkTimeoutSeconds dalam strategi NetworkFirst, pengendali Anda akan menampilkan respons error jika waktu tunggu habis dan tidak ada kecocokan cache untuk URL. Jika hal itu terjadi, plugin Workbox handlerDidError dapat memberikan respons generik sebagai penggantian.

Berapa lama waktu tunggu terlalu lama?

Saat memaksa waktu tunggu untuk permintaan—terutama permintaan navigasi—Anda perlu menemukan keseimbangan yang tepat antara tidak membiarkan pengguna menunggu terlalu lama dan tidak kehabisan waktu terlalu cepat. Menunggu terlalu lama, dan Anda dapat berisiko pengguna koneksi lambat memantul sebelum waktu tunggu habis. Waktu tunggu terlalu cepat, dan Anda mungkin akhirnya menayangkan konten usang yang tidak perlu dari cache.

Jawaban yang benar adalah "tergantung". Jika Anda menjalankan situs seperti blog dan tidak terlalu sering memperbarui konten, jawaban yang tepat mungkin salah, yaitu tidak menunggu terlalu, karena apa pun yang ada dalam cache mungkin sudah cukup "baru". Namun, untuk situs dan aplikasi web yang lebih interaktif, sebaiknya tunggu sedikit lebih lama dan jangan tampilkan data usang dari cache pekerja layanan dengan segera.

Jika Anda mencatat metrik di kolom, lihat persentil ke-75 dari skor Time to First Byte (TTFB) dan First Contentful Paint (FCP) untuk mengetahui kemungkinan waktu tunggu yang lebih lama untuk permintaan navigasi di antara basis pengguna Anda. Itu dapat memberi Anda wawasan tentang ke mana harus menggambar garis.