资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/hexo博客简单支持PWA

hexo博客简单支持PWA

nicercode / 2754人阅读

摘要：文章首次发表在博客支持了前言使用插件使博客支持功能，目前我所知道的有两种插件均可实现该功能前提全站支持目前本人使用的是腾讯云的免费证书网站配置已经有很多文章写了配置过程本篇文章不在赘述使用安装修改配置文件的配置文件采用语言想要

文章首次发表在: 博客支持PWA了~
前言

使用hexo插件使博客支持pwa功能，目前我所知道的有两种插件均可实现该功能

hexo-pwa

hexo-offline

前提(HTTPS)

全站支持HTTPS.(ps: 目前本人使用的是腾讯云的免费证书)

网站配置HTTPS, 已经有很多文章写了配置过程, 本篇文章不在赘述

使用hexo-pwa 1.安装hexo-pwa 
npm i --save hexo-pwa
2.修改配置文件 
hexo的配置文件采用yml语言, 想要了解该语言的可以去看看

在根目录的_config.yml中添加

pwa:
  manifest:
    path: /manifest.json
    body:
      "name": "funnycoderstar"
      "short_name": "star"
      "theme_color": "rgba(203,7,83,0.86)"
      "background_color": "#FAFAFA"
      "display": "standalone"
      "Scope": "/"
      "start_url": "/"
      icons:
        - src: https://cdn.wangyaxing.cn/icon-144x144.png?v=1
          sizes: 144x144
          type: image/png
        - src: https://cdn.wangyaxing.cn/icon-128x128.png
          sizes: 128x128
          type: image/png
        - src: https://cdn.wangyaxing.cn/icon-96x96.png
          sizes: 96x96
          type: image/png
  serviceWorker:
    path: /sw.js
    preload:
      urls:
        - /
      posts: 5
    opts:
      networkTimeoutSeconds: 5
    routes:
      - pattern: !!js/regexp /hm.baidu.com/
        strategy: networkOnly
      - pattern: !!js/regexp /.*.(js|css|jpg|jpeg|png|gif)$/
        strategy: cacheFirst
      - pattern: !!js/regexp ///
        strategy: networkFirst
  priority: 5

参数含义可以去hexo-pwa文档中查看

3.添加manifest.json和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?://wangyaxing.cn/?$"), workbox.strategies.networkFirst());

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

    workbox.routing.registerRoute(new RegExp(".*.(?:js|css)"), workbox.strategies.staleWhileRevalidate());

    workbox.routing.registerRoute(new RegExp("https://cdn.wangyaxing.cn/"), workbox.strategies.cacheFirst());
}

manifest.json

{
  "name": "funnycoderstar",
  "short_name": "star",
  "theme_color": "rgba(203,7,83,0.86)",
  "background_color": "#FAFAFA",
  "display": "standalone",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "/source/images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/source/images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/source/images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
  ],
  "splash_pages": null
}

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

4.将funnycoderstar安装到主屏(PWA)

地址栏输入: Chrome://flags

搜索并启用以下项目: Desktop PWAs(桌面PWAs)、App Banners(应用横幅)、Experimental App Banners(实验性应用横幅)

重启浏览器使修改的设置生效

点击地址栏最右边按钮

选择"安装 funnycoderstar"

在桌面上即可看到博客的小图标

感兴趣的小伙伴可以来我的博客体验一下, 哈哈~~  https://.wangyaxing.cn/
使用hexo-offline

使用基本与hexo-pwa相同, 下面简述一下过程

