Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >hexo博客添加到桌面应用程序

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

作者头像
框架师
发布于 2021-03-08 02:30:46
发布于 2021-03-08 02:30:46
80900
代码可运行
举报
文章被收录于专栏:墨白的Java基地墨白的Java基地
运行总次数:0
代码可运行

PWA是什么?

  • PWA(Progressive web apps,渐进式 Web 应用)运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富,使其具有与原生应用相同的用户体验优势。 这组文档和指南告诉您有关 PWA 的所有信息。

PWA 的优势

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

  • 可以支持离线观看
  • 可被识别成一个应用程序
  • 响应式 适合任何形式的设备

安装PWA插件

  • 安装PWA前提是全站支持HTTPS协议
  • 需要自行去域名服务商申请SSL证书
  • HEXO版本为4.1.1以下,如版本在4.1.1以上,请输入以下命令安装指定版本

实际操作

  • 安装PWA
    • 查询hexo版本
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
hexo --version
  • 安装hexo指定版本
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm i hexo@4.1.1 --save
  • 安装PWA插件
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm i hexo-pwa --save
  • 修改博客根目录下配置文件(非主题配置文件)

manifest 生成地址: Web App清单生成器,如无法打开直接复制我的即可

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
# 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/icon/logo_128.png
          type: image/png
          sizes: 128x128
        - src: /medias/icon/logo_512.png
          type: image/png
          sizes: 512x512
  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

详细配置请参考GitHub官方库,我这里不做介绍

  • 在博客\blog\source\manifest.json目录下添加manifest.json,键入以下内容
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
  "name": "框架师",
  "short_name": "框架师",
  "theme_color": "white",
  "background_color": "white",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "/medias/icon/logo_128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/medias/icon/logo_512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
  • 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 类型,非必填项,该字段可让浏览器快速忽略掉不支持的图标类型
  • 在博客\blog\source\sw.js目录下添加sw.js,键入以下内容
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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?://www.mobaijun.com/?$'), 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?://www.mobaijun.com/?$ 的正则表达式路径,将这个的值修改成你的网站的 host

准备 Logo 图片

为了确保你的 PWA 图标支持所有设备,请务必使用 48x4896x96128x128144x144180x180192x192512x512 分辨率的 Logo 图片各一张,我觉得麻烦,所有只添加了512px/128px,如你想要添加所有的格式,按照以上格式复制即可

将上述图片放到对应的目录下,并修改 _config.ymlmanifest.json 与之对应

推荐图片大小转换网站:iloveimg

  • 最后输入以下内容即可
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
# 清理缓存/生成静态页面/本地预览
$ hexo clean && hexo g && hexo s

