惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

P
Privacy & Cybersecurity Law Blog
人人都是产品经理
人人都是产品经理
The Cloudflare Blog
B
Blog RSS Feed
罗磊的独立博客
V
V2EX
V
Visual Studio Blog
博客园 - 叶小钗
W
WeLiveSecurity
小众软件
小众软件
K
Kaspersky official blog
美团技术团队
雷峰网
雷峰网
阮一峰的网络日志
阮一峰的网络日志
Martin Fowler
Martin Fowler
Recorded Future
Recorded Future
Project Zero
Project Zero
Hugging Face - Blog
Hugging Face - Blog
Engineering at Meta
Engineering at Meta
Security Latest
Security Latest
Microsoft Azure Blog
Microsoft Azure Blog
V
Vulnerabilities – Threatpost
月光博客
月光博客
博客园 - 三生石上(FineUI控件)
Help Net Security
Help Net Security
博客园 - Franky
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
F
Fortinet All Blogs
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Forbes - Security
Forbes - Security
M
MIT News - Artificial intelligence
H
Hacker News: Front Page
大猫的无限游戏
大猫的无限游戏
Vercel News
Vercel News
Spread Privacy
Spread Privacy
The Register - Security
The Register - Security
H
Hackread – Cybersecurity News, Data Breaches, AI and More
量子位
Google Online Security Blog
Google Online Security Blog
PCI Perspectives
PCI Perspectives
The Last Watchdog
The Last Watchdog
AI
AI
N
News | PayPal Newsroom
D
DataBreaches.Net
Cloudbric
Cloudbric
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
博客园 - 司徒正美
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
T
Tailwind CSS Blog

爱吃肉的猫

那就,再相逢 Butterfly的魔改教程:最新评论页 离歌不夜天 前端分享 - 滑动阻尼效果 Butterfly的魔改教程:右键菜单 音乐分享 - doi微醺氛围 Butterfly的魔改教程:动态相册页 近况记事 - 11 微信公众号:Ai大模型让回复更具智能化 近况记事 - 10 Healthy Love Butterfly的魔改教程:关于本站 近况记事 - 9 Butterfly的魔改教程:待办清单 TrollStore - 不掉签助手 近况记事 - 8 Twikoo评论回复邮件模版 过一个很特别的七夕 The Young Boy and the Sea
PWA:让你的网站变成桌面应用APP
亦小封 · 2023-10-28 · via 爱吃肉的猫

下班后闲来无事,博客的也完善的差不多了,便想着逛逛大佬们的博客寻求下新灵感,突然在 @张洪heo 那里看到一篇让网页支持iOS添加到主屏幕全屏应用,webapp启动图生成工具 的文章。
Butterfly原生的PWA配置比较精简,在某些方面的适配会有些问题,本站就一直没有启用PWA。洪哥这完善的PWA模块刚好可以弥补原生的问题,对于离线又或是响应来说,这最适合不过了。

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
link(rel="manifest" href=url_for(theme.pwa.manifest))
if(theme.pwa.theme_color)
meta(name="msapplication-TileColor" content=theme.pwa.theme_color)
if(theme.pwa.mask_icon)
link(rel="mask-icon" href=url_for(theme.pwa.mask_icon) color="#5bbad5")

if(theme.pwa.apple_touch_icon)
link(rel="apple-touch-icon" sizes="180x180" href=url_for(theme.pwa.apple_touch_icon))
link(rel="apple-touch-icon-precomposed", sizes="180x180", href=url_for(theme.pwa.apple_touch_icon))
if(theme.pwa.favicon_32_32)
link(rel="icon" type="image/png" sizes="32x32" href=url_for(theme.pwa.favicon_32_32))
if(theme.pwa.favicon_16_16)
link(rel="icon" type="image/png" sizes="16x16" href=url_for(theme.pwa.favicon_16_16))
if(theme.pwa.bookmark_icon)
link(rel="bookmark", href=url_for(theme.pwa.bookmark_icon))

if(theme.pwa.startup_image_enable)
if(theme.pwa.favicon_2048_2732)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2048_2732), media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)")
if(theme.pwa.favicon_2732_2048)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2732_2048), media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)")
if(theme.pwa.favicon_1668_2388)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1668_2388), media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)")
if(theme.pwa.favicon_2388_1668)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2388_1668), media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)")
if(theme.pwa.favicon_1536_2048)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1536_2048), media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)")
if(theme.pwa.favicon_2048_1536)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2048_1536), media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)")
if(theme.pwa.favicon_1668_2224)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1668_2224), media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)")
if(theme.pwa.favicon_2224_1668)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2224_1668), media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)")
if(theme.pwa.favicon_1620_2160)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1620_2160), media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)")
if(theme.pwa.favicon_2160_1620)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2160_1620), media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)")
if(theme.pwa.favicon_1290_2796)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1290_2796), media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)")
if(theme.pwa.favicon_2796_1290)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2796_1290), media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)")
if(theme.pwa.favicon_1179_2556)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1179_2556), media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)")
if(theme.pwa.favicon_2556_1179)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2556_1179), media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)")
if(theme.pwa.favicon_1248_2778)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1248_2778), media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)")
if(theme.pwa.favicon_2778_1248)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2778_1248), media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)")
if(theme.pwa.favicon_1170_2532)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1170_2532), media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)")
if(theme.pwa.favicon_2532_1170)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2532_1170), media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)")
if(theme.pwa.favicon_1125_2436)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1125_2436), media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)")
if(theme.pwa.favicon_2436_1125)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2436_1125), media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)")
if(theme.pwa.favicon_1242_2688)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1242_2688), media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)")
if(theme.pwa.favicon_2688_1242)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2688_1242), media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)")
if(theme.pwa.favicon_828_1792)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_828_1792), media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)")
if(theme.pwa.favicon_1792_828)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1792_828), media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)")
if(theme.pwa.favicon_1242_2208)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1242_2208), media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)")
if(theme.pwa.favicon_2208_1242)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2208_1242), media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)")
if(theme.pwa.favicon_750_1334)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_750_1334), media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)")
if(theme.pwa.favicon_1334_750)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1334_750), media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)")
if(theme.pwa.favicon_640_1136)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_640_1136), media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)")
if(theme.pwa.favicon_1136_640)
link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1136_640), media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)")