文章目录
  1. 1. PWA是什么
  2. 2. 开始吧
    1. 2.1. 安装插件
    2. 2.2. 配置webpack
    3. 2.3. 配置manifest.json
    4. 2.4. 修改index.html文件
  3. 3. 瞧瞧成果吧!
    1. 3.1. 打包
    2. 3.2. 用nginx将dist目录部署到服务器

引言:要总对新技术充满星星眼。


PWA是什么

来我们看看百度百科是怎么说的:

PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送。在移动端利用标准化框架,让网页应用呈现和原生应用相似的体验。

对于我来说,我对这种实用性较强的技术总是喜欢尽量先以一种及其简单的方法达到目的,在了解到它确实是非常好玩以及舒服之后,再去深入学习它,而这个时候,往往我已经从实战中学到了一些东西,再来深入学习的时候就能够比较高效地吃透它。

开始吧

不说屁话了,那么我们来看看如何搞定PWA吧。本文以一个用vue-cli初始化的vue+webpack的项目为例。

安装插件

这里用到了一个名叫sw-precache-webpack-plugin的插件

SWPrecacheWebpackPlugin is a webpack plugin for using service workers to cache your external project dependencies. It will generate a service worker file using sw-precache and add it to your build directory.

大概去看了一下,sw-precache是github里service-workers标签界的扛把子,sw-precache-webpack-plugin就是把这个扛把子请到了webpack里来的一个插件。

心动吗,来,安装吧:

1
npm install sw-precache-webpack-plugin --save

它将极大简化我们的工作。

配置webpack

我们以一个用vue-cli初始化的vue+webpack的项目为例。修改/build/webpack.prod.conf.js ,实际上,只要是webpack项目就同理可得了。

1
2
3
4
5
6
7
8
9
10
11
...
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')
...

...
plugins: [
...
// service worker caching
new SWPrecacheWebpackPlugin({cacheId: 'my-vue-app', filename: 'service-worker.js', minify: true})
]
...

实际上还有很多配置选项,想深入了解可去插件的github看看。

配置manifest.json

照葫芦画瓢吧,经试验icon貌似image/png最稳妥。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
"scope": "/",
"name": "SHU Message",
"short_name": "SHU Message",
"start_url": "/?from=homescreen",
"display": "standalone",
"description": "SHU信息分享与交流平台",
"orientation": "portrait",
"theme_color": "#3f51b5",
"background_color": "#fff",
"icons": [
{
"src": "./favicon32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "./favicon144.png",
"sizes": "144x144",
"type": "image/png"
}
]
}

修改index.html文件

head中添加一行:

1
<link rel="manifest" href="/static/manifest.json">

body中添加几行:

1
2
3
4
5
6
7
8
9
10
11
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js').then(() => {
console.log('Service worker registered!');
}).catch((error) => {
console.log('Error registering service worker: ', error);
});
} else {
console.log('Not supported by browser');
}
</script>

瞧瞧成果吧!

打包

1
npm run build

用nginx将dist目录部署到服务器

部署过程略。

那么我们部署到localhost瞅瞅:

注意了,PWA只能在"安全的站点"使用,也就是说,你的网站必须是SSH的,使用https,此外,localhost是个特例。

看见右边的蓝色链接了吗,我们点击Add to homescreen:

非常好!自我感觉体验顺滑哈哈哈哈!


大功告成!
文章目录
  1. 1. PWA是什么
  2. 2. 开始吧
    1. 2.1. 安装插件
    2. 2.2. 配置webpack
    3. 2.3. 配置manifest.json
    4. 2.4. 修改index.html文件
  3. 3. 瞧瞧成果吧!
    1. 3.1. 打包
    2. 3.2. 用nginx将dist目录部署到服务器