Network Cache Functions

Network access from within browser contexts can be tricky. We've provided convenience functions to get network resources and store in the local device cache.

ttv Cache Functions

Functions provided via the ttv.cache object.

Function	Description	Returns
ttv.cache.get(url, cachePeriod, headers)	async function that returns content via the TelemetryTV proxy network by url. cachePeriod is an optional number in seconds (defaults to 3600). headers is an optional array of headers to send. This doesn't require CORS.	a promise that resolves with the content for the url, an error in case of failure
ttv.cache.cacheFirst(url)	async function that returns the content by url. It will check the cache first and return from the cache if it exists, otherwise it will retrieve from the network. The url MUST return a CORS compatible response.	a promise that resolves with the content from the url, an error in case of failure
ttv.cache.networkFirst(url)	async function that returns the content by url. It will check the network first, otherwise if the network is down it will retrieve from the cache. The url MUST return a CORS compatible response.	a promise that resolves with the content from the url, an error in case of failure
ttv.cache.deleteItem(url)	deletes the item from the cache as specified by url	NULL
ttv.sharedLRUCache.set(key, value, ttl)	Sets the value for a supplied key, where value is maximum of 1MB and ttl is optional and the seconds to keep the entry for.	undefined
ttv.sharedLRUCache.get(key, updateAgeOnGet)	Returns the value for the supplied key. Return undefinedif no hit. If the value has a TTL and the current time is past that TTL then return undefined	Value or undefined

Network & Cache First Code Sample

<main>
  <h1>
    SDK Cache Fetch tests
  </h1>
  <img id="cachedImage" src="" />
  <video id="cachedVideo" src="" autoplay loop />
</main>

<style>
main {
  color: #fff;
}
</style>

<script>
window.onloadTelemetryTV = async function (ttv) {
  console.log('SDK Cache test init')

  async function readBlobFromResponse (response) {
    if (!response) {
      return Promise.reject(new Error('response is null'))
    }
    let blobData
    try {
      blobData = await response.blob()
    } catch (err) {
      console.debug(`Error reading bolb - ${err.message || err.toString()}`, err)
      return Promise.reject(err)
    }
    return blobData
  }

  const targetImage = document.getElementById('cachedImage')

  //
  // NOTE: change the $IMAGE_URL to what you need
  //
  const imageRes = await ttv.cache.networkFirst($IMAGE_URL)

  if (imageRes) {
    readBlobFromResponse(imageRes).then(blobData => {
      const bolbUrl = URL.createObjectURL(blobData)
      if (targetImage) {
        targetImage.setAttribute('src', bolbUrl)
      }
    })
  }

  const targetVideo = document.getElementById('cachedVideo')

  //
  // NOTE: change the $VIDEO_URL to what you need
  //
  const videoRes = await ttv.cache.cacheFirst($VIDEO_URL)

  if (videoRes) {
    readBlobFromResponse(videoRes).then(blobData => {
      const bolbUrl = URL.createObjectURL(blobData)
      if (targetVideo) {
        targetVideo.setAttribute('src', bolbUrl)
        targetVideo.play()
      }
    })
  }
}
</script>

<style>
img {
  display: inline-block;
  width: 40vw;
  height: auto;
}

video {
  display: inline-block;
  width: 40vw;
  height: auto;
}
</style>

Cached Get Code Sample

window.onloadTelemetryTV = function (ttv) {
  ttv.get('https://www.example.com/data.json').then(data => {
    console.log('Network Get Result:', data);
  }).catch(err => {
    console.warn('Network Get Errored:', err);
  });
};