菜单
菜单
文章目录
  1. 起因
    1. 背景
    2. 想法
    3. 所需工具
  2. 第一步 - 获取图标和安装代码
  3. 第二步 - 配置资源
  4. 第三步 - 手动使用
    1. Chrome
    2. Edge
    3. Android
  5. 结束语

三步让你的博客安装成仿PWA应用

起因

背景

昨天晚上逛开往的时候看到很多小伙伴的站点开启了PWA,于是心痒难耐就想弄一个!

但但是!hexo-pwahexo-offline 插件均不支持 Hexo 5.0+ ,安装后编译生成时就开始报错。

既然升了最新版,哪有在降回去的道理,其实是本人懒 ||o(°▽°)o|Ю [哈哈?]

想法

于是想到 favicon图标有这么多格式和用法,顺便还发现这个神仙网站能够一次制作和生成各种图标,于是就有了这样做的想法,虽然没有该有的功能,但是好看啊🤣🤣🤣,这样在手机电脑上打开自己的网站就像打开软件一样方便啦!!!
就暂且叫它 仿PWA应用 哈哈!!!

所需工具

  1. 一台电脑一双手

  2. 一个网站:

    https://realfavicongenerator.net/
    &&
    https://www.websiteplanet.com/zh-hans/webtools/favicon-generator/

第一步 - 获取图标和安装代码

准备一张分辨率大于等于260x260的网站图标图片。

tub

然后进入网站: https://realfavicongenerator.net/

SC

上传准备好的图片并根据自己的喜好选择制作各平台的 Favicon (只是手动调整一些参数并不要我们制作)

调整好后点击 Generate your Favicons and HTML code 开始制作生成图标和 favicon 代码

随后 website或项目类型选择资源

这里我们网站选择 HTML5 即可,然后点击 Favicon package 下载图标并复制代码

install

第二步 - 配置资源

将下载的图标包放入站点source目录下或者你所希望的位置,我的是在\source\images\favicon

将复制的代码放入head.ejs

以下代码做了修改增删

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<head>
< -- 其他代码 -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon-180x180.png">
<link rel="android-chrome-icon" sizes="60x60" href="/favicon/android-chrome-icon-60x60.png">
<link rel="android-chrome-icon" sizes="192x192" href="/favicon/android-chrome-icon-192x192.png">
<link rel="manifest" href="/favicon/site.webmanifest">
<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-config" content="/favicon/browserconfig.xml">
<meta name="msapplication-TileImage" content="/favicon/mstile-150x150.png">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#ffffff">
< -- 其他代码 -->
</head>

以上仅作示范,图标位置需要具体填写!!

仿造manifest.json修改图标包中的site.webmanifest文件为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{
"name": "Senorui's Blog",
"short_name": "Senorui",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "fullscreen",
"orientation": "portrait",
"Scope": "/",
"start_url": "/",
"icons": [
{
"src": "/favicon/apple-touch-icon-76x76.png",
"sizes": "76x76",
"type": "image/png"
}
{
"src": "/favicon/apple-touch-icon-120x120.png",
"sizes": "120x120",
"type": "image/png"
}
{
"src": "/favicon/apple-touch-icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
}
{
"src": "/favicon/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
]
}

以上代码修改博客名和图标位置即可。

部署后,检测一下

我的图标分辨率不够,有几个没有生成也就检测不到

jc

第三步 - 手动使用

在浏览器中打开博客首页

Chrome

点击右上角三点 → 更多工具 → 创建快捷方式

chrome

Chrome在地址栏输入Chrome://apps即可查看和管理应用。

Edge

点击右上角三点 → 应用 → 将此站作为应用安装

edg

Edge在地址栏输入edge://apps即可查看和管理应用。

电脑端效果

last

以上两浏览器区别:

  1. Edge有把网站安装成应用的功能按钮,但不会在桌面建立快捷方式。

  2. Chrome是建立快捷方式的同时也把网站安装成应用。

  3. 但都能成功调用图标(分辨率128x128)

Android

安卓端(华为平板)安装测试了华为浏览器、Chrome、Firefox、Yandex、Via、QQ浏览器、UC浏览器和360浏览器,只有 Chrome、Firefox、Yandex和华为浏览器 将网站发送到手机桌面能显示应用图标,其他浏览器均不会显示应用图标(说的就是某些国产大厂浏览器,啊呸!都去做推广广告赚钱去了呗)!!!

下面以华为浏览器简单举例设置桌面应用式的快捷方式。

Huawei Browser

点击右上角三点 → 添加至…或者添加至桌面即可

Huawei Browser

Huawei Browser

浏览器书签效果

Huawei Browser

安卓桌面效果

Huawei Browser

PS:
这几个浏览器测试过程坎坷啊,因为华为Mate pad安装应用后默认关闭所有权限,只有使用时app自动弹出开启才会开,然而创建快捷方式的权限一直没有触发开启,有好几个让我一直以为 发送到主屏幕 只是发到浏览器主页上🤔🤔🤔

最牛皮的是QQ和UC(UC还没测试完就卸载了)要先收藏网站,收藏网站又需要登录账号,然后才能发送到桌面………

结束语

因为不存在 service worker文件,也就没有离线缓存能力!!

可以说这只是一个好看得多的快捷方式,有一些 PWA 的样子和特性,只是徒有其表!

本文作者: Senorui

本文链接: https://senorui.top/posts/a4fb.html

版权声明: 本站所有文章除特别声明外,均为原创且采用【CC BY-NC-ND 4.0】许可协议,若转载请署名!

支持一下
感谢您支持Senorui哦!
  • 微信扫一扫
  • 支付宝扫一扫