【Using Service Workers】
1、This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
Safari:Desktop、Mobile均不支持。
IE:Desktop不支持。
Chrome:Desktop、Mobile 40.0版本后均支持。
FireFox:Desktop、Mobile 33.0版本后均支持。
Android WebView:不支持。Android Webview不支持,导致应用前景堪忧。
2、Note: As of Firefox 44, when AppCache is used to provide offline support for a page a warning message is now displayed in the console advising developers to use Service workers instead
Firefox 44版本以后,已不推荐使用AppCache,推荐使用Service workers。
3、You’ll also need to serve your code via HTTPS — Service workers are restricted to running across HTTPS for security reasons.
4、Base Architecture
1)通过 serviceWorkerContainer.register() 注册service worker url.
2)注册成功后,the service worker is executed in a ServiceWorkerGlobalScope, running off the main script execution thread, with no DOM access.
3)The service worker is now ready to process events.
4)Installation of the worker is attempted when service worker-controlled pages are accessed subsequently. An Install event is always the first one sent to a service worker (this can be used to start the process of populating an IndexedDB, and caching site assets).
ServiceWorker控制的页面被访问时,ServiceWorker即会被安装。Install 事件是ServiceWorker收到的第一个事件,通过在此事件中,从indexDB、cache中导出数据 。
5)When the oninstall handler completes, the service worker is considered installed.
6)Next is activation. When the service worker is installed, it then receives an activate event. The primary use ofonactivate is for cleanup of resources used in previous versions of a Service worker script.
7)The Service worker will now control pages, but only those opened after the register() is successful. i.e. a document starts life with or without a Service worker and maintains that for its lifetime. So documents will have to be reloaded to actually be controlled.
5、注册示例:
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw-test/sw.js', {scope: '/sw-test/'}) .then(function(reg) { // registration worked console.log('Registration succeeded. Scope is ' + reg.scope); }).catch(function(error) { // registration failed console.log('Registration failed with ' + error); }); }