So I created an offline functionality for my webapp. There's a function that is fetching a list of url to save it on the cache storage so that it will be available offline for later use.
this is where I pass the urls to the service working using a postmessage event
zigFilesToCache = filteredArray
zigVideoToCache = videoToSave
if ('serviceWorker' in navigator && navigator.serviceWorker.controller) {
navigator.serviceWorker.controller.postMessage({ videoUrls: zigVideoToCache, token:token });
}
And this is the event listener that I have on the service worker
self.addEventListener('message', event => {
const message = event.data;
if (message.videoUrls) {
console.log('uls are fetching')
const urlList = message.videoUrls;
const token = message.token
const promises = urlList.map(url => fetchAndCacheVideo(url, token));
event.waitUntil(
Promise.all(promises)
.then(() => {
console.log('successfully cached')
})
.catch(error => {
console.log('caching error', error.message);
})
);
}
});
And this is the fucntion for fetching the urls
function fetchAndCacheVideo(request, token) {
console.log('caching video', request)
const videoId = request.substring(request.lastIndexOf("/") + 1);
const apiUrl = `https://api.vimeo.com/videos/${videoId}`;
return fetch(apiUrl, {
headers: {
Authorization: `Bearer ${token}`
}
}).then(response => {
if(response.ok) {
const responseClone = response.clone();
caches.open('videos')
.then(cache => cache.put(request, responseClone))
}
return response
})
.catch(error => {
console.error('Error fetching and caching videos:', error)
throw error
})
}
The problem is if I don't declare the api where I want to fetch, it will return a CORS POLICy ERROR. At first I thought it has something todo with the token authorization and I created an api to fetch the token from vimeo. Though And for this one, I was able to cache the response, I can't display it on the UI.
This is the response from the fetch that I can now save within the cache storage
app
:
{name: "Parallel Uploader", uri: "/apps/87099"}
categories
:
[]
content_rating
:
["unrated"]
content_rating_class
:
"unrated"
created_time
:
"2020-06-22T02:36:56+00:00"
description
:
null
duration
:
401
embed
:
{,…}
has_audio
:
true
height
:
720
is_playable
:
true
language
:
null
last_user_action_event_date
:
"2021-10-26T20:04:47+00:00"
license
:
null
link
:
"https://vimeo.com/431322111"
manage_link
:
"/manage/videos/431322111"
metadata
:
{connections: {comments: {uri: "/videos/431322111/comments", options: ["GET", "POST"], total: 0},…},…}
modified_time
:
"2023-06-15T19:16:24+00:00"
name
:
"KevinHaley_5Skills_UnderArmour_641_20131002H"
parent_folder
:
{created_time: "2020-06-22T00:33:56+00:00", modified_time: "2023-06-15T19:54:12+00:00",…}
pictures
:
{uri: "/videos/431322111/pictures/912506569", active: true, type: "custom",…}
play
:
{status: "playable"}
player_embed_url
:
"https://player.vimeo.com/video/431322111?h=900d3a0a49"
privacy
:
{view: "disable", embed: "whitelist", download: false, add: false, comments: "nobody"}
rating_mod_locked
:
false
release_time
:
"2020-06-22T02:36:56+00:00"
resource_key
:
"00390c8816e5ab5231f5706e1cce383fa9de6dfa"
review_page
:
{active: true, link: "https://vimeo.com/user47048081/review/431322111/a5d103432b", is_shareable: true}
stats
:
{plays: 272}
status
:
"available"
tags
:
[]
transcode
:
{status: "complete"}
type
:
"video"
upload
:
{status: "complete", link: null, upload_link: null, complete_uri: null, form: null, approach: null,…}
uploader
:
{,…}
uri
:
"/videos/431322111"
user
:
{uri: "/users/47048081", name: "Innovator's DNA", link: "https://vimeo.com/user47048081",…}
width
:
1280
The video url is like this "https://vimeo.com/videos/431313879", so I was expecting it to be displayed even if the user is currently offline since I was caching the video using the service worker.