Step-by-Step Guide to Make Your PWA Offline

Understanding PWA with Offline Availability

As you know, native mobile apps are accessible only with a good network connection. But, you cannot view the content on poor or no network. The progressive web app technology is the solution to this problem.
Progressive web applications use service workers to add offline functionality for visitors. The service workers is a built-in mechanism that builds and adds PWA features into web apps. It handles all web app features. Also, it has made it possible for users to interact with the app offline.

The offline feature lets customer shop uninterrupted because of no network connection. That’s the beauty of using progressive applications for your business.

How to Make your PWA Offline?

It is an easy yet technical process for beginners. Because of that, I have prepared a simple guide to learning the basics of making progressive web apps offline.

Prerequisites

• You should know HTML and JavaScript.
• Browsers should support service worker features.

Two Steps to Setup a Progressive App Offline

• Create a Service Worker Manually

  You will need to create a service worker JavaScript file (Sw.js) that contains all the code. Follow the command:

  // sw.js
  self.addEventListener(“fetch”, event => {
  console.log(“You fetched ” + event.URL);
  });

  After creating a service worker, make sure your web browser supports it. Use the following code and reference it in your index.js:

  // index.js
  if (“serviceWorker” in navigator) {
  navigator.serviceWorker
  .register(“sw.js”)
  .then(() => console.log(“registered service worker!”));
  }
  //

  Next, it will analyze whether that browser supports the service worker. It should return a registered service. With the registration of service workers, the browser uses the sw.js file as instructions to activate the offline feature to your PWA app.

  Next, come back to the sw.js file and use this code:

  // sw.js
  self.addEventListener(“fetch”, event => {
  console.log(“You fetched ” + event.URL);
  });

  It adds an EventListener to install a PWA. Fetch listener helps to fetch events for your website. Without fetch, browsers such as Chrome will not PWA to be installed. This event is necessary for your service worker to fetch requests for HTML, CSS, JS, audio images, etc.

• Use Cache Storage API to make content available offline

  🔥First, Plan the Storage Limit. Each browser handles the cache storage differently. It also varies depending on the end users’ device. It should take 20% of your user’s maximum disk space.

  Next is to cache resources. You need to create a global array to contain all the assets that we want to store:

  /*
  For the app to work offline,
  Cache HTML, JS, CSS, and images.

  */
  const ASSETS = [
  “/style.css”,
  “/index.html”,
  “/offline.html”,
  “/”
  ];

  Now, the added list is ready to go offline. Your browser can cache then using a service worker. Add waituntil() call to instruct the browser to wait for caching. Use this code after adding cache resources:

  // sw.js
  let cache_name = “XYZ”; // The string used to identify our cache
  self.addEventListener(“install”, event => {
  console.log(“installing…”);
  event.waitUntil(
  caches
  .open(cache_name)
  .then(cache => {
  return cache.addAll(assets);
  })
  .catch(err => console.log(err))
  );
  });

  Service workers can serve a variety of assets. On second thought, it’s not quite ready. A few changes would still need to be made to our fetch event handler.

  self.addEventListener(“fetch”, event =>){
  if (event.request.url === “https://www.xyz.com/”) {
  event.respondWith(
  fetch(event.request).catch(err =>
  self.cache.open(cache_name).then(cache => cache.match(“/offline.html”))
  )
  );
  } else {
  event.respondWith(
  fetch(event.request).catch(err =>
  caches.match(event.request).then(response => response)
  )
  );
  }
  });

  The above code is quite long for beginners. So, I am sharing the logic behind it.

  • If retrieval of resources fails, it responds with cached resources using (respondwith()).
  • Use fetch(event. request) to retrieve resources from the network within the responsdwith(). When fetch cannot connect to the network, the Promise will reject and trigger the catch() statement.
  • Catch() is where you should call your cached resources.
  • Now your PWA will work offline.

Conclusion

Trends are changing, and so are the demands of mobile web users. They will expect fast, reliable, and engaging web applications. Progressive mobile apps help them browse and access without downloading. Before it gets late.

It is better to convert to PWA to offer offline capabilities. Magento PWA is the right solution to build web applications. It may help to save costs and time. Read why PWA is a better option than native apps.