Offline.js | A drop-in to replacement for App Cache | Caching library

I have a question about caching in PWA.
I would like to let user choose a list to cache. For example: User creating few lists, and then he choose one, to save for offline. When he is offline he can only open 2 views:
1. smth like "u are offline, do you want to open saved list?" (if it exist)
2. View with saved list.

At this moment, I am caching all views that user visited, but can't cache views with dynamic data.
I'm using PWA.essentials to do PWA.

I am using offline.js with turbolinks and on initial page load it works fine. But if I click another links then this wont work until I refresh the page. I can see the Offline.state is down but still the view is not showing. Is there any way to manually trigger the popup window?

Update

Other than the offline.js file the only js I have is this

Something that I'm running into with a project I'm working on is, I have a single page application. I'm handling browser navigation routing on the client-side, that lets me dynamically import some modules whenever a route is matched. My routing setup looks a bit like this:

Usually whenever I read a blog post about PWA's, the tutorial seems to just precache every single asset. But this seems to go against the app shell pattern a bit, which as I understand is: Cache the bare necessities (only the app shell), and runtime cache as you go. (Please correct me if I understood this incorrectly)

Imagine I have this single page application, it's a simple index.html with a web component: . That component sets up some routes which looks a little bit like this, I'm using Vaadin router and web components, but I imagine the problem would be the same using React with React Router or something similar.

I have a file directory in C:Data\ like

How can I write on an existing JSON file called Offline.json to be like:

I'm having a hard time to make use of the Offline.js in NodeJS. I've used the Offline.js like the following but it always shows check() is undefined or any other methods.

I am following the Vue.js tutorial "The Ultimate Vue JS 2 Developers Course"(Project 2) and I am running into an issue with the browser refresh on file change. I am on Kubuntu 16.04 and my system's standard browser is Chrome, but yet, every time I change a file in my project, webpack tries to open Firefox, which is not installed on my system (and I don't want to use Firefox, but Chrome).

I already went through the webpack.config.js, but I just can't figure out, where I could change settings for the browser.

webpack.config.js

I'm trying to build a web-application shopping list. I want to use the html5 application cache to view the list when offline. The shopping list items are stored in local storage. On my laptop everything works fine but on my iPhone, it seems that all pages are cached while this is not my purpose.

I am using Offline.js to check my Internet connection in a simple web app. The problem is that i receive only the first connection message and then nothing.