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.htmlchrome 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
二. 瀏覽器
- 什麼是網頁？
網頁 = html + css + javascript - 網頁用什麼協議從服務器傳輸到用户設備上？
超文本傳輸協議【HTTP/HTTPS】 -
什麼是瀏覽器？
https://zhuanlan.zhihu.com/p/587788426是一套標準，這套標準可以運行html、css、javascript代碼，這些內容可以通過超文本傳輸協議進行傳輸，通過瀏覽器的標準進行展現，能夠讓世界上任何使用瀏覽器的人都能夠看到網頁內容 - 瀏覽器引擎、渲染引擎、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 中使用】！！！一般瀏覽器引擎默認是渲染引擎
多頁頁面之前數據通信
- URL參數傳遞數據
- LocalStorage或SessionStorage
- PostMessage API【跨文檔通信機制】：如果你的頁面是通過iframe嵌套在另一個頁面中，或者是由同一域名下的不同頁面組成，你可以使用PostMessage API來進行跨頁面通信。通過postMessage方法發送消息，然後在目標頁面中監聽message事件來接收並處理消息。
- 服務器進行通信：如果需要在不同頁面之間進行實時通信或共享數據，可以通過服務器端建立一個後端服務，並讓不同頁面通過WebSocket或AJAX等技術與後端進行通信，從而實現頁面之間的數據交換。
