What is Offline Support?

Offline support allows your Webapp to function even when internet connectivity is lost. This is achieved by caching important assets locally, ensuring that users can continue using the app without interruption.

Adding Workbox

It is recommended to integrate Workbox into your Git-based Webapp. Workbox is a collection of JavaScript libraries that enable powerful Service Worker functionality, crucial for building Progressive Web Apps (PWAs) with offline capabilities.

Adding a Service Worker

A Service Worker acts as a proxy between the browser and the network. It enables you to cache assets for offline use, ensuring your Webapp can function seamlessly without internet access.

Registering the Service Worker

To add a Service Worker to your Webapp, include the following code in your app.js file::

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("./pwa-examples/APPEXAMPLE/sw.js");
}

This will automatically download, install, and activate the sw.js file.

Installing the Service Worker

You can handle the install event to cache essential files for offline use. Here's how to initialize the cache::

self.addEventListener("install", (e) => {
  console.log("[Service Worker] Install");
  const cacheName = "APPEXAMPLE-v1";
  const appShellFiles = [
    "/pwa-examples/APPEXAMPLE/",
    "/pwa-examples/APPEXAMPLE/index.html",
    "/pwa-examples/APPEXAMPLE/app.js",
    "/pwa-examples/APPEXAMPLE/style.css",
    "/pwa-examples/APPEXAMPLE/fonts/graduate.eot",
    // Add more files to cache
  ];

  e.waitUntil(
    caches.open(cacheName).then((cache) => {
      console.log("[Service Worker] Caching app shell");
      return cache.addAll(appShellFiles);
    })
  );
});

The waitUntil() method ensures that the Service Worker doesn't install until all necessary files are cached.

The fetch event allows you to intercept HTTP requests, serving files from the cache if they are available. If not, the files are fetched from the network and cached for future use:

self.addEventListener("fetch", (e) => {
  e.respondWith(
    caches.match(e.request).then((response) => {
      return response || fetch(e.request).then((fetchResponse) => {
        return caches.open("APPEXAMPLE-v1").then((cache) => {
          cache.put(e.request, fetchResponse.clone());
          return fetchResponse;
        });
      });
    })
  );
});

During the activate event, you can clear old caches to ensure the app uses only the necessary files:

self.addEventListener("activate", (e) => {
  const cacheWhitelist = ["APPEXAMPLE-v1"];
  e.waitUntil(
    caches.keys().then((keyList) => {
      return Promise.all(
        keyList.map((key) => {
          if (!cacheWhitelist.includes(key)) {
            return caches.delete(key);
          }
        })
      );
    })
  );
});

Updates

To handle updates, simply change the cache name version. A new Service Worker will be installed in the background, and once all clients are using the new version, the old cache will be deleted.

const cacheName = "APPEXAMPLE-v2";

More Information on Offline Support

With this setup, your Webapp will work smoothly offline, enhancing the user experience even when network connectivity is intermittent or unavailable.