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

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);
  });
};