I’m trying to make a Progressive Web App! Part 1: HTTPS

This feels like the hardest, and potentially most painful, action I’ll have to take in order to make Klickrubrik a PWA. I’ve never installed a SSL certificate on a server before, but since HTTPS becomes more important every day, it certainly is an important skill to have. So let’s dig into it! (Yes, a TLDR; is avaliable!)

First stop: Google!

digitalocean create ssl certificate

Which brought me here:

How To Create a Self-Signed SSL Certificate for Nginx in Ubuntu 16.04 | DigitalOcean

I followed the guide and encountered the following problems along the way.

Problem 1

On step 4, when i ran:

sudo nginx -t

I got the following error message:

nginx: [emerg] invalid parameter “http2” in /etc/nginx/sites-enabled/klickrubrik.nu:92

Problem 1.1

I turned out that I had to upgrade Nginx to a newer version, but I could not run sudo apt-get update because of the following error:

GPG error: The following signatures couldn’t be verified because the public key is not available

I found the solution to this error here.

sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 3C962022012520A0

Please note that the numbers at the end should be replaced by the ones in your error message.

Problem 1.2

Now I could run sudo apt-get update , but I could not upgrade to a newer Nginx version than the one I had. This turned out to be the solution:

sudo add-apt-repository ppa:nginx/stable
sudo apt-get update
sudo apt-get install nginx

Problem 2

Okey, everything seamed to work at this point. But when I tried to browse to https://klickrubrik.nu, I got an “connection refused” error.

Now what?

Port 443 needs to be open

After a night of sleep and more research I came to the conclosion that port 443 is closed. This site checks that for you.

Port 443 is open!

However, after upgrading Ubuntu from version 14 to 16, port 443 was suddenly open! The upgrade of course led to other problems, but that’s a different story.

It works…kind of

I discovered that the etc/nginx/sites-avaliable/default file was modified after my upgrade of Ubuntu and Nginx. So I made the necessary modifications described in this guide once again, and then it worked!

Yay! “Your connection is not private”

Well, kind of. According to the guide, this is what I should expect. That’s a success I guess, but that’s not what I want my users to expect. But the guide doesn’t address this. Instead, it ends like this:

You have configured your Nginx server to use strong encryption for client connections. This will allow you serve requests securely, and will prevent outside parties from reading your traffic.

Okey? I guess that I doesn’t understand this SSL/HTTPS thing after all. I scrolled to the top of the guide once again to see what I’ve actually done.
There it says:

Note: A self-signed certificate will encrypt communication between your server and any clients. However, because it is not signed by any of the trusted certificate authorities included with web browsers, users cannot use the certificate to validate the identity of your server automatically.

[…] If you do have a domain name, in many cases it is better to use a CA-signed certificate. You can find out how to set up a free trusted certificate with the Let’s Encrypt project.

Aha! Let’s Encrypt! I’ve heard about that! This sounds promising, and you can always count on DigitalOcean. They have an article or tutorial for everything server related.

How To Secure Nginx with Let's Encrypt on Ubuntu 16.04 | DigitalOcean

It works!

Wow, what a wonderful tutorial! I just followed the steps and suddenly, HTTPS was working! Yay!

HTTPS. Safe and secure!

My God, that was a struggle! Servers are a real pain to deal with, at least for a simple developer as me. But you walk away stronger from every battle and I hope it’s worth it.

Does my site need HTTPS?

So how does the Lighthouse report look like now? I’m glad to say it has improved!

Two items less on the todo list!

• 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

TLDR;

I should have followed the second tutorial first. But first, I should have upgraded my server from Ubuntu 14 to 16. A lot of my pain was caused by issues related to either my older Ubuntu version or the upgrade itself.

But I’ve won another battle with the server and has learned a few valuable lessons!

• Upgrade to Ubuntu 16
• Check var/log/nginx/error.log for clues!
• nginx -t will tell you if you’ve messed up any vhost files
• If you’ve upgraded to PHP 7, check your vhost files to make sure that the requests are handled with the correct .sock file. Example fastcgi_pass unix/var/run/php/php7.0-fpm.sock;

See you in the next part!