PWA官網(wǎng)https://developers.google.com/web/progressive-web-apps

簡介

PWA(Progressive Web Apps )漸進式web應(yīng)用，具有Reliable（可靠的）、Fast（快速的）、Engaging（可參與的）
Reliable： 從用戶的主屏幕啟動時，無論網(wǎng)絡(luò)狀態(tài)如何，服務(wù)工作人員都可以立即加載Progressive Web App。
使用JavaScript編寫的服務(wù)工作者就像客戶端代理，可以控制緩存以及如何響應(yīng)資源請求。通過預(yù)先緩存關(guān)鍵資源，您可以消除對網(wǎng)絡(luò)的依賴，確保為您的用戶提供即時可靠的體驗。

Fast：如果加載時間超過3秒，53％的用戶將放棄網(wǎng)站！一旦加載，用戶就會期望它們快速 - 沒有janky滾動或響應(yīng)速度慢的界面。

Engaging：Progressive Web Apps可以安裝并在用戶的 主屏幕上顯示，無需應(yīng)用商店。它們通過Web應(yīng)用程序清單文件提供的幫助提供身臨其境的全屏體驗，甚至可以通過Web 推送通知重新吸引用戶 。
Web App Manifest允許您控制應(yīng)用程序的顯示方式及其啟動方式。您可以指定主屏幕圖標(biāo)，啟動應(yīng)用程序時要加載的頁面，屏幕方向，甚至是否顯示瀏覽器鑲邊。

主要技術(shù)

• Service Worker
• Web App Manifest
• Push Notification

Service Worker

Service worker是一個注冊在指定源和路徑下的事件驅(qū)動worker。它采用JavaScript控制關(guān)聯(lián)的頁面或者網(wǎng)站，攔截并修改訪問和資源請求，細粒度地緩存資源。你可以完全控制應(yīng)用在特定情形（最常見的情形是網(wǎng)絡(luò)不可用）下的表現(xiàn)。

Service worker運行在worker上下文，因此它不能訪問DOM。相對于驅(qū)動應(yīng)用的主JavaScript線程，它運行在其他線程中，所以不會造成阻塞。它設(shè)計為完全異步，同步API（如XHR和localStorage）不能在service worker中使用。

出于安全考量，Service workers只能由HTTPS承載，畢竟修改網(wǎng)絡(luò)請求的能力暴露給中間人攻擊會非常危險。在Firefox瀏覽器的用戶隱私模式，Service Worker不可用。

一些API及更多的描述可以參考https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API

Web App Manifest

Web應(yīng)用程序清單在一個JSON文本文件中提供有關(guān)應(yīng)用程序的信息（如名稱，作者，圖標(biāo)和描述）。manifest 的目的是將Web應(yīng)用程序安裝到設(shè)備的主屏幕，為用戶提供更快的訪問和更豐富的體驗。

Web應(yīng)用程序清單是被稱為漸進式Web應(yīng)用程序(PWA)的Web技術(shù)集合的一部分, 它們是可以安裝到設(shè)備的主屏幕的網(wǎng)絡(luò)應(yīng)用程序，而不需要用戶通過應(yīng)用商店，伴隨著其他功能, 比如離線可用和接收推送通知。

具體用法：
創(chuàng)建一個文件manifest.json
在html文件中的head中加上
<link rel="manifest" href="manifest.json">
在manifest.json文件中寫入

{
    "lang":"en-zh",
    "name":"我的首個PWA",
    "short_name":"我的PWA",
    "description":"描述我的PWA",
    "start_url":"/pwa_demo01",
    "display":"standalone",
    "background_color":"#fff",
    "theme_color":"#9c67fc",
    "icons":[
        {
            "src":"pwaIcon.jpg",
            "sizes":"1x1",
            "type":"image/png"
        }
    ]
}

lang : 語言類型（name、short_name）
name : 名稱
short_name : 當(dāng)位置不夠顯示name的時候替代的縮寫名稱
start_url : 添加到主屏幕后，啟動PWA進入的url
display : 顯示模式，fullscreen（全屏）、standalone（包括具有不同的窗口，在應(yīng)用程序啟動器中擁有自己的圖標(biāo)等，可用theme_color設(shè)置狀態(tài)欄顏色）、minimal-ui（顯示瀏覽器地址欄）、browser（默認設(shè)置，像網(wǎng)頁那樣打開）
background_color : 啟動pwa時的過渡頁面的背景
description : 對pwa的描述
icons : 添加至主屏幕時顯示的圖標(biāo)，src（圖標(biāo)路徑）、sizes（圖標(biāo)適用的大小，在我手機上添加到主屏幕時，顯示的是1x1）、type（圖片類型）

更多配置項請移步 https://developer.mozilla.org/zh-CN/docs/Web/Manifest 參考

Push Notification

Push Notification即消息推送