├── .gitignore ├── README.md ├── build ├── webpack.common.js └── webpack.dev.js ├── index.js ├── package-lock.json ├── package.json ├── src ├── html │ └── index.html └── img │ └── yy.png ├── sw.js └── test.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # service Worker 实践 2 | 3 | > `serviceworker` 方案已集成到 `webpack-plugins`,源码请参考: [serviceworker-webpack-plugins](https://github.com/yang657850144/serviceworker-webpack-plugins) 4 | 5 | 6 | ## 启动项目 7 | 8 | 1. 下载到本地 9 | 10 | ```bash 11 | $ git clone git@github.com:yang657850144/serviceworker.git 12 | ``` 13 | 14 | 2. `npm install` 15 | 16 | 3. 执行 `npm run server` 17 | 18 | 19 | ## 生命周期 20 | 21 | > 通过了解生命周期，进行创建 `service worker`，。 22 | 23 | - **注册** (`register`) 24 | - **安装** (`install`) 25 | - **激活** (`activate`) 26 | 27 | 28 | ## 如何工作 29 | 30 | > 通常使用 `service worker` 只需要以下几个步骤: 31 | 32 | - **检测是否支持`serivceworker`** 33 | 34 | > 首先，检测当前环境是否支持 `service worker`,可以使用 `'serviceWorker' in navigator` 进行检测。 35 | 36 | - **注册** 37 | 38 | >如果支持，可以使用 `navigator.serviceWorker.register('./sw.js')`,在当前主线程中注册 `service worker`。如果注册成功，`service worker` 则在 `ServiceWorkerGlobalScope `环境中运行; 需要注意的是: 当前环境**无法操作`DOM`**，且和主线程之间**相互独立**(即线程之间不会相互阻塞)。 39 | 40 | - **安装** 41 | 42 | >然后，后台开始安装`service worker`，一般在此过程中，开始缓存一些静态资源文件。 43 | 44 | - **激活** 45 | 46 | > 安装成功之后，准备进行激活 `service worker`,通常在激活状态下，主要进行缓存清理，更新`service worker`等操作。 47 | 48 | - **使用** 49 | 50 | > 激活成功后，,`service worker` 就可以控制当前页面了。需要注意的是，只有在`service worker`成功激活后，才具有控制页面的能力，一般在第一次访问页面时，`service worker`第一次创建成功，并没有激活，只有当**刷新页面**，再次访问之后，才具有控制页面的能力。 51 | 52 | 53 | ## serviceworker相关文档 54 | 55 | ## 基础知识 56 | 57 | 1. [概述](https://developers.google.com/web/fundamentals/primers/service-workers/) 58 | 2. [什么是serviceworker](https://lavas.baidu.com/pwa/offline-and-cache-loading/service-worker/service-worker-introduction) 59 | 3. [如何使用](https://lavas.baidu.com/pwa/offline-and-cache-loading/service-worker/how-to-use-service-worker) 60 | 4. [生命周期](https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle) 61 | 5. [Service_Worker_API](https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API) 62 | 63 | ## 离线化开发 64 | 65 | 1. [借助serviceworker和cacheStorage离线开发](https://www.zhangxinxu.com/wordpress/2017/07/service-worker-cachestorage-offline-develop/) 66 | 2. [cacheStorage接口文档](https://developer.mozilla.org/zh-CN/docs/Web/API/CacheStorage) 67 | 68 | ## 缓存更新 69 | 70 | 1. [缓存更新常用方式](https://zhuanlan.zhihu.com/p/51118741) 71 | 2. [缓存更新改进建议](https://github.com/lavas-project/lavas/issues/212) 72 | 3. [Service Worker 更新机制](https://harttle.land/2017/04/10/service-worker-update.html) 73 | 74 | ## 最佳实践 75 | 76 | 1. [Service Worker最佳实践](https://x5.tencent.com/tbs/guide/serviceworker.html) 77 | 2. [Service Worker 全面进阶](https://www.villainhr.com/page/2017/01/08/Service%20Worker%20%E5%85%A8%E9%9D%A2%E8%BF%9B%E9%98%B6) 78 | 79 | ## 前端缓存相关文档 80 | 81 | 1. [一文读懂前端缓存](https://zhuanlan.zhihu.com/p/44789005) 82 | -------------------------------------------------------------------------------- /build/webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | module.exports = { 3 | mode: 'development', 4 | entry: path.resolve(__dirname, 'index.js') 5 | } 6 | -------------------------------------------------------------------------------- /build/webpack.dev.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const HtmlWebpackPlugin = require('html-webpack-plugin') 3 | 4 | module.exports = { 5 | mode: 'development', 6 | entry: { 7 | app: path.resolve(__dirname, '../index.js') 8 | }, 9 | devtool: 'cheap-module-eval-source-map', 10 | devServer: { 11 | hot: true, 12 | open: true, 13 | port: 8080, 14 | quiet: true // necessary for FriendlyErrorsPlugin 15 | // 随机搞一个端口吧 16 | }, 17 | plugins: [ 18 | new HtmlWebpackPlugin({ 19 | filename: 'index.html', 20 | template: path.resolve(__dirname, '../src/html/index.html') 21 | }) 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 2 | if (navigator.serviceWorker) { 3 | let image = document.createElement('img') 4 | image.src = './src/img/yy.png' 5 | document.body.appendChild(image) 6 | console.log('image') 7 | console.log('worker') 8 | navigator.serviceWorker.register('./sw.js').then(registration => { 9 | console.log('注册成功') 10 | let serviceWorker 11 | if (registration.installing) { 12 | serviceWorker = registration.installing 13 | console.log('当前状态为: installing', serviceWorker) 14 | } else if (registration.waiting) { 15 | serviceWorker = registration.waiting 16 | console.log('当前状态为: waiting', serviceWorker) 17 | } else if (registration.activating) { 18 | serviceWorker = registration.activating 19 | console.log('当前状态为: activating', serviceWorker) 20 | } 21 | if (serviceWorker) { 22 | serviceWorker.addEventListener('statechange', e => { 23 | console.log('当前状态变化为: ', e.target.state) 24 | }) 25 | } 26 | }).catch(err => { 27 | console.log('注册失败', err) 28 | }) 29 | } 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "serviceworker", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "dependencies": {}, 7 | "devDependencies": { 8 | "html-webpack-plugin": "^3.2.0", 9 | "webpack": "^4.29.5", 10 | "webpack-cli": "^3.2.3", 11 | "webpack-dev-server": "^3.2.0", 12 | "webpack-merge": "^4.2.1" 13 | }, 14 | "scripts": { 15 | "server": "webpack-dev-server --config ./build/webpack.dev.js", 16 | "test": "echo \"Error: no test specified\" && exit 1" 17 | }, 18 | "repository": { 19 | "type": "git", 20 | "url": "git+https://github.com/yang657850144/serviceworker.git" 21 | }, 22 | "author": "", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/yang657850144/serviceworker/issues" 26 | }, 27 | "homepage": "https://github.com/yang657850144/serviceworker#readme" 28 | } 29 | -------------------------------------------------------------------------------- /src/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Title 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/img/yy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robbiemie/serviceworker/1635ea9f92eb3840edf89a0f89affb34c8f109e9/src/img/yy.png -------------------------------------------------------------------------------- /sw.js: -------------------------------------------------------------------------------- 1 | let cacheFiles = [ 2 | './test.js', 3 | './index.html', 4 | './src/img/yy.png' 5 | ] 6 | let __version__ = 'cache-v2' 7 | // 文件缓存 8 | self.addEventListener('install', e => { 9 | // 强制更新sw 10 | self.skipWaiting() 11 | e.waitUntil( 12 | caches.open(__version__).then(cache => { 13 | return cache.addAll(cacheFiles) 14 | }) 15 | ) 16 | }) 17 | // 缓存更新 18 | self.addEventListener('activate', e => { 19 | e.waitUntil( 20 | caches.keys().then(cacheNames => { 21 | return Promise.all( 22 | cacheNames.map(cacheName => { 23 | if (cacheName !== __version__) { 24 | return caches.delete(cacheName) 25 | } 26 | }) 27 | ) 28 | }) 29 | ) 30 | }) 31 | // 请求代理 32 | self.addEventListener('fetch', function (event) { 33 | console.log('Handling fetch event for', event.request.url) 34 | if (event.request.url.match('sockjs')) return 35 | event.respondWith( 36 | caches.match(event.request).then(function (response) { 37 | if (response) { 38 | console.log('Found response in cache:', response) 39 | 40 | return response 41 | } 42 | console.log('No response found in cache. About to fetch from network...', caches) 43 | 44 | return fetch(event.request).then(function (response) { 45 | console.log('Response from network is:', response) 46 | caches.open(__version__).then(function (cache) { 47 | cache.put(event.request, response) 48 | return response 49 | }) 50 | }).catch(function (error) { 51 | console.error('Fetching failed:', error) 52 | 53 | throw error 54 | }) 55 | }) 56 | ) 57 | }) 58 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | console.log('test') 2 | --------------------------------------------------------------------------------