PWA实践

PWA基础

PWA应用是什么样子的？

在主屏幕、应用启动器、启动板或开始菜单上都有**图标**。
当您在设备上搜索应用时，此图标会显示。
会在一个独立的窗口中打开，该窗口完全**独立**于浏览器的界面。
可以与操作系统进行更高级别的集成，例如网址处理或标题栏自定义。
**离线**时也能使用。

应用内自定义安装

需要满足的条件

安装相关API兼容性表格

不兼容系统的交互处理？：
点击安装按钮 -> [ios-safari 安装引导] 或者 [跳转到指定页面]

判断是否已经安装好PWA？
const _global: any = window
// 是否已经安装好pwa
export const isInstalledPWA = () =>
  _global.matchMedia("(display-mode: window-controls-overlay)").matches ||
  _global.matchMedia("(display-mode: standalone)").matches ||
  _global.navigator?.standalone ||
  document.referrer.includes("android-app://")

"start_url": "/?from=homescreen",  // 启动网址，相对于manifest.json所在路径

roibest例子：
下载页面：https://demo-prod.roibest.com/5433766956/__roibest_install.html?channel_id=4&promote_url_id=6535205568&invite_code=&fbclid=20240221
应用启动页面: https://demo-prod.roibest.com/5433766956/index.html

chrome dev-web团队文档

pwa demo
https://github.com/MicrosoftEdge/Demos/tree/main/pwamp
https://developer.mozilla.org/en-US/docs/Web/Progressive_web_...

DDL

DDL延迟深度链接：传入不同的参数可以打开里面不同的页面

方案：

在落地页面实现
1.落地页做为start_url[应用启动的页面]
2.落地页状态【安装UI、iframe UI】
使用iframe展示home或作品详情等具体页面【这个页面的url由PWA JS库提供】

通信

service worker

缓存

web push

notification

兼容性问题

一. 手机操作系统类型

IOS、 Android、HarmonyOS、Symbian、Windows Phone、BlackBerry OS

二. 浏览器

1. 什么是网页？
   网页 = html + css + javascript
2. 网页用什么协议从服务器传输到用户设备上？
   超文本传输协议【HTTP/HTTPS】

3. 什么是浏览器？
   https://zhuanlan.zhihu.com/p/587788426

   是一套标准，这套标准可以运行html、css、javascript代码，这些内容可以通过超文本传输协议进行传输，通过浏览器的标准进行展现，能够让世界上任何使用浏览器的人都能够看到网页内容

   

4. 浏览器引擎、渲染引擎、javaScript引擎？
   浏览器引擎 = 渲染引擎 + javaScript引擎 + ...

主流渲染引擎：Blink【Chrome、Edge 等浏览器，基于Webkit但进行了大量改进，**最新版本Chromium内核**】、WebKit：【Safari 浏览器】、‌Trident【微软开发的渲染引擎，被IE浏览器、360安全浏览器、搜狗高速浏览器、百度浏览器和UC浏览器等使用】、Gecko【Mozilla Firefox 的渲染引擎】

主流javaScript引擎：V8【 Google 开发，用于 Chrome 浏览器和 Node.js】、SpiderMonkey【 Mozilla Firefox 浏览器使用】、JavaScriptCore【APPLE开发，WebKit 中使用】

！！！一般浏览器引擎默认是渲染引擎

多页页面之前数据通信

1. URL参数传递数据
2. LocalStorage或SessionStorage
3. PostMessage API【跨文档通信机制】：如果你的页面是通过iframe嵌套在另一个页面中，或者是由同一域名下的不同页面组成，你可以使用PostMessage API来进行跨页面通信。通过postMessage方法发送消息，然后在目标页面中监听message事件来接收并处理消息。
4. 服务器进行通信：如果需要在不同页面之间进行实时通信或共享数据，可以通过服务器端建立一个后端服务，并让不同页面通过WebSocket或AJAX等技术与后端进行通信，从而实现页面之间的数据交换。