I’m trying to make a Progressive Web App! Part 5: 100% PWA

Stefan Ledin
Nov 6, 2017 · 2 min read

In my previous post in this series, I finally got a working service worker up and running. I made it happen thanks to the life saving node module sw-precache.

That left me with the following Lighthouse report:

9 passed audits and just 2 left:

Does not respond with a 200 when offline

User will not be prompted to install the Web App

After a bit of research, I realized that these two issues was connected. The start_url isn’t stored in the cache yet, only the assets!

Without the HTML itself stored in the cache, nothing can be rendered without a network connection.

So after a little bit of googling, I found the solution rather quickly. I had to add a navigateFallback value in the settings object. I also needed to add a dynamicUrlToDependencies setting to make it work.

dynamicUrlToDependencies wants an object with the path as key and an array containing the template files as value.
For example, / is created by two .php files: master.blade.php and index.blade.php
So, the setting looks like this: {'/': ['master.blade.php', 'index.blade.php']}

Here’s the complete gulp task that generates the service worker for me:

So, with this implemented, the Lighthouse report finally looked like this:

That marks the end of this long series. It has, as always when learning, been quite painful sometimes, but my knowledge has improved a lot in multiple areas durning this journey.

Thanks for reading!

Progressive Web Apps

Progressive Web Apps Related Articles, Posts and Studies. Discover AngularJS, Ionic & ReactJS progressive web app themes at https://pwathemes.com. Join Progressive Web Apps on Slack: https://pwa-slack.herokuapp.com

Stefan Ledin

Written by

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

Progressive Web Apps

Progressive Web Apps Related Articles, Posts and Studies. Discover AngularJS, Ionic & ReactJS progressive web app themes at https://pwathemes.com. Join Progressive Web Apps on Slack: https://pwa-slack.herokuapp.com

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