ritikrishu

caches.keys()
.then(keysArray => {
  console.log(keysArray)
  /**
  ["category-1-cache", "some-other-cache", "static-assests-cache", "could be anything"]
  */
})

ritikrishu

caches.open('my-cache-category-name')
.then(cache => {
/**
`cache` is the store of my-cache-category-name cache
if it does not exists, it is created and a reference is give here
if it exists already, reference to that cache is provided
*/
})

ritikrishu

/**
purpose:
for all .png image requests,
- look into cache if request-response Pair is already in store
- if found, return the object in cache and refresh cache from network
- if not found, fetch from network, store in cache and return the response
*/
self.addEventListener('fetch', function (event) {
  const requestUrl = new URL(event.request.url);
  if(requestUrl.endsWith('.png'){

ritikrishu

/**
purpose:
example is for a music player app, where we want to store
selective playlists for offline usage

on user click to `Save Offline` button, we want to add all 
songs in playlist to the cache storage
*/
document.getElementBy('saveOfflineBtn').addEventListener('click', function(event) {
  event.preventDefault();

ritikrishu

self.addEventListener('install', function (event) {
  event.waitUntil(
    caches.open('your cache name').then(function (cache) {
      return cache.addAll([
        '/some-route',
        'js/my-app.js',
        'css/my-app.css',
        'imgs/my-app.png',
        'https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff',
        'https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff',

ritikrishu

export default function connectionAwareActivity(WrappedComponent) {
	return class extends PureComponent {
		constructor(props) {
			super(props);
			this.state = { isConnected: false };
			this.switchConnectivity = this.switchConnectivity.bind(this);
		}
		static navigationOptions = WrappedComponent.navigationOptions
		componentDidMount() {
			NetInfo.addEventListener('connectionChange', this.switchConnectivity);