Digital Ocean Hackathon App: PWA time

There's one last step before completing the app (independently of adding new dictionaries, but that's a different story): transforming it into a PWA.

A Progressive Web Application (PWA) will serve two purposes in this case:

• Make it appear like a native app (if it's saved on the home screen).
• Cache the values so it works offline or with slow connections.

Dwindle is a static app. And it can be self-contained: once the content and the dictionaries are loaded, there's no real need for the Internet any more (apart from to publish into Twitter, d'uh! 😋)

By transforming Dwindle into a PWA, we will make it faster (pulled from cache) and available offline. So we are going to follow this DEV post about how to build a PWA (it's something that I've done in the past for my personal website, but I have to admit that I forgot.)

Some of the steps I had to follow:

• Create a manifest.json
• Create different icons for different resolutions
• Link the icons and manifest in the HTML
• Create the service worker to save in cache and fetch from cache
• Register the service worker

The code of the service worker was:

const STATIC_DWINDLE = "dev-dwindle-site-v1";
const urlsToCache = [
  "/",
  "/index.html",
  "/fav.ico",
  // ... rest of the assets
];

self.addEventListener("install", function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(STATIC_DWINDLE).then(function(cache) {
      console.log("Opened cache");
      return cache.addAll(urlsToCache);
    })
  );
});

self.addEventListener("fetch", function(event) {
  event.respondWith(
    fetch(event.request).catch(function() {
      return caches.match(event.request);
    })
  );
});

I placed that file at the root level of the website, and then in my code.js file, I registered the service worker like this:

// initizalize service worker
if ("serviceWorker" in navigator) {
  window.addEventListener("load", function () {
    navigator.serviceWorker
      .register("/serviceWorker.js")
      .then(res => console.log("Service worker registered"))
      .catch(err => console.log("Service worker not registered", err));
  });
}

After a short moment of error –mainly because I had placed the service worker in the js folder but was trying to read it from the root–, the service worker was registered correctly, the cache was filled correctly, and we have a PWA!

Run Lighthouse and:

And for the accessibility tests, they are still doing fine:

Summary of the day

The positives:

• Made the app into a PWA
• All tests are positive

The not so positives

• It could have a better design
• Only 2 days left!

Although the two days left are not as important anymore: the app is basically complete. The only thing left to do is to prepare the submission.