使用 Service Worker 在缓存上缓存 vimeo 私人视频

Question

所以我为我的网络应用程序创建了离线功能。有一个函数可以获取 url 列表并将其保存在缓存存储中，以便以后可以离线使用。

这是我使用 postmessage 事件将 URL 传递给工作的服务的地方

zigFilesToCache = filteredArray
zigVideoToCache = videoToSave

if ('serviceWorker' in navigator && navigator.serviceWorker.controller) {          
          navigator.serviceWorker.controller.postMessage({ videoUrls: zigVideoToCache, token:token });
        }

这是我在 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);
        })
    );
  }
});

这是获取网址的函数

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

问题是如果我没有声明我想要获取的 api，它将返回 CORS POLICy ERROR。起初我认为这与令牌授权有关，我创建了一个 api 来从 vimeo 获取令牌。虽然对于这个，我能够缓存响应，但无法在 UI 上显示它。

这是来自提取的响应，我现在可以将其保存在缓存存储中

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

视频网址是这样的“https://vimeo.com/videos/431313879”，所以我希望即使用户当前处于离线状态，它也会显示，因为我正在使用服务工作人员缓存视频。

Answer 1

您找到从 vimeo 下载私人视频的方法了吗？我想买这个 https://vimeo.com/280791199

我也已在 ma android vimoe 应用程序中将此视频下载到离线状态，但很难退出:((