Vfrdtyky

I´m trying to use a service worker in an existing asp mvc app. Generally, it´s working fine: I can cache files and so on. Problem is, that there are many files to be cached and I´m trying to return an array of paths to the service worker, so that the files can be added to cache without adding them manually.

Here´s what I have so far:

Controller:

    public ActionResult GetFilesToCache()

    {

        string filePaths = Directory.GetFiles(Server.MapPath(@"~Content"), "*", SearchOption.AllDirectories);

        string cuttedFiles = new string[filePaths.Length];

        int i = 0;



        foreach (var path in filePaths)

        {

            cuttedFiles[i] = path.Substring(path.IndexOf("Content"));

            i++;

        }



        return Json(new { filesToCache = cuttedFiles }, JsonRequestBehavior.AllowGet);

    }

This gives me a string array with entries like "Contentimage1.png" etc.

Service worker:

    self.addEventListener('install', function(e) {

  console.log('[ServiceWorker] Install');

    e.waitUntil(

            caches.open(cacheName).then(function (cache) {

            console.log('[ServiceWorker] Caching app shell');



            return fetch('Home/GetFilesToCache').then(function (response) {

                return response;

            }).then(function (files) {

                return cache.addAll(files);

            });      

    })

  );

});

The error I get is:

Uncaught (in promise) TypeError: Failed to execute 'addAll' on 'Cache': Iterator getter is not callable.

Calling the action works just fine, data is received by the service worker, but not added to cache.

In the following code:

return fetch('Home/GetFilesToCache').then(function (response) {

    return response;

}).then(function (files) {

    return cache.addAll(files);

});

the value of the files parameter is going to be a Response object. You want it to be the JSON deserialization of the Response object's body. You can get this by changing return response with return response.json(), leading to:

return fetch('Home/GetFilesToCache').then(function(response) {

    return response.json();

}).then(function(files) {

    return cache.addAll(files);

});

Got it working with this code:

    self.addEventListener('install', function(e) {

  console.log('[ServiceWorker] Install');

    e.waitUntil(

        caches.open(cacheName).then(function (cache) {

            console.log('[ServiceWorker] Caching app shell');



            return fetch('Home/GetFilesToCache').then(function (response) {

                return response.json();

            }).then(function (files) {

                var array = files.filesToCache;

                return cache.addAll(array);

            });      

    })

      );

    });

Notice:
Chrome only lists a part of files stored in cache, so you just have to click that little arrow to show the next page: