PWA

Question

PWA

yaofly2012 opened this issue a year ago · comments

yq commented a year ago

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能力。

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

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

能力/Features

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

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

兼容性

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

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

参考

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

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

yq · Answer 1 · Mon Aug 21 2023 15:00:43 GMT+0800 (China Standard Time)

Web app manifest (PWA Installation)

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

Add to Home Screen/Desktop

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

配置manifest文件
页面链接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步实现自定义安装提示

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

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

什么时候触发`beforeinstallprompt`事件？

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

如何判断已安装？

有点困难呢

已安装不会触发beforeinstallprompt事件，但是反之不成立；
利用display-mode媒体查询可以控制不同模式下的样式。
其他参考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可安装）:

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

测试/调试

调试方式：

Chrome开发者工具：Application/Manifest

PWA