How to get hosted or remote json files cached to enable app work well offline

Question

I am building an app that is suppose to work offline. It's a video web app using angularjs and firebase.

The app receives data from firebase database for instance in the service js file:

.service('firebaseService', function ($http) {
    this.getvideosApi = function() {
      return $http.get( 'https://gxxxxx.firebaseio.com/user-videos.json' );
    };
});

I use the service to get the json data from firebase database. The videos in itself are saved in the firebase storage.

And in the controller I recieve the data and display in my templates.

firebaseService.getvideosApi().then(function(response){
      vm.videos = response.data;
    });
  })

This works just well online but won't work offline even as my app is fully functional offline as am using sw-precache.

So my question is there anyway to catch this externally hosted json file so the json data can be available when app is offline.

Second question is also about catching cdn hosted files using sw precache. So that if app is online, files will be loaded , if not use the cached cdns files available in disk.

When offline, the json file header response is 'failed to load data'.

Answer 1

Yes, you can use the runtimeCaching option in sw-precache to implement different caching strategies for different URL patterns. This includes API results, as well as third-party resources hosted on a CDN, neither of which you could precache with sw-precache.

Under the hood, runtimeCaching will automatically configure and use the sw-toolbox library for you. You can learn more in the documentation.