PWA

[yaofly2012]

PWA(Progressive Web App)

是什么？

A Progressive Web App (PWA) is a website that can be installed on your device and provide an app-like experience.

PWA只是个概念，目标是让web页面具有类似APP的体验。它是一系列技术方案的集合，你可以逐步采用这些技术方案，使得web站点渐进式的具备类似app能力。

1. 可靠（Reliable），无关网络环境；
2. 快（Fast），快速响应，且动画平滑流程；
3. 有粘性（Engaging），用户可以添加到主屏/桌面，接收通知。

一切都是为了改善web用户体验

能力/Features

1. 可安装，即主屏/桌面图标（Web App Manifest）
2. 离线可用（Service Worker）
3. 通知（Push Api & Notification Api）

其他能力可参考What PWA Can Do Today

兼容性

每种能力具有不同的兼容性。

1. App Manifest 截止到目前（2023/08/21）Safari还是不支持。

参考

1. web.dev Learn PWA系列教程
2. PWA将带来新一轮大前端技术洗牌？
3. How Progressive Web Apps can drive business success?
4. 推广 PWA 安装的模式
5. MDN: Web app manifests
6. DEMO

• squoosh
• What PWA Can Do Today

11. Baidu Lavas 虽然Lavas已死，但可参考里面的文档

[yaofly2012]

Web app manifest (PWA Installation)

可以将页面添加到设备首屏或者桌面。

Add to Home Screen/Desktop

两步即可实现PWA Add to Home Screen：

1. 配置manifest文件
2. 页面链接manifest文件

<link rel="manifest" href="Path to manifest.json">

配置manifest文件

动态manifest

利用GET接口动态生成manifest JSON内容：

<link rel="manifest" href="A get api to get manifest.json">

安装提示

浏览器自带了安装提示的方式（比如Chrome PC会在地址栏里展示个标记）。但默认提示的样式估计不满足产品需求（并且浏览器对Promotional相关字段支持程度不一样，这就需要自定义一个满足需求且样式和交互一致的安装提醒。

3步实现自定义安装提示

1. Listen for thebeforeinstallprompt event.
2. Save it (you'll need it later).
3. Trigger it from your UI.

实际实现可能会复杂一些，可参考3rd库。

什么时候触发beforeinstallprompt事件？

1. 支持PWA安装（Chrome and Edge on iOS and iPadOS do not support PWA installation, so the beforeinstallprompt event can't fire）
2. 未安装
3. 达到安装标准

如何判断已安装？

有点困难呢

1. 已安装不会触发beforeinstallprompt事件，但是反之不成立；
2. 利用display-mode媒体查询可以控制不同模式下的样式。
3. 其他参考addtohomescreen.js:

	platform.isChromium = "onbeforeinstallprompt" in window;
	platform.isInWebAppiOS = window.navigator.standalone === true;
	platform.isInWebAppChrome =
window.matchMedia("(display-mode: fullscreen)").matches ||
window.matchMedia("(display-mode: standalone)").matches ||
window.matchMedia("(display-mode: minimal-ui)").matches;
	platform.isMobileSafari =
platform.isIDevice &&
_ua.indexOf("Safari") > -1 &&
_ua.indexOf("CriOS") < 0;
	platform.isStandalone = platform.isInWebAppiOS || platform.isInWebAppChrome;
	platform.isiPad = platform.isMobileSafari && _ua.indexOf("iPad") > -1;
	platform.isiPhone = platform.isMobileSafari && _ua.indexOf("iPad") === -1;
	platform.isCompatible =
platform.isChromium ||
platform.isMobileSafari ||
platform.isSamsung ||
platform.isFireFox ||
platform.isOpera ||
platform.isIDevice;

综上在回答【如何判断已安装？】前先要弄清楚这样做的目的是啥，然后根据目的选择合适的判断方式。

不支持beforeinstallprompt事件怎么办？

兼容性
主要是iOS浏览器不支持，可以单独处理iOS设备（如下兼容性）。

兼容性

Safari

很遗憾截止到目前（2023/08/21）Safari还不支持Web app manifest。好在Safari提供了自己的【Add to Home Screen】方式:

这就需要开发者特殊对待Safari（最大化Web App可安装）:

1. 添加apple-touch-icon标签，可参考iOS and iPadOS installation；
2. 引导用户如何操作【Add to Home Screen】，可参考What PWA Can Do Today

测试/调试

调试方式：

1. Chrome开发者工具：Application/Manifest

参考

1. Installation prompt
2. What does it take to be installable?
3. How to provide your own in-app install experience
4. How to Integrate Add to Home Screen Into Your PWA
5. 3rd库
6. 库：add-to-home-screen
7. PWA Manifest Generator
8. navigator.standalone 是代表什么意思？