使用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文件生成,加大文件大小限制等等。具体可以参考官方文档。
下面是我之前用过的配置文件可以作为参考。
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。
8.还有如果需要安装到本地显示icon信息的话需要配置manifest.json文件。
{
"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"
}
这样一个简单快速的PWA应用就诞生了,当然更重要的是你的webapp应用内容。