使用Workbox启动运行时服务工作缓存

时间:2017-07-28 17:24:18

标签: javascript google-chrome service-worker progressive-web-apps workbox

如何在WorkboxSW中使用下面的代码来注册所有每个缓存网址的路由。这个每个缓存的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));
}
});

1 个答案:

答案 0 :(得分:3)

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的缓存中。 (在这种特殊情况下,使用install策略,只有在网络不可用时才会使用这些缓存的响应。)

如果您对运行时缓存开始不满意,那么"冷"并且你觉得它需要准备好,那么你可以通过在你的Workbox代码旁边编写自己的// Your existing WorkboxSW code goes here. self.addEventListener('install', event => { event.waitUntil( caches.open('my-api') .then(cache => cache.add(API_URL)) ); }); 事件处理程序来实现这一点:

var postUrlString:String? //<-- make it optional 

override func viewDidLoad() {
   super.viewDidLoad()

   guard let urlString = postUrlString, // forced unwrapped 
         let url = URL(string: urlString)
        else {  return }  // if there is any optional we return 
 // else continue
        let request: URLRequest = URLRequest(url: url)
        mywebView.loadRequest(request)

}