Progressive web apps, also known as PWAs, are hot and happening right now. If you've been keeping up on web development in 2018, you'll likely have heard about them.

I've been learning about them most of the year through Udacity's Mobile Web Specialist nanodegree program that I'm about to graduate from. To add icing to that cake, I recently finished Jeremy Keith's Going Offline, which also explains what a PWA is.

What is a PWA anyway?

In case you're still scratching your head about what exactly a PWA is, Keith explains it as meeting three criteria:

1. It's served over HTTPs.
2. It works offline with a service worker.
3. It has a web app manifest file.

That's it! During the last five years of my experience in web development, it's clear to me that some websites are not so easily categorized as web applications or static. Lots of crossover is occurring these days.

Taking the PWA challenge

Thanks to Udacity and Jeremy Keith, I feel like I've gotten a better handle on nudging my personal projects into being more offline-friendly. That being said, I was ready to venture into bringing some of these ideas into my workplace, starting with the manifest file. Easy, right? I mean, what could be so hard about adding a JSON file? Nope. I was reminded that many moving parts make web development more complicated than I anticipate it to be. Let me show you.

First, I created the manifest file:

{
"lang": "en-us",
"name": "Alaska State Museums",
"short_name": "State Museums",
"author": "Alaska State Museum",
"description": "Online presence of the Alaska State Museum in Juneau and Sheldon Jackson Museum in Sitka.",
"theme_color": "#c30017",
"background_color": "#333",
"start_url": "/",
"display": "minimal-ui",
"icons": [
{
"src": "/images/logos/logo-sm.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "/images/logos/logo-lg.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

Next, I linked the file in the head of my document. In my case, I added it to an include file (don't judge me for my old ASP.NET method):

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

It's that simple really. And yet, Chrome kept giving me a 404 error after acknowledging that link reference, but found no file. Even though the manifest file was listed in DevTools! It's there, but it's NOT there?? I just couldn't understand where I could go wrong with a manifest file. The path was correct. The data was correct. I was stumped.

To make a long story short, it dawned on me (a few hours later) that the server at work (IIS) might just be hindering my efforts. So, I did some googling, and StackOverflow came to my rescue: How to allow download of .json file with ASP.NET.

I don't always have access to our server, but I do have the control to update a web.config file. So, I happily took their advice and added this to the web.config file that already existed:

<staticContent>
    <mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>

Magic! Suddenly DevTools picked up the file and I passed that part of the PWA Lighthouse audit.

Confidence Restored

Now that this "simple" fix has resolved today's issue, I'm ready to turn back to a project I was working on several months ago that I thought I'd failed due to poor JavaScript syntax that I'd written. This learning moment has re-established confidence in my competency, and I have no doubt my next project will go a little smoother since this JSON-used-on-IIS hurdle has been removed.