Caching vimeo private videos on cache using service worker

129 views Asked by At

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.

0

There are 0 answers