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.
We will provide these network fetching and caching functions in another SDK package.
Cache Functions
Functions provided via the cache object.
Function | Description | Returns |
---|---|---|
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 |
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 |
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 |
cache.deleteItem(url) | deletes the item from the cache as specified by url | NULL |
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 |
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);
});
};
Updated 5 months ago
What’s Next