更多详细内容请参考sitoi写的文章基于 Hexo GitHub 从零开始搭建个人博客(四):让你的博客完美支持 PWA,我只是简化了一些繁琐的步骤,搞定以后,浏览器地址栏会出现一个+号,点击添加,即可在桌面看到你的应用程序啦!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-05-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

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

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Hexo添加PWA支持
Progressive Web App, 简称 PWA,是提升 Web App 的体验的一种新方法,能给用户原生应用的体验。
YangAir
2020/02/08
1.2K0
hexo静态网站的PWA支持
PWA(Progressive Web App)的中文名叫做渐进式网页应用,早在2014年, W3C 公布过 Service Worker 的相关草案,但是其在生产环境被 Chrome 支持是在 2015 年。因此,如果我们把 PWA 的关键技术之一 Service Worker 的出现作为 PWA 的诞生时间,那就应该是 2015 年。
EatRice
2020/06/02
1.6K0
hexo静态网站的PWA支持
将你的博客升级为 PWA 渐进式Web离线应用
PWA 全称 Progressive Web Apps(渐进式 Web 应用程序),旨在使用现有的 Web 技术提供用户更优的使用体验。 基本要求
ihoey
2020/01/21
7330
将你的博客升级为 PWA 渐进式Web离线应用
PWA 实践/应用(Google Workbox)
PWA(Progressive Web App - 渐进式网页应用)是一种理念,由 Google Chrome 在 2015 年提出。PWA 它不是特指某一项技术,而是应用多项技术来改善用户体验的 Web App,其核心技术包括 Web App Manifest、Service Worker、Web Push 等,用户体验才是 PWA 的核心。
除除
2022/03/11
1.6K0
PWA 实践/应用(Google Workbox)
PWA 实践/应用(Google Workbox)
PWA(Progressive Web App - 渐进式网页应用)是一种理念,由 Google Chrome 在 2015 年提出。PWA 它不是特指某一项技术,而是应用多项技术来改善用户体验的 Web App,其核心技术包括 Web App Manifest、Service Worker、Web Push 等,用户体验才是 PWA 的核心。
用户6256742
2024/07/09
7130
PWA 实践/应用(Google Workbox)
三分钟让你的H5变身“伪原生”,揭秘H5秒变应用的魔法配置
几周前,Follow还没推出官方App时,我发现一个神奇的操作:把它的网页保存到iPhone桌面,打开后竟然和原生App几乎一样! 没有浏览器地址栏,没有工具栏,甚至还有启动画面——完全就是一个"伪装"的原生应用。
埃兰德欧神
2025/03/31
1570
三分钟让你的H5变身“伪原生”,揭秘H5秒变应用的魔法配置
开发一个渐进式Web应用程序(PWA)前都需要了解什么?
自苹果推出了iPhone应用商店以来,App成为了我们生活中不可或缺的一部分,而对于实体业务也是如此,现在各行业都在推出自己的App,但有没有人想过这样一种场景,如果自己的潜在客户还没有安装你的App亦或是即便安装但因为客户的手机存储空间紧张而卸载掉了你的App?那有没有使App更轻量,更易安装的技术实现呢?答案是“有的”。
葡萄城控件
2020/09/14
1.8K0
开发一个渐进式Web应用程序(PWA)前都需要了解什么?
hexo 插件及 next 内置样式集
First add configuration in _config.yml from your hexo project.
Cell
2022/02/25
5250
为原有的 NextJS 构建 PWA
简单来说,支持 pwa 的网站再移动端或者桌面端都可以模拟成设备中的一个 app,存在于主屏幕上。
Innei
2021/12/28
9910
PWA介绍及快速上手搭建一个PWA应用
一个新的前端技术,PWA( 全称:Progressive Web App )也就是说这是个渐进式的网页应用程序。
游魂
2018/05/15
2.4K0
PWA - 令人惊奇的web用户体验新方法
install 事件回调中有两个方法: * event.waitUntil():传入一个 Promise 为参数,等到该 Promise 为 resolve 状态为止。 * self.skipWaiting():self 是当前 context 的 global 变量,执行该方法表示强制当前处在 waiting 状态的 Service Worker 进入 activate 状态。 * 安装后( installed ):Service Worker 已经完成了安装,并且等待其他的 Service Worker 线程被关闭。 * 激活( activating ):在这个状态下没有被其他的 Service Worker 控制的客户端,允许当前的 worker 完成安装,并且清除了其他的 worker 以及关联缓存的旧缓存资源,等待新的 Service Worker 线程被激活。
江米小枣
2020/06/16
2.8K0
PWA - 令人惊奇的web用户体验新方法
PWA:可能是成本最低的站点加速方式
前言   PWA(Progressive Web App),中文称为“渐进式网络应用程序”,利用一系列现代的 Web 技术来增强 Web App 的功能,从而实现应用程序一样的用户体验。事实上,任何的网站都可以做成 PWA。从这个概念上来说,PWA 实际上是一种理念。根据这种理念可以创造出各式各样的东西,比如说微信小程序、百度小程序、支付宝小程序等等(😂 虽然它们都不承认自己是和 PWA 一脉相承的)。 为何有 PWA   随着网络和智能设备的飞速发展及提升,越来越多的原生应用程序占据了智能设备的空间和资
zhonger
2022/10/28
1.2K0
PWA:可能是成本最低的站点加速方式
【腾讯云前端性能优化大赛】前端性能和加载体验优化实践(附:PWA、离线包、内存优化、预渲染)
特别是对于首屏资源加载中的白屏时间,用户等待的时间就越长,用户感知到页面的速度就越慢。麻省理工学院的 Richard Larson 在讲话中指出,“人类将被动等待高估了 36%”(https://mazey.cn/t/em)。这意味着用户感觉到的等待时间比开发工具记录的长得多。
除除
2021/12/15
2.9K0
【腾讯云前端性能优化大赛】前端性能和加载体验优化实践(附:PWA、离线包、内存优化、预渲染)
将自己的网站改造成可安装的PWA
本文是一篇水文,感兴趣的读者可以看看。分享一下怎么讲自己的网站改造成可安装的PWA。
牛老师讲GIS
2024/12/30
1060
将自己的网站改造成可安装的PWA
天人合一物我相融,站点升级渐进式Web应用PWA(Progressive Web Apps)实践
    PWA(Progressive web apps,渐进式 Web 应用)使用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序,说白了,PWA可以让我们的站点以原生APP的形式运行,但相比于安装原生APP应用,访问PWA显然更加容易和迅速,还可以通过链接来分享PWA应用。
用户9127725
2022/08/08
8390
天人合一物我相融,站点升级渐进式Web应用PWA(Progressive Web Apps)实践
PWA离线优先策略:提升用户体验的关键步骤
Progressive Web Apps (PWA) 的离线优先策略是通过Service Worker和Cache API实现的,它允许在没有网络连接时仍然可以访问网站的部分或全部内容。
天涯学馆
2024/08/20
2400
@vue/cli-plugin-pwa 中文翻译
service worker 介绍:https://segmentfault.com/a/1190000016028780
星宇大前端
2020/12/21
1.4K0
2025 年了,我不允许你还不知道 vite-plugin-pwa
最近在给项目加 PWA 支持时,发现 vite-plugin-pwa 真的是一个又强大又丝滑的插件! 本文就带大家系统了解一下它的安装使用、核心功能和进阶技巧,让你的 Vite 应用秒变原生 App!
萌萌哒草头将军
2025/04/28
2790
2025 年了,我不允许你还不知道 vite-plugin-pwa
PWA 入门
渐进式 web 应用 (Progressive web apps) 简称为 PWA。它可以给用户原生应用的体验。
多云转晴
2020/05/13
1.7K0
手把手教你使用Next.js实现一个PWA应用
PWA(Progressive Web Apps),是一种可以提供类似原生应用体验的网页应用。简单的理解就是,可以让网页像原生应用那样在用户的设备上安装,并且能够实现离线工作、推送通知等功能,不知道你注意过没有,你偶尔会在chrome浏览器中可以看到一个这样的标志:
老码小张
2023/12/11
1.7K0
手把手教你使用Next.js实现一个PWA应用
推荐阅读
相关推荐
Hexo添加PWA支持
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验