概念：
pwa 的關鍵技術在瀏覽器中的支援度：
2、service worker 的支援度達到 89.84%
3、notifications api 的支援度達到 75.17%
4、push api 的支援度達到 78.06%
產生原因：
移動時代
主要特點：
1、可靠：即使在網路不穩定甚至斷網的環境下，也能瞬間載入並展現
2、使用者體驗：快速響應，具有平滑的過渡動畫及使用者操作的反饋
主要特性：
1、漸進式：適用於所有瀏覽器，因為它是以漸進式增強作為宗旨開發的
2、連線無關性：能夠借助 service worker 在離線或者網路較差的情況下正常訪問
4、持續更新：始終是最新的，無版本和更新問題
5、安全：通過 https 協議提供服務，防止窺探，確保內容不被篡改
6、可索引：manifest 檔案和 service worker 可以讓搜尋引擎索引到，從而將其識別為『應用』
7、黏性：通過推送離線通知等，可以讓使用者回流
最低要求：
1、站點需要使用https
2、頁面需要響應式，能夠在平板和移動裝置上都具有良好的瀏覽體驗
3、所有的 url在斷網的情況下有內容展現，不會展現瀏覽器預設頁面
5、即使在 3g 網路下，頁面載入要快，可互動時間要短
6、在主流瀏覽器下都能正常展現
7、動畫要流暢，有使用者操作反饋
8、每個頁面都有獨立的 url
核心技術：
1、
(1)開發者可以定義使用者新增到主屏的圖示、應用名稱等
(3)體現在**上主要是乙個json 檔案：manifest.json，開發者可以在這個 json 檔案中配置 pwa 的相關資訊
2、service worker：在 pwa 中最重要的功能就是離線與快取
(1)乙個特殊的 worker 執行緒，獨立於當前網頁主線程，有自己的執行上下文
(2)一旦被安裝，就永遠存在，除非顯示取消註冊
(3)使用到的時候瀏覽器會自動喚醒，不用的時候自動休眠
(4)可攔截並**請求和處理返回，可以操作本地快取，如 cachestorage，indexeddb 等
(5)離線內容開發者可控
(6)能接受伺服器推送的離線訊息
(7)非同步實現，內部介面非同步化基本是通過promise實現
(8)不能直接操作 dom
(9)必須在https環境下才能工作
3、離線通知：
(1)離線通知是指在使用者沒有開啟 pwa 站點的情況下，也能接受到伺服器推送過來的通知並展現給使用者
(2)包括了兩部分，離線推送和展現通知，分別是web push和notification api
(3)瀏覽器在接受到對應的訊息服務中心推送過來的離線訊息時，會喚醒對應站點註冊的service worker，
開發者可以在 service worker 檔案中處理接受到的請求，顯示通知
4、
讓使用者一進入 pwa 就能快速看到 pwa 的整體框架
使用一些能夠快速渲染的
靜態/樣式/色塊/部分真實內容進行佔位，讓使用者對真實內容區域有心理預期
(4)特點：
·在頁面載入初期預先渲染內容，提公升感官上的體驗
·一般情況骨架屏和實際內容的結構是類似的，因此之後的切換不會過於突兀
·只需要簡單的 css 支援 (涉及懶載入可能還需要 js )，不要求 https 協議，沒有額外的學習和維護成本
·若頁面採用元件化開發，每個元件可根據自身狀態定義自身的骨架屏及其切換時機，同時維持了元件之間的獨立性
PWA 學習筆記
一.基本介紹 1.漸進式 適用所有瀏覽器，因為它是以漸進式增強作為宗旨開發的，不支援的瀏覽器不影響 2.流暢 能夠借助service worker在離線或者網路較差的情況下正常訪問 5.粘性 通過推送離線通知等，可以讓使用者回流 1.需要index.html引入manifest.json檔案 2.例...
PWA筆記和簡單例項
一 manifest的使用和介紹 1 建立manifest.json檔案，並進行配置，常用配置引數有 應用圖示 background color 背景色 theme color 主題色 display standalone 顯示模式 2 在index.html中引入manifest.json檔案 二...
PWA技術深入學習
當manifest.json更新的時候需要更新sw的版本號,手機上操作不流暢,經常出現不能新增到桌面,chrome瀏覽器,華為手機 未來會變好 主螢幕上新增的快速入口能夠及時隨頁面更新依賴的gcm服務在國內無法使用const subscribeoptions registration.pushman...