Digital Ocean Hackathon App: PWA time
Tags: dohackathon, hackathon, digitalocean
Published: 2021-01-07 23:52:18

---
title: Digital Ocean Hackathon App: PWA time
published: true
description: Converting the app into a PWA.
tags: dohackathon,hackathon,digitalocean
//cover_image: https://direct_url_to_image.jpg
series: Digital Ocean + DEV hackathon
---

There's one last step before completing [the app](https://dwindled-plzb3.ondigitalocean.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](https://dev.to/ibrahima92/how-to-build-a-pwa-from-scratch-with-html-css-and-javascript-4bg5) about how to build a PWA (it's something that I've done in the past for my [personal website](https://alvaromontoro.com), 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:

```javascript
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:

```javascript
// 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:

<figure>
![Screenshot of Lighthouse report: everything at 100 + PWA badge active](https://dev-to-uploads.s3.amazonaws.com/i/s7ijgj7k588shi9zvz5a.png)
<figcaption>Yes, that deserves some fireworks!</figcaption>
</figure>

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

<figure>
![Screenshot of Wave report: no errors](https://dev-to-uploads.s3.amazonaws.com/i/bptjd99swqid2xs7rkyy.png)
<figcaption>That deserves some fireworks too!</figcaption>
</figure>

---

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.