當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

PWA桌面应用开发

發布時間：2024/3/24 编程问答 72 豆豆

生活随笔收集整理的這篇文章主要介紹了 PWA桌面应用开发小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

什么是PWA

PWA(Progressive Web App), 漸進式web應用程序，是提升 Web App 的體驗的一種新方法，能給用戶原生應用的體驗。

PWA 能做到原生應用的體驗不是靠特指某一項技術，而是經過應用一些新技術進行改進，在安全、性能和體驗三個方面都有很大提升，PWA 本質上是 Web App，借助一些新技術也具備了 Native App 的一些特性，兼具 Web App 和 Native App 的優點。

PWA 的主要特點包括下面三點：

可靠 - 即使在不穩定的網絡環境下，也能瞬間加載并展現

體驗 - 快速響應，并且有平滑的動畫響應用戶的操作

粘性 - 像設備上的原生應用，具有沉浸式的用戶體驗，用戶可以添加到桌面

PWA 的主要特征：

漸進式：適用于所有瀏覽器，因為它是以漸進式增強作為核心宗旨來開發的

自適應：適用于任何機型，桌面設備、移動設備、平板電腦或任何未來設備

連接無關性：能夠借助 Service Worker 在離線或者網絡較差的情況下正常訪問

類原生應用：由于是在 App Shell 模型基礎上開發，因此應具有 Native App 的交互，給用戶 Native App 的體驗

持續更新：始終是最新的，無版本和更新問題

安全：通過 HTTPS 協議提供服務，防止窺探，確保內容不被篡改

可索引：manifest 文件和 Service Worker 可以讓搜索引擎索引到，從而將其識別為『應用』

黏性：通過推送離線通知等，可以讓用戶回流

可安裝：用戶可以添加常用的 Web App 到桌面，免去到應用商店下載的麻煩

可鏈接：通過鏈接即可分享內容，無需下載安裝

簡單的說，其實pwa就是可以做成類似于app的小應用，可以自己設置名字和圖標，只要在瀏覽器的地址欄后面點擊安裝就可以安裝到桌面（輕量，或許有幾百kb的緩存數據），即開即用，省去了去軟件商店安裝的過程，還不用上架軟件商店就可以有原生app的體驗。

PWA核心技術

1、Web App Manifest：

