使用Workbox 命令行工具生成PWA应用

1.首先安装之前你必须要有nodejs环境。

2.全局安装命令行工具

npm install workbox-cli --global

3.把你的html文件包放在子目录 src/ 里，然后在index.html中加入service-worker 的引用代码。

<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js');
  });
}
</script>

4.执行向导命令为了生成workbox配置文件

workbox wizard

这里生成后可以自行配置文件内容，比如去掉sourcemap文件生成，加大文件大小限制等等。具体可以参考官方文档。

https://developers.google.cn/web/tools/workbox/reference-docs/latest/module-workbox-build#.generateSW

下面是我之前用过的配置文件可以作为参考。

workbox-config.js

module.exports = {
  "globDirectory": "src/",
  "globPatterns": [
    "**/*.{css,js,png,gif,jpg,svg,html,json}",
    "*.{css,html,js}"
  ],
  "runtimeCaching": [{
    // Match any request that ends with .png, .jpg, .jpeg or .svg.
    urlPattern: /\.(?:png|gif|jpg|jpeg|svg)$/,

    // Apply a cache-first strategy.
    handler: 'CacheFirst',

     
  }],
  "swDest": "src/sw.js",
  "maximumFileSizeToCacheInBytes": 10 * 1024 * 1024,
  "sourcemap":false,
  "skipWaiting":true
};

5.现在生成了配置文件后可以开始生成pwa相关文件了，执行下面命令。

workbox generateSW workbox-config.js

执行后输出如下

The service worker files were written to:
  • /Users/**隐藏**/work/www/pwa/src/sw.js
  • /Users/**隐藏**/work/www/pwa/src/workbox-74c77e5a.js

6.本地使用node搭建服务器模拟运行一下。

下面代码保存成 server.js 到根目录后使用node server.js 命令启动运行。

const fs = require('fs');
stat = fs.stat;

const path = require('path');
const url = require('url');

const http = require('http');


let mimetype = {
	'css': 'text/css',
	'gif': 'image/gif',
	'html': 'text/html',
	'ico': 'image/x-icon',
	'jpeg': 'image/jpeg',
	'jpg': 'image/jpeg',
	'webp': 'image/webp',
	'js': 'text/javascript',
	'json': 'application/json',
	'pdf': 'application/pdf',
	'png': 'image/png',
	'svg': 'image/svg+xml',
	'swf': 'application/x-shockwave-flash',
	'woff': 'application/font-woff',
	'woff2': 'application/font-woff2',
	'ttf': 'application/x-font-ttf',
	'eot': 'application/vnd.ms-fontobject',
	'txt': 'text/plain',
	'wav': 'audio/x-wav',
	'mp3': 'audio/mpeg3',
	'mp4': 'video/mp4',
	'xml': 'text/xml'
};

// 创建server
let server = http.createServer(function (request, response) {
	var pathname = url.parse(request.url).pathname;
	var realPath ='./src/' +path.join('.', pathname);
	console.log(realPath);
	var ext = path.extname(realPath);
	ext = ext ? ext.slice(1) : 'unknown';
	fs.exists(realPath, function (exists) {
		if (!exists) {
			response.writeHead(404, {
				'Content-Type': 'text/plain'
			});

			response.write('This request URL ' + pathname + ' was not found on this server.');
			response.end();
		} else {
			fs.readFile(realPath, 'binary', function (err, file) {
				if (err) {
					response.writeHead(500, {
						'Content-Type': 'text/plain'
					});
					response.end(err);
				} else {
					var contentType = mimetype[ext] || 'text/plain';
					response.writeHead(200, {
						'Content-Type': contentType
					});
					response.write(file, 'binary');
					response.end();
				}
			});
		}
	});
});

let port = new Date().getFullYear();
server.listen(port, '127.0.0.1', function () {
	console.log('http://127.0.0.1:' + port + '/index.html');
});

这里说明一下，PWA应用必须在https或者localhost下才能跑。

7.打开 Chrome 控制台切换到application> Service workers 看看是否成功注册，然后点击offline调节成离线模式后刷新下页面看看是否可以访问并且查看network是否请求来自Service workers。

{
	"name": "PWA",
	"short_name": "PWA",
	"icons": [
		{
			"src": "./icons/192x192.png",
			"sizes": "192x192",
			"type": "image/png"
		},
		{
			"src": "./icons/512x512.png",
			"sizes": "512x512",
			"type": "image/png"
		},
		{
			"src": "./icons/msapplication-icon-144x144.png",
			"sizes": "144x144",
			"type": "image/png"
		},
		{
			"src": "./icons/mstile-150x150.png",
			"sizes": "150x150",
			"type": "image/png"
		},
	],
	"start_url": "./index.html",
	"display": "standalone",
	"background_color": "#000",
	"theme_color": "#fff"
}