我们正在为这些Web表单添加一个新功能,即用户可以将文件(图像、文档)附加到表单中,并且可能需要在表单的几个点上进行此操作。
我的问题是:服务工作者是否有一种方法来处理文件上传?当离线时,是否有一种方式——也许是存储要上传的文件路径——并在连接恢复后将该文件上传?这是否适用于移动设备,因为我们是否可以在这些设备上访问该“路径”?如有任何帮助、建议或参考资料,将不胜感激。
处理文件上传/删除以及几乎所有其他问题的一种方法是通过跟踪离线请求期间所做的所有更改。我们可以创建一个名为sync
的对象,其中包含两个数组,一个用于需要上传的待处理文件,另一个用于在联机时需要删除的文件。
通过跟踪离线请求期间所做的所有更改来处理文件上传/删除以及几乎所有其他问题。
处理服务工作者的fetch
事件,如果获取失败,则需要处理请求文件列表、上传文件到服务器的请求以及从服务器删除文件的请求。如果没有这些请求,则从默认缓存中返回匹配项。
GET
/uploads
)和sync
对象的缓存对象。我们使用concat
将默认的列表文件与pending
文件合并,并删除deleted
文件,然后返回一个新的响应对象,其中包含JSON格式的结果,就像服务器返回的那样。PUT
sync
pending
文件。如果文件不存在,则为该文件创建一个新的缓存条目,并使用请求中的mime类型和blob
创建一个新的Response
对象,该对象将保存到默认缓存中。DELETE
pending
数组中删除该条目;否则,如果它尚未在deleted
数组中,则添加它。最后更新列表、文件和同步对象缓存。(Please read the inline comments)
const cacheName = 'pwasndbx';
const syncCacheName = 'pwasndbx-sync';
const pendingName = '__pending';
const syncName = '__sync';
const filesToCache = [
'/',
'/uploads',
'/styles.css',
'/main.js',
'/utils.js',
'/favicon.ico',
'/manifest.json',
];
/* Start the service worker and cache all of the app's content */
self.addEventListener('install', function(e) {
console.log('SW:install');
e.waitUntil(Promise.all([
caches.open(cacheName).then(async function(cache) {
let cacheAdds = [];
try {
// Get all the files from the uploads listing
const res = await fetch('/uploads');
const { data = [] } = await res.json();
const files = data.map(f => `/uploads/${f}`);
// Cache all uploads files urls
cacheAdds.push(cache.addAll(files));
} catch(err) {
console.warn('PWA:install:fetch(uploads):err', err);
}
// Also add our static files to the cache
cacheAdds.push(cache.addAll(filesToCache));
return Promise.all(cacheAdds);
}),
// Create the sync cache object
caches.open(syncCacheName).then(cache => cache.put(syncName, jsonResponse({
pending: [], // For storing the penging files that later will be synced
deleted: [] // For storing the files that later will be deleted on sync
}))),
])
);
});
self.addEventListener('fetch', function(event) {
// Clone request so we can consume data later
const request = event.request.clone();
const { method, url, headers } = event.request;
event.respondWith(
fetch(event.request).catch(async function(err) {
const { headers, method, url } = event.request;
// A custom header that we set to indicate the requests come from our syncing method
// so we won't try to fetch anything from cache, we need syncing to be done on the server
const xSyncing = headers.get('X-Syncing');
if(xSyncing && xSyncing.length) {
return caches.match(event.request);
}
switch(method) {
case 'GET':
// Handle listing data for /uploads and return JSON response
break;
case 'PUT':
// Handle upload to cache and return success response
break;
case 'DELETE':
// Handle delete from cache and return success response
break;
}
// If we meet no specific criteria, then lookup to the cache
return caches.match(event.request);
})
);
});
function jsonResponse(data, status = 200) {
return new Response(data && JSON.stringify(data), {
status,
headers: {'Content-Type': 'application/json'}
});
}
GET
if(url.match(/\/uploads\/?$/)) { // Failed to get the uploads listing
// Get the uploads data from cache
const uploadsRes = await caches.match(event.request);
let { data: files = [] } = await uploadsRes.json();
// Get the sync data from cache
const syncRes = await caches.match(new Request(syncName), { cacheName: syncCacheName });
const sync = await syncRes.json();
// Return the files from uploads + pending files from sync - deleted files from sync
const data = files.concat(sync.pending).filter(f => sync.deleted.indexOf(f) < 0);
// Return a JSON response with the updated data
return jsonResponse({
success: true,
data
});
}
PUT
// Get our custom headers
const filename = headers.get('X-Filename');
const mimetype = headers.get('X-Mimetype');
if(filename && mimetype) {
// Get the uploads data from cache
const uploadsRes = await caches.match('/uploads', { cacheName });
let { data: files = [] } = await uploadsRes.json();
// Get the sync data from cache
const syncRes = await caches.match(new Request(syncName), { cacheName: syncCacheName });
const sync = await syncRes.json();
// If the file exists in the uploads or in the pendings, then return a 409 Conflict response
if(files.indexOf(filename) >= 0 || sync.pending.indexOf(filename) >= 0) {
return jsonResponse({ success: false }, 409);
}
caches.open(cacheName).then(async (cache) => {
// Write the file to the cache using the response we cloned at the beggining
const data = await request.blob();
cache.put(`/uploads/${filename}`, new Response(data, {
headers: { 'Content-Type': mimetype }
}));
// Write the updated files data to the uploads cache
cache.put('/uploads', jsonResponse({ success: true, data: files }));
});
// Add the file to the sync pending data and update the sync cache object
sync.pending.push(filename);
caches.open(syncCacheName).then(cache => cache.put(new Request(syncName), jsonResponse(sync)));
// Return a success response with fromSw set to tru so we know this response came from service worker
return jsonResponse({ success: true, fromSw: true });
}
DELETE
// Get our custom headers
const filename = headers.get('X-Filename');
if(filename) {
// Get the uploads data from cache
const uploadsRes = await caches.match('/uploads', { cacheName });
let { data: files = [] } = await uploadsRes.json();
// Get the sync data from cache
const syncRes = await caches.match(new Request(syncName), { cacheName: syncCacheName });
const sync = await syncRes.json();
// Check if the file is already pending or deleted
const pendingIndex = sync.pending.indexOf(filename);
const uploadsIndex = files.indexOf(filename);
if(pendingIndex >= 0) {
// If it's pending, then remove it from pending sync data
sync.pending.splice(pendingIndex, 1);
} else if(sync.deleted.indexOf(filename) < 0) {
// If it's not in pending and not already in sync for deleting,
// then add it for delete when we'll sync with the server
sync.deleted.push(filename);
}
// Update the sync cache
caches.open(syncCacheName).then(cache => cache.put(new Request(syncName), jsonResponse(sync)));
// If the file is in the uplods data
if(uploadsIndex >= 0) {
// Updates the uploads data
files.splice(uploadsIndex, 1);
caches.open(cacheName).then(async (cache) => {
// Remove the file from the cache
cache.delete(`/uploads/${filename}`);
// Update the uploads data cache
cache.put('/uploads', jsonResponse({ success: true, data: files }));
});
}
// Return a JSON success response
return jsonResponse({ success: true });
}
// Get the sync data from cache
const syncRes = await caches.match(new Request(syncName), { cacheName: syncCacheName });
const sync = await syncRes.json();
// If the are pending files send them to the server
if(sync.pending && sync.pending.length) {
sync.pending.forEach(async (file) => {
const url = `/uploads/${file}`;
const fileRes = await caches.match(url);
const data = await fileRes.blob();
fetch(url, {
method: 'PUT',
headers: {
'X-Filename': file,
'X-Syncing': 'syncing' // Tell SW fetch that we are synching so to ignore this fetch
},
body: data
}).catch(err => console.log('sync:pending:PUT:err', file, err));
});
}
// If the are deleted files send delete request to the server
if(sync.deleted && sync.deleted.length) {
sync.deleted.forEach(async (file) => {
const url = `/uploads/${file}`;
fetch(url, {
method: 'DELETE',
headers: {
'X-Filename': file,
'X-Syncing': 'syncing' // Tell SW fetch that we are synching so to ignore this fetch
}
}).catch(err => console.log('sync:deleted:DELETE:err', file, err));
});
}
// Update and reset the sync cache object
caches.open(syncCacheName).then(cache => cache.put(syncName, jsonResponse({
pending: [],
deleted: []
})));
I have created a PWA example that implements all these, which you can find and test here. I have tested it using Chrome and Firefox and using Firefox Android on a mobile device.
You can find the full source code of the application (including an express
server) in this Github repository: https://github.com/clytras/pwa-sandbox.
sync
API,它没有任何支持通过同步注册传递自定义数据的功能。有 fetch-sync
可以使用,你也可以查看这个 Q/A Pass custom data to service worker sync?。相同的逻辑可以使用不同的方法,也许直接将文件放入缓存,然后为每个请求注册一个同步事件。 - Christos LytrasdoSync
的逻辑中可能需要进行更改,只有在fetch
promise解析时才从pending
数组中删除文件,而不是在其被拒绝时删除;deleted
数组同理。当然,必须在某个初始点调用doSync
以检查是否存在来自某些失败的同步请求的待处理文件,即使在开始时进行了sync
注册也可以完成这一操作。 - Christos Lytras<input type="file">
元素选择文件时,我们可以通过fileInput.files
获取所选文件。 这给我们一个FileList
对象,其中每个条目都是代表所选文件的File
对象。 FileList
和File
是HTML5的结构化克隆算法支持的对象类型之一。FileList
和File
对象受到结构化克隆算法的支持,这意味着我们可以直接将这些对象存储在IndexedDB中。FormData
。FormData
允许将File
对象添加到将发送到后端的请求中,并且可以在服务工作者上下文中使用。Cache API旨在以请求为键和响应为值的形式存储内容,以便为网页缓存来自服务器的内容。在这里,我们谈论的是缓存用户输入以便将来发送到服务器。换句话说,我们不是在尝试实现缓存,而是在实现消息代理,而这目前不是Service Worker规范所处理的内容(来源)。
您可以通过尝试以下代码来了解它:
HTML:
<button id="get">GET</button>
<button id="post">POST</button>
<button id="put">PUT</button>
<button id="patch">PATCH</button>
JavaScript:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js', { scope: '/' }).then(function (reg) {
console.log('Registration succeeded. Scope is ' + reg.scope);
}).catch(function (error) {
console.log('Registration failed with ' + error);
});
};
document.getElementById('get').addEventListener('click', async function () {
console.log('Response: ', await fetch('50x.html'));
});
document.getElementById('post').addEventListener('click', async function () {
console.log('Response: ', await fetch('50x.html', { method: 'POST' }));
});
document.getElementById('put').addEventListener('click', async function () {
console.log('Response: ', await fetch('50x.html', { method: 'PUT' }));
});
document.getElementById('patch').addEventListener('click', async function () {
console.log('Response: ', await fetch('50x.html', { method: 'PATCH' }));
});
服务工作者:
self.addEventListener('fetch', function (event) {
var response;
event.respondWith(fetch(event.request).then(function (r) {
response = r;
caches.open('v1').then(function (cache) {
cache.put(event.request, response);
}).catch(e => console.error(e));
return response.clone();
}));
});
抛出以下错误:
类型错误:不支持请求方法“POST”
类型错误:不支持请求方法“PUT”
类型错误:不支持请求方法“PATCH”
由于无法使用缓存API,根据Google指南,IndexedDB是作为正在进行的请求数据存储的最佳解决方案。 然后,消息代理的实现是开发人员的责任,没有一个通用的实现可以涵盖所有用例。有许多参数将决定解决方案:
window.navigator.onLine
?一定的超时?其他?self.addEventListener('online', ...)
? navigator.connection
?这对于单个StackOverflow答案来说确实非常广泛。
话虽如此,这里有一个最小工作解决方案:
HTML:
<input id="file" type="file">
<button id="sync">SYNC</button>
<button id="get">GET</button>
JavaScript:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js', { scope: '/' }).then(function (reg) {
console.log('Registration succeeded. Scope is ' + reg.scope);
}).catch(function (error) {
console.log('Registration failed with ' + error);
});
};
document.getElementById('get').addEventListener('click', function () {
fetch('api');
});
document.getElementById('file').addEventListener('change', function () {
fetch('api', { method: 'PUT', body: document.getElementById('file').files[0] });
});
document.getElementById('sync').addEventListener('click', function () {
navigator.serviceWorker.controller.postMessage('sync');
});
服务工作者:
self.importScripts('https://unpkg.com/idb@5.0.1/build/iife/index-min.js');
const { openDB, deleteDB, wrap, unwrap } = idb;
const dbPromise = openDB('put-store', 1, {
upgrade(db) {
db.createObjectStore('put');
},
});
const idbKeyval = {
async get(key) {
return (await dbPromise).get('put', key);
},
async set(key, val) {
return (await dbPromise).put('put', val, key);
},
async delete(key) {
return (await dbPromise).delete('put', key);
},
async clear() {
return (await dbPromise).clear('put');
},
async keys() {
return (await dbPromise).getAllKeys('put');
},
};
self.addEventListener('fetch', function (event) {
if (event.request.method === 'PUT') {
let body;
event.respondWith(event.request.blob().then(file => {
// Retrieve the body then clone the request, to avoid "body already used" errors
body = file;
return fetch(new Request(event.request.url, { method: event.request.method, body }));
}).then(response => handleResult(response, event, body)).catch(() => handleResult(null, event, body)));
} else if (event.request.method === 'GET') {
event.respondWith(fetch(event.request).then(response => {
return response.ok ? response : caches.match(event.request);
}).catch(() => caches.match(event.request)));
}
});
async function handleResult(response, event, body) {
const getRequest = new Request(event.request.url, { method: 'GET' });
const cache = await caches.open('v1');
await idbKeyval.set(event.request.method + '.' + event.request.url, { url: event.request.url, method: event.request.method, body });
const returnResponse = response && response.ok ? response : new Response(body);
cache.put(getRequest, returnResponse.clone());
return returnResponse;
}
// Function to call when the network is supposed to be available
async function sync() {
const keys = await idbKeyval.keys();
for (const key of keys) {
try {
const { url, method, body } = await idbKeyval.get(key);
const response = await fetch(url, { method, body });
if (response && response.ok)
await idbKeyval.delete(key);
}
catch (e) {
console.warn(`An error occurred while trying to sync the request: ${key}`, e);
}
}
}
self.addEventListener('message', sync);
<verb>.<url>
作为键。这意味着一个请求将覆盖具有相同动词和URL的另一个请求。204无内容
,而是返回带有实体主体的200
响应。cache.put(event.request.url, new Response(event.request.body))
?换句话说,将请求体(文件)缓存起来,以便通过创建一个新的响应来为未来的GET请求提供服务。至于您提到的其他问题,您是正确的,但我认为它们不必在回答这个问题的目的上进行讨论。示例代码可以尽可能简单地工作。 - Bradfetch
API 支持所有方法这一事实不是我的观点,而是 fetch
的工作方式。我的观点是,你根本不需要使用 IDBDatabase
来处理 GET
、DELETE
和 PATCH
,只需使用 Cache
API 即可完成。 - Christos Lytrascache.put
的第一个参数传递时,它们被设置为 GET
请求,因为目的是在此之后使用 caches.match
并提供相应的响应。所以,是的,您的代码可以工作,因为您为每种 HTTP 方法创建一个缓存,并使用自己的代码解释缓存中的内容,但这是以一种并非意图使用缓存 API 的方式进行的。 - Guerric P最近我也遇到了这个问题。以下是我正在做的存储在索引数据库中并在离线时返回响应的方法。
const storeFileAndReturnResponse = async function (request, urlSearchParams) {
let requestClone = request.clone();
let formData = await requestClone.formData();
let tableStore = "fileUploads";
let fileList = [];
let formDataToStore = [];
//Use formData.entries to iterate collection - this assumes you used input type= file
for (const pair of formData.entries()) {
let fileObjectUploaded = pair[1];
//content holds the arrayBuffer (blob) of the uploaded file
formDataToStore.push({
key: pair[0],
value: fileObjectUploaded,
content: await fileObjectUploaded.arrayBuffer(),
});
let fileName = fileObjectUploaded.name;
fileList.push({
fileName: fileName,
});
}
let payloadToStore = {
parentId: parentId,
fileList: fileList,
formDataKeyValue: formDataToStore,
};
(await idbContext).put(tableStore, payloadToStore);
return {
UploadedFileList: fileList,
};
};