Hexo添加PWA支持-阿里云开发者社区

Hexo添加PWA支持

2020-02-08 1216

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

Progressive Web App, 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。

PWA 能做到原生应用的体验不是靠特指某一项技术，而是经过应用一些新技术进行改进，在安全、性能和体验三个方面都有很大提升，PWA 本质上是 Web App，借助一些新技术也具备了 Native App 的一些特性，兼具 Web App 和 Native App 的优点。

PWA 的主要特点包括下面三点：

可靠 - 即使在不稳定的网络环境下，也能瞬间加载并展现
体验 - 快速响应，并且有平滑的动画响应用户的操作
粘性 - 像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面

PWA 本身强调渐进式，并不要求一次性达到安全、性能和体验上的所有要求，开发者可以通过 PWA Checklist 查看现有的特征。

推荐阅读：https://lavas.baidu.com/pwa/README

可以了解一下什么是PWA

开始操作

注意：你的博客必须全站为HTTPS，这是使用PWA的基础条件

注意：你的博客必须全站为HTTPS，这是使用PWA的基础条件

注意：你的博客必须全站为HTTPS，这是使用PWA的基础条件

重要的事情说三遍！

安装PWA插件

执行下面的命令

npm install hexo-pwa --save

hexo@4.2.0 目前赞不兼容 hexo-pwa,使用 hexo@4.2.0 版本的用户推荐降级到 hexo@4.1.1

如何查看版本

hexo -version

安装指定版本

npm install hexo@4.1.1 --save

添加manifest.json和sw.js

manifest.json文件

manifest 生成地址： https://app-manifest.firebaseapp.com/

当然你也可以新建一个manifest.json文件，放在站点根目录下，然后复制下面我的代码，修改为你的信息即可

{
    "name": "过客~励む", 
    "short_name": "过客~励む", 
    "theme_color": "#fff", 
    "background_color": "#49b1f5",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "icons": [ 
        {
          "src": "/medias/36.png",
          "sizes": "36x36",
          "type": "image/png"
        },
        {
            "src": "/medias/48.png",
          "sizes": "48x48",
          "type": "image/png"
        },
        {
          "src": "/medias/72.png",
          "sizes": "72x72",
          "type": "image/png"
        },
        {
          "src": "/medias/96.png",
          "sizes": "96x96",
          "type": "image/png"
        },
        {
          "src": "/medias/144.png",
          "sizes": "144x144",
          "type": "image/png"
        },
        {
          "src": "/medias/180.png",
          "sizes": "180X180",
          "type": "image/png"
        },
        {
          "src": "/medias/apple-touch-icon.png",
          "sizes": "180x180",
          "type": "image/png"
        },
        {
          "src": "/medias/192.png",
          "sizes": "192x192",
          "type": "image/png"
        },
        {
            "src": "/medias/512.png",
            "sizes": "512x512",
            "type": "image/png"
          }
      ],
      "splash_pages": null
  }

参数解释

name: {string} 应用名称，用于安装横幅、启动画面显示
short_name: {string} 应用短名称，用于主屏幕显示
theme_color: {Color} css色值theme_color 属性可以指定 PWA 的主题颜色。可以通过该属性来控制浏览器 UI 的颜色。比如 PWA 启动画面上状态栏、内容页中状态栏、地址栏的颜色，会被 theme_color 所影响。
background_color: {Color} css色值可以指定启动画面的背景颜色。
display: {string} 显示类型
- fullscreen 应用的显示界面将占满整个屏幕
- standalone 浏览器相关UI（如导航栏、工具栏等）将会被隐藏
- minimal-ui 显示形式与standalone类似，浏览器相关UI会最小化为一个按钮，不同浏览器在实现上略有不同
- browser 浏览器模式，与普通网页在浏览器中打开的显示一致
scope: {string} 作用域
- scope 应遵循如下规则：
- 如果没有在 manifest 中设置 scope，则默认的作用域为 manifest.json 所在文件夹；
- scope 可以设置为 ../ 或者更高层级的路径来扩大PWA的作用域；
- start_url 必须在作用域范围内；
- 如果 start_url 为相对地址，其根路径受 scope 所影响；
- 如果 start_url 为绝对地址（以 / 开头），则该地址将永远以 / 作为根地址；
start_url: {string} 应用启动地址
icons: {Array.} 应用图标列表
- src: {string} 图标 url
- sizes {string} 图标尺寸，格式为widthxheight，宽高数值以 css 的 px 为单位。如果需要填写多个尺寸，则使用空格进行间隔，如”48x48 96x96 128x128”
- type {string} 图标的 mime 类型，非必填项，该字段可让浏览器快速忽略掉不支持的图标类型

sw.js

新建一个名为sw.js的文件，放在站点根目录下，在文件里填入一下内容

importScripts('https://g.alicdn.com/kg/workbox/3.3.0/workbox-sw.js');

if (workbox) {
    workbox.setConfig({ modulePathPrefix: 'https://g.alicdn.com/kg/workbox/3.3.0/' });

    workbox.precaching.precache(['/', '/index.html']);

    workbox.routing.registerRoute(new RegExp('^https?://yafine-blog.cn/?$'), workbox.strategies.networkFirst());

    workbox.routing.registerRoute(new RegExp('.*.html'), workbox.strategies.networkFirst());

    workbox.routing.registerRoute(new RegExp('.*.(?:js|css|jpg|png|gif)'), workbox.strategies.staleWhileRevalidate());

}

