DEV Community

Alvaro Montoro
Alvaro Montoro

Posted on

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 = [
  // ... rest of the assets

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

self.addEventListener("fetch", function(event) {
    fetch(event.request).catch(function() {
      return caches.match(event.request);
Enter fullscreen mode Exit fullscreen mode

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 () {
      .then(res => console.log("Service worker registered"))
      .catch(err => console.log("Service worker not registered", err));

Enter fullscreen mode Exit fullscreen mode

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:

Screenshot of Lighthouse report: everything at 100 + PWA badge active

Yes, that deserves some fireworks!

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

Screenshot of Wave report: no errors

That deserves some fireworks too!

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.

Top comments (0)