0%

让hexo支持pwa

简介

首先介绍下什么是pwa,pwa中文叫渐进式网页应用,我的印象中第一个支持pwa的网站就是twitter,具体的原理什么的我也不懂,就是知道pwa网站可以直接添加网址站到桌面,就相当于在系统中直接安装了一个app,打开的效果也和app差不多,加载速度也很快,部分功能可以直接离线使用

操作

因为我的博客是使用hexo生成的,百度了一下hexo-offline可以让hexo站点支持pwa

所以首先安装hexo-offline

npm install hexo-offline --save

关于这个插件的详细使用方法可以看下面这里

https://github.com/JLHwung/hexo-offline

之后我们在站点_config.yml如下配置

1
2
3
4
5
6
7
# offline config passed to sw-precache.
offline:
maximumFileSizeToCacheInBytes: 5242880
staticFileGlobs:
- public/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2}
stripPrefix: public
verbose: true

注意哦不是主题的_config.yml文件

之后生成manifest.json文件,进入下面这个网站

https://app-manifest.firebaseapp.com/

填入相关的参数,如下

之后点击generate.zip 把配置都下载过来

把manifest.json和images文件夹直接复制到hexo下source文件夹中,最后我们编辑主题,在head里添加

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

我使用的是hexo主题,所以在

themes/next/layout/_partials/head/head.swig

这个文件中添加上面这句话即可,最后直接重新生成站点,部署即可

欢迎关注Bboysoul的博客www.bboy.app

Have Fun