注意：

将其中域名改为你自己主页的域名：https?://yafine-blog.cn/ 改为你的域名，格式要和我的一样。

配置站点配置文件

将下面的配置代码复制到你的站点根目录配置文件_config.yml中

# PWA配置  npm i --save hexo-pwa
pwa:
  manifest:
    path: /manifest.json
    body:
      name: 过客~励む
      short_name: 过客~励む
      theme_color: white
      background_color: white
      display: standalone
      orientation: portrait
      scope: /
      start_url: /
      icons:
        - src: /medias/48.png
          type: image/png
          sizes: 48x48
        - src: /medias/96.png
          type: image/png
          sizes: 96x96
        - src: /medias/128.png
          type: image/png
          sizes: 128x128
        - src: /medias/144.png
          type: image/png
          sizes: 144x144
        - src: /medias/180.png
          type: image/png
          sizes: 180x180
        - src: /medias/192.png
          type: image/png
          sizes: 192x192
        - src: /medias/512.png
          type: image/png
          sizes: 512x512
        - src: /medias/apple-touch-icon.png
          type: image/png
          sizes: 180x180
  serviceWorker:
    path: /sw.js
    preload:
      urls:
        - /
      posts: 12
    opts:
      networkTimeoutSeconds: 30
    routes:
      - pattern: !!js/regexp /hm.baidu.com/
        strategy: networkOnly
      - pattern: !!js/regexp /www.google-analytics.com/
        strategy: networkOnly
      - pattern: !!js/regexp /.*\.(js|css|jpg|jpeg|png|gif)$/
        strategy: cacheFirst
      - pattern: !!js/regexp /\//
        strategy: networkFirst
  priority: 5

准备Logo图片素材

为了确保你的 PWA 图标支持所有设备，请务必使用 48x48、96x96、128x128、144x144、180x180、192x192、512x512 分辨率的 Logo 图片各一张

推荐图片大小转换网站：https://www.iloveimg.com

将准备好的Logo图片素材放到配置文件所指向的对应的文件夹位置，我放在了F:\blog\themes\matery\source\medias（这是我的路径），修改配置文件，与其一一对应，切不可写错。

检查PWA服务

执行下面的命令：

hexo cl && hexo g && hexo s

然后在浏览器输入http://localhost:4000/，查看效果。

按F12或者Ctrl + Shift + I或者直接鼠标右键弹出的菜单中，有个检查，鼠标点击，就可以进入开发者调试模式，然后选择Application—>Service Workers，查看是否成功？

成功状态提示：Status #xxx activated and is running

谷歌浏览器安装PWA

前面的步骤操作没错，配置也没问题，则在本地运行试，浏览器地址栏中会出现一个类似 :heavy_plus_sign: 加号的图标，点击它会出现一个弹出框，就说明配置成功，当然你可以选择安装，安装过后桌面会出现一个图标，点击就可以访问，但是如果你本地服务关闭的话，再点击这个图标，有些页面可以访问，但有些页面访问不了。如果需要它都能够全部访问的话，你需要开启本地服务，也就是hexo s

如果你的地址栏没有出现这个加号，首先在新的标签页上的地址栏输入Chrome://flags，然后再搜索栏输入PWAS进行查找，会出现两个选项一个为Desktop PWAs local updating，另一个为Desktop PWAs installable from the omnibox，将其设为Enabled，然后点击Relaunch，进行浏览器的重启，再查看localhost:4000，就会出现加号了。

添加 IOS Safari PWA 图标支持

在manifest.json文件中添加下面的代码，代码是关于apple-touch-icon图标的

{
    "src": "/medias/apple-touch-icon.png",
    "sizes": "180x180",
    "type": "image/png"
}

图标大小设置为180 x 180

修改head.ejs文件

在themes/matery/layout/_partial/head.ejs，在head.ejs文件中的<head></head>标签之间添加下面的代码：

<link rel="apple-touch-icon" href="<%- theme.appletouchicon %>">
<meta name="theme-color" content="white"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

theme-color：中的 content 对应的是你 manifest.json 中的 theme_color 的值
viewport: 用于针对移动屏幕优化 PWA 应用详细链接viewport
apple-touch-icon：配置 apple-touch-icon 图标链接

在主题配置文件_config.yml下添加下面的代码

appletouchicon: /medias/apple-touch-icon.png #你图片的路径

进行部署

如果你采用了gulp压缩的方式，就执行下面的命令：

gulp build

如果没有采用，则执行下面的命令：

hexo clean && hexo g -d

部署到代码托管平台后，打开浏览器，在地址栏输入你的域名，查看效果即可。

参考文档：https://sitoi.cn/posts/49115.html

Hexo添加PWA支持

开始操作

安装PWA插件

添加manifest.json和sw.js

manifest.json文件

sw.js

配置站点配置文件

准备Logo图片素材

检查PWA服务

谷歌浏览器安装PWA

添加 IOS Safari PWA 图标支持

修改head.ejs文件

进行部署

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

Hexo添加PWA支持

开始操作

安装PWA插件

添加manifest.json和sw.js

manifest.json文件

sw.js

配置站点配置文件

准备Logo图片素材

检查PWA服务

谷歌浏览器安装PWA

添加 IOS Safari PWA 图标支持

修改head.ejs文件

进行部署

热门文章

最新文章

相关电子书