MoeCEO

MoeCEO

Typecho 启用 PWA 渐进式网络应用

15
0
0
2024-06-15

起因

之前通过喵斯基博客了解到了Service Workers这项浏览器缓存技术,从而使得本站的访问速度变快了许多。我也写了一篇Typecho 启用 Service Workers 浏览器缓存加速的博文。

仅仅Service Workers还无法将其效益最大化。PWA这个词对于很多人来说比较陌生。但是它却是小程序的鼻祖。

如今,享受着微信等APP内置的小程序的中国,PWA逐渐走向消亡。

PWA具有强大的生产能力,堪称图片版的Twitter的Pinterest将他们的移动网站重建为PWA,核心参与度增加了60%,用户产生的广告收入增加了44%,花费的时间也增加了40%;2016年初AliExpress开始与Google团队合作,推动PWA技术在AliExpress上的落地;结果是非常令人惊奇和满意的。AliExpress 发现新用户的转换率增加了104%。在Safari的转化率也上升了82%。现在用户每次访问的页面数量是原先的两倍,也大大提升了用户浏览页面的时间。

你会发现PWA的应用广泛的被国外公司所使用。其轻便的大小使得公司能够快速的将网站转向APP客户端。极大的减少了开发时间,且加快用户访问速度的同时,用户愿意留在观看网站内容的时间就变多了。

其实,只要仔细观察变回发现打开支持PWA网站后,浏览器(以Edge举例)的网址栏右侧会出现一个其他网站没有的LOGO选项,鼠标悬停可以看到“应用程序可用,安装XXXX”。

介绍

PWA全称为Progressive Web App,中文译为渐进式Web APP。即通过Web技术实现与原生App相近的用户体验的渐进式网络App。

PWA本质上就是一种网页应用。所以,PWA的“渐进式”其实指的是一种渐进增强的理念。

渐进增强:针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能以达到更好的体验。

启用

优先条件

网站需要先启用Service Workers。自然,Service Workers的先决条件SSL支持是必须的。

创建manifest.json文件

正确配置manifest.json文件对于PWA的安装过程至关重要。manifest.json包含PWA的关键字段,目的是提供将应用添加至桌面的功能,从而使用户可以无需下载如同原生应用一般从桌面打开web应用。

请根据下面示例,创建manifest.json文件,保存至网站根目录。

{
    "theme_color": "#febfde",
    "background_color": "#ffffff",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "name": "\u51cc\u6e0a\u4e4b\u5c18",
    "short_name": "MoeSite",
    "description": "\u4e00\u4e2a\u91d1\u878d\u79d1\u7684\u79d1\u6280\u5b85~~~moemoe~qu~~~~~~",
    "icons": [
        {
            "src": "/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

其实还可以通过网页在线生成manifest.json文件。【https://www.simicart.com/manifest-generator.html】

涉及到的字段如下:

字段

说明

scope

限制应用访问范围/表示允许访问所有路径

name

定义应用程序的名称(尽量简短)

short_name

定义应用程序的简称(建议10字符以内)

start_url

应用程序启动默认进入的页面路径/表示首页

display

显示方式:fullscreen(无 UI),而 standalone、minimal-ui 性能损耗较低,但状态栏仍可能会显示。browser:以传统浏览器运行支持新窗口打开。

description

应用程序描述

theme_color

定义应用程序的默认主题颜色

background_color

应用程序预定义的背景颜色

icons

应用图标可以配置不同尺寸、不同类型的图标。iOS 需要 4 种不同尺寸的图标:120 x 120 像素、180 x 180 像素、167 x 167 像素、152 x 152 像素。Google Chrome 需要至少 2 种不同的尺寸图标:512 x 512 像素、192 x 192 像素。

引用manifest.json文件

在网站模版通常是head.php文件中<head></head>之间加入以下代码:

<link rel="manifest" href="/manifest.json">

引用文件让所有支持的浏览器可以正确识别manifest.json文件,目前浏览器支持情况:Chrome、Edge、An­droid 浏览器、An­droid 版 Chrome、An­droid 版 Fire­fox 已完全支持,Sa­fari 部分支持。

考虑到 iOS Sa­fari 添加主屏幕会获取不到图标,需要在head.php文件中<head></head>之间追加以下代码:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="凌渊之尘">
<link rel="apple-touch-icon" href="/images/icon-144x144.png">

如果想要 Win­dows 10 贴片图标,则需要在`head.php`文件中<head></head>之间追加以下代码:

<meta name="msapplication-TileImage" content="/images/icon-144x144.png">
<meta name="msapplication-TileColor" content="#2F3BA2">

最终,需要在head.php文件中<head></head>之间添加的所有代码为:

<link rel="manifest" href="/manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="凌渊之尘">
<meta name="msapplication-TileImage" content="/images/icon-144x144.png">
<meta name="msapplication-TileColor" content="#2F3BA2">

效果