I’m trying to make a Progressive Web App! Part 5: 100% PWA
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:
My first PWA!
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!