(1)開發者可以定義用戶添加到主屏的圖標、應用名稱等(2)允許開發者配置隱藏瀏覽器多余的 UI（地址欄，導航欄等），讓 PWA 具有和 Native App 一樣的沉浸式體驗(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、App Shell 和骨架屏：

(1)App Shell 是 PWA 強調的一個非常重要的設計理念，它能夠縮短用戶進入頁面時的白屏時間，讓用戶一進入 PWA 就能快速看到 PWA 的整體框架(2)骨架屏（App Skeleton），也是提升首屏體驗的有效方式。原理是在真實內容渲染完成前，使用一些能夠快速渲染的靜態圖片/樣式/色塊/部分真實內容進行占位，讓用戶對真實內容區域有心理預期(3)App Shell 和骨架屏相輔相成，App Shell 顯示頁面的外框部分，初始內容由骨架屏來填充，保證主體內容區域不留白(4)特點：·在頁面加載初期預先渲染內容，提升感官上的體驗·一般情況骨架屏和實際內容的結構是類似的，因此之后的切換不會過于突兀·只需要簡單的 CSS 支持 (涉及圖片懶加載可能還需要 JS )，不要求 HTTPS 協議，沒有額外的學習和維護成本·若頁面采用組件化開發，每個組件可根據自身狀態定義自身的骨架屏及其切換時機，同時維持了組件之間的獨立性

如何使用PWA進行開發

此處我們將在Vue項目上實踐開發PWA應用

剛開始我們肯定要安裝pwa插件，在命令行中輸入 vue add @vue/pwa 命令,就可以安裝pwa插件以及相關依賴包和文件。
在pwa插件安裝成功后生成的文件包括：一些vue的logo圖片、manifest.json、registerServiceWorker.js。

vue.config.js 文件中配置pwa，詳情查看

pwa: {name: "Trist-PWA", // app名稱// window 8 磁貼顏色msTileColor: "",//手機最上方顯示運營商及電量、時間等這一欄的顏色，主題顏色，應用程序的默認主題顏色themeColor: "#2c2b38",appleMobileWebAppStatusBarStyle: 'black',appleMobileWebAppCapable: 'yes',// manifest.json配置（僅針對安卓有效）manifestOptions: {"name": "Trist-PWA", // app完整名稱"short_name": "Trist", // app短名稱"description": "Trist的PWA", // app描述"start_url": ".", // 啟動網址//定義瀏覽器的顯示模式，取值為 standalone:隱藏瀏覽器UI，fullscreen:全屏模式，browser:瀏覽器模式，minimal-ui: ios中在網頁加載時隱藏頂部的地址欄和底部的導航欄"display": "standalone",// 主題顏色，用于控制瀏覽器地址欄著色"theme_color": "#2c2b38",// 應用加載之前的背景色，用于應用啟動時的過渡"background_color": "#f4f4f4",// 桌面圖標（安卓）"icons": [{"src": `./logo-36.png`,"sizes": "36x36","type": "image/png",},{"src": `./logo-72.png`,"sizes": "72x72","type": "image/png",},{"src": `./logo-144.png`,"sizes": "144x144","type": "image/png",},{"src": `./logo-192.png`,"sizes": "192x192","type": "image/png"},],},iconPaths: {faviconSVG: null,// icofavicon32: null,favicon16: null,// 桌面應用圖標（ios）appleTouchIcon: `./logo-144.png`,maskIcon: null,// window 8 磁貼圖標msTileImage: null},workboxPluginMode: 'GenerateSW', // 有‘GenerateSW’模式，也可以定義為‘InjectManifest’模式。但是需自己寫SW.js文件進行配置workboxOptions: {importWorkboxFrom: 'cdn', //從''cdn"導入workbox,也可以‘local’skipWaiting: true, // 安裝完SW不等待直接接管網站clientsClaim: true,// navigateFallback: '/index.html',exclude: [/\.(?:png|jpg|jpeg|svg|html|js)$/], //在預緩存中排除圖片// 定義運行時緩存runtimeCaching: [{urlPattern: new RegExp('^https://cdn'),handler: 'NetworkFirst',options: {networkTimeoutSeconds: 20,cacheName: 'cdn-cache',cacheableResponse: {statuses: [200]}}},// 如果你需要從網絡中完成特定請求，則只使用網絡策略{urlPattern: new RegExp(/.*\.html/),handler: 'networkOnly'}]}}

注冊service worker。
安裝pwa插件時會生成一個registerServiceWorker.js（src文件下）文件并在main.js中添加導入，這個文件中自動生成了注冊service worker的代碼。其中默認生成的service worker名稱為service-worker.js，可以修改為自定義的service worker，如sw.js。

PWA的支持

瀏覽器對技術支持還不夠全面，不是每一款游覽器都能100%的支持所有PWA，國內一些手機廠商對PWA的技術支持也不一。

在IOS中：

無法后臺同步
不支持 fullscreen（全屏顯示）和 minimal-ui
無法鎖定 PWA 應用的方向，豎屏還是橫屏
無法改變狀態欄的顏色
如果 PWA 應用沒有后退的手勢，將無法切換頁面
沒有啟動動畫
不支持透明圖標
…

由于只依賴 Safari 運行的做法繞過了蘋果對軟件的審核機制， PWA 應用和原生應用在使用的體驗上會存在差異。比如，iOS 上最新的人臉識別的 API 在 PWA 應用上就無法得到支持。所以，現階段，PWA 應用在 iOS 11.3 上還只能調用有限的 API，比如：

地理信息定位
傳感器（陀螺儀，加速度計，磁力儀）
相機
音頻輸出
語音合成（僅連接耳機）
Apple Pay

由此可見，iOS 11.3 所支持的 PWA 應用和 Android 所支持的是有許多的區別的。

和 Android 支持的 PWA 應用的區別
從發展程度來看，Android 上的 PWA 應用由于 Chrome 而支持得早，所以 Android 上的 PWA 應用不光權限更大而且更加符合 PWA 規范。通過 iOS 和 Android 兩個平臺的簡單對比，我們可以知道 iOS 支持的 PWA 應用在這些方面是不足的：

在 Android 上能夠儲存超過 50 MB 的數據和文件；iOS 上幾周不使用 PWA 應用后緩存的文件將被釋放
在 Android 上有后臺同步和離線消息推送功能；iOS 無法保留后臺，更無法獲得消息推送
在 Android 上有邀請用戶安裝 PWA 應用的提示；iOS 只會引導用戶從 App Store 下載
在 Android 上的設置里有 PWA 應用的數據使用量；iOS 都在包含在 Safari 里
在 Android 上能夠以獨立模式打開 PWA 而不是瀏覽器；iOS 不會識別你的 URL 是不是 PWA
在 Android 上一個 PWA 只能安裝一次；iOS 可以多次安裝
在 Android 上能夠有藍牙訪問、語音識別等功能；iOS 沒有藍牙、Touch ID、Face ID、ARKit、電池信息