I’m trying to make a Progressive Web App! (Part 0)

Stefan Ledin
Jul 23, 2017 · 2 min read

This is the first in a series of posts where I’m gonna write about my struggles when trying to make a PWA (Progressive Web App).

This will be my first time attempting to do that, so I hope it will be interesting and useful to read about all the bumps in the road and gotchas I’ll encounter.

I’m actually not gonna make one from scratch. Instead, I’m going to convert an existing web app, klickrubrik.nu, into an PWA.
Klickrubrik is a Laravel site running on a DigitalOcean server with Ubuntu 14, Nginx and PHP 7. The app itself is quite simple. You can create a “…you’ll never believe what happens next!” style clickbait joke and send to your friends.

Since the app only has two views, it should be “easy” to start with (famous last words.)

What do I need to do?

First, I need to know what I have to do in order to make Klickrubrik a PWA. Fortunately, there’s a Chrome extension called Lighthouse that generates a report about your site and gives you a checklist.

Lighthouse report for klickrubrik.nu

As we can see, the app performs quite well as it is. The Lighthouse report complains about seven things I need to fix in order to make it a PWA.

  • Does not register a Service worker
  • Does not respons with a 200 when offline
  • Does not use HTTPS
  • Does not redirect HTTP traffic to HTTPS
  • User will not be prompted to install the Web App
  • Is not configured for a custom splash screen
  • Adress bar does not match brand colors

So there we have it. These are the things I have to do. Let’s take a break and prepare ourselfs before we get our hands dirty.

See you in part 1!

Stefan Ledin

Written by

Web developer who makes fast WordPress sites with clean code and awesome backends. Also, JavaScript is nice!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade