使用 Workbox 启动运行时服务工作者缓存
Priming a runtime service worker cache using Workbox
如何在 WorkboxSW 中使用以下代码为所有缓存 URL 注册路由。这个每个缓存的 url 包括 ajax 也将转到服务器!
$.ajax({
url : '/MyAPI/Records',
type : 'GET',
dataType:'json',
success : function(data) {
alert('Records: '+data);
//build urls array to get all records details
var urls = [];
urls.push('/MyAPI/Records')
$(data).each(function (index) {
urls.push('/MyAPI/Records/' + data[index].id + '/data')
});
//add all urls to cache
var requests = urls.map(url => new Request(url));
caches.open('my-cache').then(cache => {
return cache.addAll(requests).then(() => {
// At this point, `cache` will be populated with `Response` objects,
// and `requests` contains the `Request` objects that were used.
}).catch(error => console.error(`Oops! ${error}`));
});
},
error : function(request,error)
{
alert("Request: "+JSON.stringify(request));
}
});
Workbox 的预缓存依赖于在构建时访问代表资源的本地文件。这允许它生成其管理的每个资源的哈希值(基于本地文件的内容),然后在本地文件发生更改时使缓存的资源保持最新。
您的建议听起来更像是 Workbox 支持通过运行时缓存处理某些路由。您可以通过以下方式配置它:
// Replace with your actual API endpoint.
const API_URL = 'https://my-api-server.com/api/restEndpoint';
// Use whichever strategy you'd prefer: networkFirst, staleWhileRevalidate, etc.
const apiCallHandler = workboxSW.strategies.networkFirst({
cacheName: 'my-api'
});
workboxSW.registerRoute(
API_URL,
apiCallHandler
);
这将导致来自 https://my-api-server.com
的响应在您发出第一个请求后在运行时添加到名为 my-api
的缓存中。 (在这种特殊情况下,使用 networkFirst
策略,只有在网络不可用时才会使用那些缓存的响应。)
如果您不同意启动时的运行时缓存 "cold" 并且您觉得它需要准备好,那么您可以通过编写自己的 install
事件处理程序来做到这一点工作箱代码:
// Your existing WorkboxSW code goes here.
self.addEventListener('install', event => {
event.waitUntil(
caches.open('my-api')
.then(cache => cache.add(API_URL))
);
});
如何在 WorkboxSW 中使用以下代码为所有缓存 URL 注册路由。这个每个缓存的 url 包括 ajax 也将转到服务器!
$.ajax({
url : '/MyAPI/Records',
type : 'GET',
dataType:'json',
success : function(data) {
alert('Records: '+data);
//build urls array to get all records details
var urls = [];
urls.push('/MyAPI/Records')
$(data).each(function (index) {
urls.push('/MyAPI/Records/' + data[index].id + '/data')
});
//add all urls to cache
var requests = urls.map(url => new Request(url));
caches.open('my-cache').then(cache => {
return cache.addAll(requests).then(() => {
// At this point, `cache` will be populated with `Response` objects,
// and `requests` contains the `Request` objects that were used.
}).catch(error => console.error(`Oops! ${error}`));
});
},
error : function(request,error)
{
alert("Request: "+JSON.stringify(request));
}
});
Workbox 的预缓存依赖于在构建时访问代表资源的本地文件。这允许它生成其管理的每个资源的哈希值(基于本地文件的内容),然后在本地文件发生更改时使缓存的资源保持最新。
您的建议听起来更像是 Workbox 支持通过运行时缓存处理某些路由。您可以通过以下方式配置它:
// Replace with your actual API endpoint.
const API_URL = 'https://my-api-server.com/api/restEndpoint';
// Use whichever strategy you'd prefer: networkFirst, staleWhileRevalidate, etc.
const apiCallHandler = workboxSW.strategies.networkFirst({
cacheName: 'my-api'
});
workboxSW.registerRoute(
API_URL,
apiCallHandler
);
这将导致来自 https://my-api-server.com
的响应在您发出第一个请求后在运行时添加到名为 my-api
的缓存中。 (在这种特殊情况下,使用 networkFirst
策略,只有在网络不可用时才会使用那些缓存的响应。)
如果您不同意启动时的运行时缓存 "cold" 并且您觉得它需要准备好,那么您可以通过编写自己的 install
事件处理程序来做到这一点工作箱代码:
// Your existing WorkboxSW code goes here.
self.addEventListener('install', event => {
event.waitUntil(
caches.open('my-api')
.then(cache => cache.add(API_URL))
);
});