[PWA] 7. First Cache when installed
If you want your application works offline or lie-wifi. You need to use cache.
API:
Create Caches:
caches.open('cache_name').then( (cache) => { // create name if not exists yet, return cache if there is a one })
Create single cache:
cache.put(request, response); cache.addAll([ '/foo', '/bar' ])
Get the cache:
cache.match(request)
caches.match(request)
When to start cache:
We can do cache in 'installing' service worker, what it will do is fetch everything we need from network and create cache for each of them.
self.addEventListener('install', function(event) { var urlsToCache = [ '/', 'js/main.js', 'css/main.css', 'imgs/icon.png', 'https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff', 'https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff' ]; event.waitUntil( // TODO: open a cache named 'wittr-static-v1' // Add cache the urls from urlsToCache caches.open('wittr-static-v1') .then( (cache) => { cache.addAll(urlsToCache) }) .catch( () => { console.error("Cannot cache anything"); }) ); });
Now we have create the cache, but it is not useful until we use the cache.
To use cache, we can do:
self.addEventListener('install', function(event) { var urlsToCache = [ '/', 'js/main.js', 'css/main.css', 'imgs/icon.png', 'https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff', 'https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff' ]; event.waitUntil( // TODO: open a cache named 'wittr-static-v1' // Add cache the urls from urlsToCache caches.open('wittr-static-v4') .then( (cache) => { cache.addAll(urlsToCache) }) .catch( () => { console.error("Cannot cache anything"); }) ); }); self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).then((response)=>{ if(response){ return response; }else{ return fetch(event.request); } }) ) });
So we use 'caches.match' to get all the caches for request.
In the then block, cache is successfully fetched, we check whether there is cache data, if it is, then return the response;
If there is no cache data, then we fetch the data from real-server.
But this approach has some problem:
After we go offline mode, the pictures are not showing, this is because we only cache when the servcie worker is installed.
So here is some problem we need to solve:
相关文章
- arm-cache coherency
- JBoss Cache
- 【转载】latch: cache buffers chains
- [Javascript] Broadcaster + Operator + Listener pattern -- 25. Save Network Requests by Using a Cache
- Centos 7 解决free -m 下buff/cache缓存很高
- 将SALT_STACK的JOB-CACHE放到数据库中,而建库用DJANGO的ORM完成
- Oracle latch: cache buffers chains
- Service Worker Cache 和 HTTP Cache 的区别
- chromium 缓存 electron缓存的读取 Disk Cache chrome 多线程的很好使用示例
- 闪存系统性能优化方向集锦?AC timing? Cache? 多路并发?
- Linux 内存机制以及手动释放 swap 和 buffer 和 cache
- 闪存系统性能优化方向?NAND Cache Program(闪存缓冲编程) 原理与实战?