此项目配合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/