Hexo添加PWA支持

本文涉及的产品
.cn 域名,1个 12个月
简介: 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 图标支持所有设备,请务必使用 48x4896x96128x128144x144180x180192x192512x512 分辨率的 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

目录
相关文章
|
存储 资源调度 数据库
Vercel 部署 NestJS应用
Vercel 部署 NestJS应用
912 0
|
前端开发 应用服务中间件 网络安全
【Nuxt】Nuxt做官网要求适配PC&Mobile,我的解决方案
前言 项目终于进入了尾声,这段时间主要在忙公司官网的开发,前段时间我在忙另外一个项目的时候,官网这个项目就启动了,团队里的另外一个小伙伴居然用Vue-cli构建了一个项目去做官网,导致我很难李姐,所以我提出重构项目,由我主导开发,写篇文章记录一下项目信息以及部分关键点。
1685 0
|
3月前
|
网络协议 前端开发 关系型数据库
【workerman】uniapp+thinkPHP5使用GatewayWorker实现实时通讯
上述为之前给公司做内部通讯软件时个人整理内容,水平有限,如有错误之处,望各位园友不吝赐教!如果觉得不错,请点击推荐和关注!谢谢~๑•́₃•̀๑ [鲜花][鲜花][鲜花]
59 0
|
5月前
|
JSON 小程序 前端开发
小程序使用npm以及常用的移动端UI插件
小程序使用npm以及常用的移动端UI插件
44 0
|
5月前
|
前端开发 开发者
NPM包脚手架:开启前端开发新纪元
NPM包脚手架:开启前端开发新纪元
120 0
|
Web App开发 Unix 开发者
推荐一款非常优雅且面向开发者的Chrome浏览器插件:在云端
【在云端】是由一群编程开发人员利用业余时间设计开发的一款Chrome浏览器新标签页美化插件,体现摄影美学、专注力以及先进云技术的插件。力求可以通过这项工作使得大家在这个快节奏的社会能够体会到一片安静与祥和,且不被这个时代淘汰。
10240 4
推荐一款非常优雅且面向开发者的Chrome浏览器插件:在云端
webpack配置篇(三十六):发布构建包到npm社区
webpack配置篇(三十六):发布构建包到npm社区
100 0
webpack配置篇(三十六):发布构建包到npm社区
|
JavaScript 前端开发 Linux
网页多平台桌面打包工具 electron 和 electron-packager 的使用
网页多平台桌面打包工具 electron 和 electron-packager 的使用
446 0
|
前端开发
前端工程化-cdn-私服-组件库-云-devops-cnpm-webpack
前端工程化-cdn-私服-组件库-云-devops-cnpm-webpack
92 0
前端工程化-cdn-私服-组件库-云-devops-cnpm-webpack
加速Electron项目打包
加速Electron项目打包
255 0