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:

Image for post
Image for post

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:

Image for post
Image for post

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.

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.

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.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store