学习
实践
活动
工具
TVP
写文章
专栏首页个人学习笔记hexo静态网站的PWA支持
原创

hexo静态网站的PWA支持

简介

PWA(Progressive Web App)的中文名叫做渐进式网页应用,早在2014年, W3C 公布过 Service Worker 的相关草案,但是其在生产环境被 Chrome 支持是在 2015 年。因此,如果我们把 PWA 的关键技术之一 Service Worker 的出现作为 PWA 的诞生时间,那就应该是 2015 年。

自 2015 年以来,PWA 相关的技术不断升级优化,在用户体验和用户留存两方面都提供了非常好的解决方案。PWA 可以将 Web 和 App 各自的优势融合在一起:渐进式、可响应、可离线、实现类似 App 的交互、即时更新、安全、可以被搜索引擎检索、可推送、可安装、可链接。[1]

由于hexo为静态博客,因此不需要具备推送功能(其实是我没搞懂)。因此PWA的特性包括其渐进式、可离线,可以作为提高网站体验和提高网站家在速度的一个方法。因此下面将从其主要内容和hexo如何安装两个方面以“吃白饭的休伯利安号”为例来简单演示一遍安装过程。

内容

渐进式

什么是渐进式,即将传统的web应用,应用现代的技术和方法使之在能够有桌面应用一般的体验,即为渐进式web应用。渐进式web应用可以同时运行在传统的浏览器上,像普通的网站一样进行浏览和操作;其同时也可以运行在现代功能完善的浏览器中,可以使其具备更多的效果和功能。比较常见的有可安装,即在支持的浏览器和操作系统上可以生成访问图标,通过图标可以可桌面应用一样访问应用;消息推送,即访问应用时服务器端可以通过应用的后台进程主动向客户端推送消息,类似于桌面应用的消息队列。

可离线

支持应用离线访问,即正常访问应用时,后台进程会自动缓存内容,下次访问时应用优先从缓存区读取数据,然后是进行web请求。因此可离线实质上充当了web代理服务器的职责,先是将正常请求代理到缓存区,再是将缓存区不足的文件进行正常的网络请求,通过此方法实现了离线的目标。根据可离线的规律,应用在一次访问缓存之后二次访问即可断网。

安装

Web app manifest

首先要实现PWA的可安装性,需要有一个清单文件manifest.jsonmanifest.json是一个简单的json文件,它描述了我们的图标在主屏幕上如何显示,以及图标点击进去的启动页是什么,自动生成manifest.json的工具:manifest.json生成工具(需要梯子),本站的JSON格式如下所示:

