在这里插入图片描述

使用 vue-cli 创建项目,在配置项中选择 PWA。脚手架就会搭好基本的框架。

这个时候不做任何的额外配置也是正常使用。当然,只有打包之后在线上,猜可以看到效果。

根目录下新建 server.js

var express = require('express');
var app = express();

const hostname = 'localhost';
const port = 3838;
app.use(express.static('./dist'));
app.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}`);
});

运行 nodemon server.js,启动这个简易的服务器

运行 yarn build,打包项目。

在浏览器中输入 localhost:3838
在这里插入图片描述点击右上方的安装按钮
在这里插入图片描述
在这里插入图片描述
一个基本的配置就这么完成了。

在这里插入图片描述
推荐以下文章,作为理论参考:

记录vue配置service-worker缓存

如何在vue项目中使用PWA

使用 ServiceWorker 打造极速浏览体验

Vue+PWA实践过程

Service Worker离线缓存实践

来看看Service Worker的项目实战

service worker项目实战一:离线缓存实现

使用 ServiceWorker 缓存来优化体验

Re0:在Vue里用Service Worker来搞个中间层

Vue3 + PWA + GQL 项目实践

Service Worker —这应该是一个挺全面的整理

Logo

前往低代码交流专区

更多推荐