前端技術正在像桌面技術靠近,其中一項很重要的就是service workers,它讓HTML App離線工作成為可能。本文會以一個簡單的案例程式碼來說明這項技術。我使用的工具:
1.瀏覽器版本為chrome 55
2.伺服器系統:Node 5.0
我們需要準備3個檔案:
touch index.html b.html sw.js
其中檔案index.html內容為:
<script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js'); } </script>
它註冊一個
其中檔案index.html內容為:const cacheName = 'v1::static'; self.addEventListener('install', e => { e.waitUntil( caches.open(cacheName).then(cache => { return cache.addAll([ '/', ]).then(() => self.skipWaiting()); }) ); }); self.addEventListener('fetch', event => { event.respondWith( caches.open(cacheName).then(cache => { return cache.match(event.request).then(res => { return res || fetch(event.request) }); }) ); });
其中檔案index.html內容為:
<h1>serviceWorker B</h1>
它註冊一個一個
其中檔案index.html內容為:npm i http-server http-server
http://localhost:8080/index.html
http://localhost:8080/b.html
http://localhost:8080/b.html
chrome://inspect/#service-workers
reee
隨後,關閉http server,再次訪問chrome://serviceworker-internals/
http://caniuse.com/#feat=serviceworkers