Bertahun-tahun yang lalu, saya melakukan riset tentang bagaimana aplikasi asli merespons kurangnya konektivitas jaringan. Sementara saya kehilangan tautan ke analisis (saya yakin itu ada di Google+), narasi menyeluruhnya adalah bahwa banyak aplikasi asli terkait dengan internet yang tidak dapat dipisahkan dari apa yang mereka tolak menolak untuk berfungsi. Kedengarannya seperti banyak aplikasi web, hal yang membedakannya dari web adalah bahwa pengalaman itu masih 'on-brand', Bart Simpson akan memberi tahu Anda bahwa Anda harus online (misalnya), namun untuk sebagian besar pengalaman web Anda mendapatkan 'Dino' (lihat chrome: // dino).

Kami telah bekerja pada Pekerja Layanan untuk waktu yang lama sekarang, dan sementara kami melihat semakin banyak situs memiliki halaman yang dikontrol oleh Pekerja Layanan, sebagian besar situs bahkan tidak memiliki pengalaman dasar mundur ketika jaringan tidak tersedia.

Saya bertanya kepada teman baik saya, Jake, apakah kami memiliki petunjuk tentang cara membuat halaman cadangan umum dengan asumsi bahwa Anda tidak ingin membuat pengalaman yang sepenuhnya offline-pertama, dan dalam 10 menit dia telah membuatnya. Check it out .

Untuk singkatnya, saya telah menempelkan kode di bawah karena panjangnya hanya sekitar 20 baris. Itu cache aset offline, dan kemudian untuk setiap pengambilan yang merupakan 'navigasi' mengambil itu akan melihat apakah itu kesalahan (karena jaringan) dan kemudian membuat halaman offline di tempat konten asli.

addEventListener('install', (event) => {
  event.waitUntil(async function() {
    const cache = await caches.open('static-v1');
    await cache.addAll(['offline.html', 'styles.css']);
  }());
});

// See https://developers.google.com/web/updates/2017/02/navigation-preload#activating_navigation_preload
addEventListener('activate', event => {
  event.waitUntil(async function() {
    // Feature-detect
    if (self.registration.navigationPreload) {
      // Enable navigation preloads!
      await self.registration.navigationPreload.enable();
    }
  }());
});

addEventListener('fetch', (event) => {
  const { request } = event;

  // Always bypass for range requests, due to browser bugs
  if (request.headers.has('range')) return;
  event.respondWith(async function() {
    // Try to get from the cache:
    const cachedResponse = await caches.match(request);
    if (cachedResponse) return cachedResponse;

    try {
      // See https://developers.google.com/web/updates/2017/02/navigation-preload#using_the_preloaded_response
      const response = await event.preloadResponse;
      if (response) return response;

      // Otherwise, get from the network
      return await fetch(request);
    } catch (err) {
      // If this was a navigation, show the offline page:
      if (request.mode === 'navigate') {
        return caches.match('offline.html');
      }

      // Otherwise throw
      throw err;
    }
  }());
});

Itu semuanya. Ketika pengguna sedang online mereka akan melihat pengalaman default.

Dan ketika pengguna sedang offline, mereka akan mendapatkan halaman fallback.

Saya menemukan skrip sederhana ini sangat kuat, dan ya, sementara itu masih dapat ditingkatkan, saya percaya bahwa bahkan hanya perubahan sederhana dalam cara kami berbicara kepada pengguna kami ketika ada masalah dengan jaringan memiliki kemampuan untuk secara fundamental meningkatkan persepsi web untuk pengguna di seluruh dunia.

Pembaruan ** ** Jeffrey Posnick kinldy mengingatkan saya tentang penggunaan Navigasi Preload agar tidak harus menunggu boot SW untuk semua permintaan, ini sangat penting jika Anda hanya mengendalikan permintaan jaringan failed.

Paul Kinlan

Trying to make the web and developers better.