此项目配合MyMockData一起使用。
我们做了什么：
- 把GitHub项目作为我们的mock server的数据源，例如MyMockData
- 在项目中，通过service-worker.js，把数据源中的json数据，转化为json数据所描述的http响应，达到mock server的效果
- 可以通过json数据更改响应码、响应时间、响应头、校验post数据等功能
json举例：
{
"RequestMethod":["GET"],
"ResponseHeaders":{},
"StatusCode": "200",
"Response": {
"success": true,
"message": "",
"data": "This is a get mock data"
},
"ResponseTime": 1000
}│ .gitignore
│ README.md
│ service-worker.js
│
└─demo
│ app.js
│ package.json
│
├─certificate
│ ca.cer
│ csr.pem
│ private.pem
│
└─public
index.html
index.js
service-worker.js
styles.css
整个目录结构分为2部分，
我们用于解析mock data的文件，mock data的组成参考MyMockData项目。
在你的项目根文件(假设为index.html)中加入如下代码：
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js').then(function(reg) {
if(reg.installing) {
console.log('Service worker installing');
} else if(reg.waiting) {
console.log('Service worker installed');
} else if(reg.active) {
console.log('Service worker active');
}
}).catch(function(error) {
console.log('Registration failed with ' + error);
});
}
</script>更精简的版本：
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js');
}
</script>把service-worker.js 拷贝到项目根目录下即可。
demo文件夹下是一个可以运行的，基于node，使用https的web站点。此示例中可以看到mock server的完整用法。
本地运行的https是不安全的，所以要想service-worker能够成功运行，需要配置下浏览器的启动参数。
windows下启动参数配置如下:
C：\ Program Files（x86）\ Google \ Chrome \ Application \ chrome.exe --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure= https://localhost:8001
MacOS：
/ Applications / Google \ Chrome.app/Contents/MacOS/Google \ Chrome --user-data-dir = / tmp / foo --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure = https://localhost:8001
关于此配置的更多内容请参考：https://deanhume.com/testing-service-workers-locally-with-self-signed-certificates/
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent