所以我为我的网络应用程序创建了离线功能。有一个函数可以获取 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”,所以我希望即使用户当前处于离线状态,它也会显示,因为我正在使用服务工作人员缓存视频。
您找到从 vimeo 下载私人视频的方法了吗?我想买这个 https://vimeo.com/280791199
我也已在 ma android vimoe 应用程序中将此视频下载到离线状态,但很难退出:((