{
  "name": "吃白饭的休伯利安号",
  "short_name": "吃白饭博客",
  "theme_color": "#3a311c",
  "background_color": "#3a311c",
  "display": "standalone",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "/images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

其中:

  • start_url 可以设置启动网址
  • icons 可以设置各个分辨率下页面的图标,适配不同的尺寸的路径
  • background_color 会设置背景颜色, Chrome 在网络应用启动后会立即使用此颜色,这一颜色将保留在屏幕上,直至网络应用首次呈现为止。
  • theme_color 会设置主题颜色
  • display 设置启动样式

配置好manifest.json后进行调试,打开浏览器的控制台如下图所示,即文件配置成功。

离线使用

离线使用依赖Service Work,其本质是一段运行在并行于主进程的后台进程上,他不参与web交互功能,主要职责是和服务器交互,和指示缓存的内容。其详细的生命周期和原理文档详见:Using Service Workers。可以通过文档中的生命周期对这段后台脚本进行深度开发。

hexo为静态博客,因此只需要实现离线使用即可,不需要进行消息推送,因此可以使用固定服务注册脚本,在hexo中服务注册脚本有着专门的插件进行生成:

hexo-offline

hexo-pwa

hexo-service-worker

hexo的离线插件不包括安装

百度出的PWA综合插件,支持同时生成manifest.json,有很多的配置项

和hexo-offline类似

三个插件的原理相同,通过注册SW服务,配合manifest.json,文件达到可安装可离线的功能,本站使用的是hexo-service-worker插件,下面是插件使用的细节:

  1. 首先安装hexo-service-worker插件:
npm install --save hexo-service-worker
  1. 在hexo的全局配置文件config.yml中添加配置
# offline config passed to sw-precache.
service_worker:
  maximumFileSizeToCacheInBytes: 5242880
  staticFileGlobs:
  - public/index.html
  - public/img/favcion.png
  - public/manifest.json
  stripPrefix: public
  verbose: false
  runtimeCaching:
    - urlPattern: /**/*
      handler: cacheFirst
      options:
        origin: eatrice.top

其中

  • maximumFileSizeToCacheInBytes 为最大缓存大小,字节数
  • staticFileGlobs 关键的文件路径
  • stripPrefix 网站文件的根路径绝对位置
  • runtimeCaching 缓存选项
  • urlPattern 文件的正则匹配
  • handler 缓存模式
  • origin 网站访问域名(代理域名)

如此支持离线的PWA即配置成功。若要使用其他两个插件进行配置可以参考:

然后执行生成发布。使用新版的chrome访问网站,打开控制台的Audits点击生成报告,就能看到网站是否支持PWA啦,如下图所示:

发布之后可以先访问一下网站的一些页面,然后就可以拿把大剪子网线访问你的网站啦~

关于消息推送,还没太搞明白其中的原理,自己的博客也用不到,所以就不仔细讨论啦。

原创声明,本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

登录 后参与评论
0 条评论

相关文章

  • Hexo添加PWA支持

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

    YangAir
  • hexo 博客支持PWA和压缩博文

    目标网站 https://blog.rmiao.top/ PWA yarn add hexo-offline 然后在root config.yml里新增 # o...

    Ryan-Miao
  • 腾讯云静态网站托管之搭建 Hexo

    本文档介绍通过腾讯云静态网站托管服务搭建一个 Hexo 网站,并使用云开发 CLI 工具管理部署 Hexo 网站。

    陌涛
  • 使用新版 CODING 静态网站服务 创建 Hexo 博客

    CODING 静态网站服务是 CODING 联合腾讯云 Serverless 团队,为开发者提供的便捷、稳定、高拓展性的静态网站资源托管服务。无需自建服务器,即...

    acc8226
  • hexo博客添加到桌面应用程序

    PWA 是可被发现、易安装、可链接、独立于网络、渐进式、可重用、响应性和安全的。关于这些含义的细节,请参阅 PWA的优势。简单概括为以下几点

    框架师
  • 建站神器:Hexo+Kaze+Gitee Pages 搭建静态博客网站

    建网站本身是一个很大的工程,涉及前端页面的搭建,网站数据的存储,还要购置服务器资源,甚至是后期的维护,过程相当繁琐。

    蜗牛互联网
  • Butterfly主题的PWA实现方案

    PWA的全称是Progressive Web Apps,译为渐进式网络应用程序。装配了PWA以后,用户可以将网站作为WEB APP安装到自己的设备上,以原生应用...

    Akilar
  • 如何将 Hexo 快速部署到云开发静态网站托管

    云开发提供了一项静态网页托管的业务(云开发静态托管), 你可以将你的静态资源(HTML、CSS、JavaScript、字体等)上传到云端, 由腾讯云对象储存和...

    用户1329451
  • 如何将 Hexo 博客部署到云开发静态网站托管

    Hexo 是一个快速、简洁且高效的博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在其他平台上,是搭建博客的首选框架。除了在 Github Pages ...

    腾讯云开发TCB
  • hexo博客的网站设置

    在hexo的官方文档中已经把基本的设置规划的很清楚 点击直达 ,下面就我的部分困扰记录一下。

    布衣者
  • 用Hexo制作自己的静态博客

    博客是一个老东西了,如果我们想写博客的话,有两种选择,第一种是在博客网站上,例如QQ空间、新浪博客、简书等网站上申请账号,然后编写博客;第二种就是自己找服务器搭...

    乐百川
  • Hexo 中 MathJax 的静态显示(svg)

    本文尝试利用 gulp 和 gulp-mathjax-page 将公式直接渲染为 SVG 并嵌入 HTML,以实现静态化,支持任何 Hexo 主题。同时,支持化...

    莲花海
  • 超详细动手搭建一个Vuepress站点及开启PWA与自动部署

    类似hexo一个极简的静态网站生成器,用来写技术文档不能在爽。当然搭建成博客也不成问题。

    庞小明
  • 超详细动手搭建一个Vuepress站点及开启PWA与自动部署

    类似hexo一个极简的静态网站生成器,用来写技术文档不能在爽。当然搭建成博客也不成问题。

    游魂
  • 苹果拒绝支持PWA的行为对Web贻害无穷!

    渐进式Web应用(Progressive Web Applications,简称 PWAs)是迄今为止在Web开发中最令人兴奋的创新技术之一。PWA 使你可以用...

    疯狂的技术宅
  • 手把手教你用vuepress搭建自己的网站(1)

    如果说阅读是知识的输入,那么写作就是知识的输出,输出是一个内化知识理解的过程,有些知识,一问,知道,一动手,不会,看似简单,一看就会,一做就废,凡是不被自己吸收...

    itclanCoder
  • 静态网站的动态化

    后来在一次team分享会上cc同学提出了一个小创意说现在静态网站+markdown的组合非常流行,我们可不可以做一个移动版的app随时把写好的文章以静态网站的形...

    岛哥的质量效能笔记

扫码关注腾讯云开发者

领取腾讯云代金券