1. 安装 
npm i --save hexo-offline
2. 修改配置文件 
# Offline
## Config passed to sw-precache
## https://github.com/JLHwung/hexo-offline
offline:
  maximumFileSizeToCacheInBytes: 10485760
  staticFileGlobs:
    - public/**/*.{js,html,css,png,jpg,jpeg,gif,svg,json,xml}
  stripPrefix: public
  verbose: true
  runtimeCaching:
    - urlPattern: /*
      handler: cacheFirst
      options:
        origin: cdn.example.com
    - urlPattern: /*
      handler: cacheFirst
      options:
        origin: cdn.another-example.org
3. 添加manifest.json

manifest.json放到 source目录下

4. 引入manifest.json

next主题在 layout/_partials/head.swig 添加

注意

文件放置位置一定要与配置文件中写的路径一致

图标大小一定按照PWA的严格要求

打开 Chrome Dev Tools的Application一栏中进行调试

还可以通过观察network中的请求是否有小齿轮标志来检测serviceWorker是否已加载

参考

hexo博客支持PWA和压缩博文

让 Hexo 博客支持 PWA

五步让 Hexo 博客支持 PWA

专线服务 云服务器 hexo 博客cdn加速 jsp简单个人博客 支持markdown的博客 PWA

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97427.html

相关文章

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

    摘要：五一之前就想写一篇关于的文章结果朋友结婚就不了了之了。记得最后一定要看注意事项更新仓库介绍官网类似一个极简的静态网站生成器用来写技术文档不能在爽。当然搭建成博客也不成问题。构建与自动部署用的或者的都可以也可以搭建在自己的服务器上。 五一之前就想写一篇关于Vuepress的文章,结果朋友结婚就不了了之了。记得最后一定要看注意事项！ 更新：coding仓库：https://git.dev...

    zhoutk 评论0 收藏0

  • 从 0 开始搭建一个技术博客，私藏干货~

    摘要：下面贴上栈长博客的地址，也是技术栈的官方博客地址今天分享一下，如何从开始搭建一个自己的技术博客，基于栈长的博客。的国内访问不是很快，这里推荐使用自己搭建国内的云服务器，使用搭建静态服务。 技术博客的选型有很多种，如：博客园、CSDN、开源中国、简书、知乎等……都可以用来写文章，形成自己的技术博客。 上面的博客都是第三方的，有没有方式搭建自己的服务器、自己的域名的博客呢？栈长知道的成熟方...

    Zhuxy 评论0 收藏0

  • 在 Ubuntu 14.04 服务器上部署 Hexo 博客

    摘要：本文将介绍如何在一台的云服务器上快速部署博客站点，如何快速发布一篇博文并通过云服务器上的私有仓库部署到服务器目录下。此外，还要在云服务器上安装和两个必备的软件包。在服务器上部署博客以下为文章正文。 推荐理由：Hexo 是用 Node.js 开发的一个静态站点生成器（Static Site Generator），支持 Markdown 语法写作，有着强大的插件系统，而且性能优异。下面我推...

    cyqian 评论0 收藏0

  • 在 Ubuntu 14.04 服务器上部署 Hexo 博客

    摘要：本文将介绍如何在一台的云服务器上快速部署博客站点，如何快速发布一篇博文并通过云服务器上的私有仓库部署到服务器目录下。此外，还要在云服务器上安装和两个必备的软件包。在服务器上部署博客以下为文章正文。 推荐理由：Hexo 是用 Node.js 开发的一个静态站点生成器（Static Site Generator），支持 Markdown 语法写作，有着强大的插件系统，而且性能优异。下面我推...

    Prasanta 评论0 收藏0

  • 手把手教你使用Hexo + Github Pages搭建个人独立博客

    摘要：设置什么是本用于介绍托管在的项目，不过，由于他的空间免费稳定，用来做搭建一个博客再好不过了。你可以通过来访问你的个人主页。执行过程中可能需要让你输入账户的用户名及密码，按照提示操作即可。推荐使用腾讯公益。 系统环境配置 要使用Hexo，需要在你的系统中支持Nodejs以及Git，如果还没有，那就开始安装吧！ 安装Node.js 下载Node.js参考地址：安装Node.js 安装Git...

    刘福 评论0 收藏0

发表评论

登陆后可评论

0条评论

nicercode

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<