I am using service worker (via Workbox) to cache the result of an .NET MVC index view which is a simple URL (eg. <https://mysite.local/MyWebsite/Product/Index>). Note that the cache is made up of the page itself as well as the data (in JSON format) presented in a grid that is unknown at design/compile time (i.e. the JSON data is retrieved from the database at run-time via <https://mysite.local/MyWebsite/Product/LoadData>). This all works well - caching when offline. 

The grid contains a button for each row that (when clicked) goes to another MVC view. I want to also cache these pages - say the top 2 that appear in my initial grid. Hence I don't know the URL of these top two pages because they contain parameters retrieved from the database - an example of what they look like:-

<https://mysite.local/MyWebsite/Product/FurtherInformation/33>

...the '33' part is retrieved from the database and hence not known ahead of time

The below (in the Service Worker) iterates through the JSON data that is cached from the initial index page, gets the Id field of each row and suffixes that onto the end of the URL - I am then trying to 'fetch' the page and then cache it.

```
    cache.match('https://mysite.local/MyWebsite/Product/LoadData')
        .then(function(matchedResponse) {
            return matchedResponse.json();
        })
        .then(function (json) {
            for (var i = 0; i < json.data.length; i++) {
                const API_FurtherInformation_URL = 'https://mysite.local/MyWebsite/Product/FurtherInformation/' + json.data[i].Id + '/0';

                const apiLoadDataCallHandler = workbox.strategies.networkFirst({
                    cacheName: 'my-cache'
                });

                workbox.routing.registerRoute(
                    API_FurtherInformation_URL ,
                    apiLoadDataCallHandler 
                );

                self.addEventListener('install', event => {
                    event.waitUntil(
                      caches.open('my-cache')
                        .then(cache => cache.add(API_FurtherInformation_URL))
                    );
                });

                self.addEventListener('fetch', event => {
                    if (event.request.mode === 'navigate') {
                        event.respondWith(
                          fetch(event.request).catch(() => caches.match(API_FurtherInformation_URL))
                        );
                    }
                });
            }
        });
});

```

However the 'install' and 'fetch' event logic in the code both get warning messages:-

"Event handler of 'install' event must be added on the initial evaluation of worker script" 

"Event handler of 'fetch' event must be added on the initial evaluation of worker script" 

...and the page is not cached

Any ideas what I can do - is this scenario accommodated ?