摘要:文章首次发表在博客支持了前言使用插件使博客支持功能,目前我所知道的有两种插件均可实现该功能前提全站支持目前本人使用的是腾讯云的免费证书网站配置已经有很多文章写了配置过程本篇文章不在赘述使用安装修改配置文件的配置文件采用语言想要
文章首次发表在: 博客支持PWA了~前言
使用hexo插件使博客支持pwa功能,目前我所知道的有两种插件均可实现该功能
hexo-pwa
hexo-offline
前提(HTTPS)全站支持HTTPS.(ps: 目前本人使用的是腾讯云的免费证书)
网站配置HTTPS, 已经有很多文章写了配置过程, 本篇文章不在赘述
使用hexo-pwa 1.安装hexo-pwanpm i --save hexo-pwa2.修改配置文件
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-offline2. 修改配置文件
# 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.org3. 添加manifest.json
manifest.json放到 source目录下
4. 引入manifest.jsonnext主题在 layout/_partials/head.swig 添加
注意文件放置位置一定要与配置文件中写的路径一致
图标大小一定按照PWA的严格要求
打开 Chrome Dev Tools的Application一栏中进行调试
还可以通过观察network中的请求是否有小齿轮标志来检测serviceWorker是否已加载
参考hexo博客支持PWA和压缩博文
让 Hexo 博客支持 PWA
五步让 Hexo 博客支持 PWA
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/97427.html
摘要:五一之前就想写一篇关于的文章结果朋友结婚就不了了之了。记得最后一定要看注意事项更新仓库介绍官网类似一个极简的静态网站生成器用来写技术文档不能在爽。当然搭建成博客也不成问题。构建与自动部署用的或者的都可以也可以搭建在自己的服务器上。 五一之前就想写一篇关于Vuepress的文章,结果朋友结婚就不了了之了。记得最后一定要看注意事项! 更新:coding仓库:https://git.dev...
摘要:下面贴上栈长博客的地址,也是技术栈的官方博客地址今天分享一下,如何从开始搭建一个自己的技术博客,基于栈长的博客。的国内访问不是很快,这里推荐使用自己搭建国内的云服务器,使用搭建静态服务。 技术博客的选型有很多种,如:博客园、CSDN、开源中国、简书、知乎等……都可以用来写文章,形成自己的技术博客。 上面的博客都是第三方的,有没有方式搭建自己的服务器、自己的域名的博客呢?栈长知道的成熟方...
摘要:本文将介绍如何在一台的云服务器上快速部署博客站点,如何快速发布一篇博文并通过云服务器上的私有仓库部署到服务器目录下。此外,还要在云服务器上安装和两个必备的软件包。在服务器上部署博客以下为文章正文。 推荐理由:Hexo 是用 Node.js 开发的一个静态站点生成器(Static Site Generator),支持 Markdown 语法写作,有着强大的插件系统,而且性能优异。下面我推...
摘要:设置什么是本用于介绍托管在的项目,不过,由于他的空间免费稳定,用来做搭建一个博客再好不过了。你可以通过来访问你的个人主页。执行过程中可能需要让你输入账户的用户名及密码,按照提示操作即可。推荐使用腾讯公益。 系统环境配置 要使用Hexo,需要在你的系统中支持Nodejs以及Git,如果还没有,那就开始安装吧! 安装Node.js 下载Node.js参考地址:安装Node.js 安装Git...
阅读 1953·2021-09-30 09:53
阅读 1791·2021-09-24 09:48
阅读 1737·2019-08-30 14:01
阅读 2149·2019-08-29 18:35
阅读 1234·2019-08-26 18:27
阅读 2965·2019-08-26 12:12
阅读 929·2019-08-23 17:16
阅读 903·2019-08-23 15:31