├── .gitignore
├── nodemon.json
├── static
├── img
│ └── avatar_v1.jpg
└── js
│ └── index_v2.js
├── README.md
├── package.json
├── index.html
├── server.js
└── sw
└── sw.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
--------------------------------------------------------------------------------
/nodemon.json:
--------------------------------------------------------------------------------
1 | {
2 | "verbose": true,
3 | "ignore": ["node_modules/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/static/img/avatar_v1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/youngwind/service-worker-demo/HEAD/static/img/avatar_v1.jpg
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ```
2 | npm install
3 | npm run dev
4 | ```
5 | 第一次在线访问：localhost:8088
6 |
7 | 断开网络之后，仍然可以访问。
8 |
9 | 对应的文章说明：https://github.com/youngwind/blog/issues/113
--------------------------------------------------------------------------------
/static/js/index_v2.js:
--------------------------------------------------------------------------------
1 | $.ajax('/getList').done(function (res) {
2 | res.data.forEach(item => {
3 | $('#list').append(`${item}`)
4 | })
5 | });
6 | console.log('>>>>>>>', 2);
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "service-worker-demo",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "server.js",
6 | "scripts": {
7 | "dev": "nodemon server.js",
8 | "start": "node server.js"
9 | },
10 | "author": "",
11 | "license": "ISC",
12 | "dependencies": {
13 | "koa": "^2.4.1",
14 | "koa-logger": "^3.1.0",
15 | "koa-router": "^7.4.0",
16 | "koa-static": "^4.0.2"
17 | },
18 | "devDependencies": {
19 | "nodemon": "^1.14.11"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Service Worker Demo
6 | 图片头像
7 | 
8 |
9 | Ajax Get 数据
10 |
11 |
12 |
13 |
14 |
15 |
26 |
27 |
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | const Koa = require('koa');
2 | const fs = require('fs');
3 | const path = require('path');
4 | const serve = require('koa-static');
5 | const logger = require('koa-logger');
6 | const Router = require('koa-router');
7 |
8 | const app = new Koa();
9 | const router = new Router();
10 | app.use(logger());
11 | app.use(serve('sw'));
12 | app.use(serve('static', {
13 | maxage: 365 * 24 * 60 * 60 * 1000
14 | }));
15 |
16 | router.get('/', ctx => {
17 | let html = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf-8');
18 | ctx.body = html;
19 | });
20 |
21 | router.get('/getList', ctx => {
22 | ctx.body = {
23 | code: 0,
24 | data: [
25 | "aaa", "bbb", "ccc"
26 | ]
27 | }
28 | });
29 |
30 | app.use(router.routes())
31 | .use(router.allowedMethods());
32 |
33 | app.listen(8088, () => {
34 | console.log('服务启动，端口号为：8088');
35 | });
--------------------------------------------------------------------------------
/sw/sw.js:
--------------------------------------------------------------------------------
1 | const VERSION = 'v7';
2 | const CACHE_NAME = 'service-worker-demo' + VERSION;
3 |
4 | console.log('begin');
5 |
6 | this.addEventListener('install', function (event) {
7 | console.log('安装 sw.js');
8 | event.waitUntil(
9 | caches.open(CACHE_NAME).then(function (cache) {
10 | return cache.addAll([
11 | './',
12 | 'getList',
13 | 'img/avatar_v1.jpg',
14 | 'js/index_v2.js',
15 | 'js/jquery_v1.js'
16 | ]);
17 | })
18 | )
19 | });
20 |
21 | this.addEventListener('activate', function (event) {
22 | console.log('激活 sw.js，可以开始处理 fetch 请求。');
23 | event.waitUntil(
24 | caches.keys().then(function (keyList) {
25 | return Promise.all(keyList.map(function (key) {
26 | if (CACHE_NAME.indexOf(key) === -1) {
27 | return caches.delete(key);
28 | }
29 | }))
30 | })
31 | )
32 | });
33 |
34 | this.addEventListener('fetch', function (event) {
35 | event.respondWith(
36 | caches.match(event.request)
37 | .then(function (resp) {
38 | if (resp) {
39 | console.log(new Date(), 'fetch ', event.request.url, '有缓存，从缓存中取');
40 | return resp;
41 | } else {
42 | console.log(new Date(), 'fetch ', event.request.url, '没有缓存，网络获取');
43 | return fetch(event.request)
44 | .then(function (response) {
45 | return caches.open(CACHE_NAME).then(function (cache) {
46 | cache.put(event.request, response.clone());
47 | return response;
48 | })
49 | })
50 | }
51 | })
52 | )
53 | });
54 | console.log('end');
--------------------------------------------------------------------------------