Why you should create a PWA for your side-project

#pwa #svelte #spotify #webdev

Introduction

We, (web-)developers, often have some small ideas for fun projects. Most of these ideas are not startup worthy but are just for the sake of learning something new or just having fun. One of the advantages of creating these is that you're building a strong portfolio with a "I am a creator" vibe.

Well, with a little more effort, you can upgrade these projects to look a lot more professional when sharing them on your socials.

Why do we create these side projects

I really like to create small and fun projects, not everything we make needs to have 1000 daily users to be developed. Sometimes we just have a little idea or something that's bothering us and by creating a small tool, we can solve that.

Another reason why I like to make small projects is to explore new technologies. It's hard to try something new in production software.

Creating side projects and proof-of-concepts are also a great way to develop a personal brand. By having small, non significant, projects on your portfolio you show that you have a hand's-on mentality. Which I believe a lot of companies want.

What is a PWA

You could write an entire thesis on what a PWA is and isn't. (whoops, maybe I did exactly that 😅). But in it's essence a PWA is just a regular website which makes use of modern web technologies to provide a user experience which is close to that of a native application.

It's an attempt to bridge the gap between native applications and web applications. It's taking the strongest points from both worlds and combines them.

You have the reach of the web. People can find your project from a search engine and it has an easy to access URL.
You have similar capabilities as a native application. A PWA can still provide some functionality when offline and it can also re-engage users with push-notification.

Many people would consider a PWA as a website which can be installed on a device. The lighthouse audit which is embedded in the Chrome dev-tools confirms this. So how do you make a regular website installable?

How to make a PWA installable.

Your website has to fullfill these 3 requirements

Register a service worker
Register a manifest.json
Be served over HTTPS

1. Service worker

According to the lighthouse audit, a PWA should register a service worker which has the "start_url" in it's scope. There is no requirement based on what the functionality of the service worker should be. To make the site installable, there should just be a service worker, it's totally fine if this web worker has no functionality.

So it's fine if it looks like this:

self.addEventListener("install", (evt) => {
 console.log('service worker installed')
});

self.addEventListener("activate", (evt) => {
  console.log('service worker activated')
});

This service worker should be registered in the startup file of your project. For me (in Svelte.js) that's







```jsx
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js');
}

And that's it! Now your website registers a service worker.

You can do al lot of cool things to improve the performance of your web app with a service worker. But that's outside the scope of this article.

2. Manifest.json

The manifest.json file is a file which provides some extra metadata about the website to the device. There are a lot of tools which can help you with generating the correct assets and the manifest file itself

I like to use this one: https://www.dunplab.it/web-app-manifest-generator

According the the MDN docs, a manifest should at least include the following properties

{
  "name": "Spotify album browser",
  "short_name": "Spotify album browser",
  "start_url": "/"
  "description": "A progressive web application that suggests albums based on the preferences and listening history of the user",
  "background_color": "#191414",
    "theme_color": "#1db954",
  "display": "standalone",
  "icons": [
        ...
    {
    "src": "images/icons/apple-icon-152x152-dunplab-manifest-4531.png",
    "type": "image/png",
    "sizes": "152x152"
   },
        ...
  ],
}

you should link to this file in the head-tag of your website:

<head>
    ...
    <link rel="manifest" href="/manifest.json" />
    ...
</head>

3. HTTPS

This one might be the easiest. It's 2020, serving a website without HTTPS is just not acceptable anymore. There are many platforms where you can host your side projects for free with https (Vercel, Netlify, ...). I like to use Vercel for it CI/CD features, but most likely other platforms can do the same.

So that's it! that's all! That wasn't to bad huh? For this effort your website, or should I call it PWA? is installable as a standalone experience on al modern devices. Most browsers (not Safari) will even prompt the user to install it.

Why should I create a PWA for my side project.

There are many reasons why you should add these 3 simple steps to your next side project.

Engagement: A PWA can be accessed from a URL just like a regular website. There is a really low barrier to test your little prototype/ tool. If you would've created a native app, this barrier is way bigger.
It looks hella good on screenshots/ screencasts. The little project you will make will look and feel like a native app. Without having to deal with the hassle of actually creating a native app. When you share your app in a video or just as screenshots, they look a lot better/ more professional than when you share screenshots of a web-browser.
Showing excellence: Progressive web applications are kinda new (debatable) in the world of web-development. Showing that you know what it is and know how to implement is, shows that you are actively following the latest trends within web development. This could be a crucial factor when you're trying to land your next job.

An Example

A couple weeks ago I struggled with finding new music on Spotify. For some reason, the Spotify recommendation engine kept on suggesting the same albums over and over again. Coincidentally at that time I wanted to try out Svelte.

I did some research and I found out that Spotify has a great API which is really easy to use.

So I had a plan. Create a good looking, personalized, album suggesting PWA.

After two weekends of developing and getting to know Svelte I had my PWA up and running. I recorded a screencast and shared it on my LinkedIn. It didn't explode or went viral. But yet, more people then expected gave it a try and I received a lot of feedback. One week later, I shared my project on reddit.

In both cases, I didn't have that many likes or upvotes. But a lot of the people that saw my post actually gave it a try. Which is in the end the goal.