文章目錄

• • 什么是PWA應用
  • 核心技術清單
  • 如何添加PWA應用到手機
  • • 蘋果手機:
    • 安卓手機:
  • PWA應用VS微信小程序
  • 參考資料

什么是PWA應用

PWA（Progressive Web App）是一種理念，使用多種技術來增強web app的功能，可以讓網站的體驗變得更好，能夠模擬一些原生功能，比如通知推送。在移動端利用標準化框架，讓網頁應用呈現和原生應用相似的體驗。

PWA不能包含原生OS相關代碼。PWA仍然是網站，只是在緩存、通知、后臺功能等方面表現更好。所以 PWA 不是指一項技術，而是引用一系列的新技術進行改進web。

核心技術清單

1、web app mainfest
一個程序清單的JSON文件（即項目中引入的manifest.json）， 實現在移動端可以將網站像app一樣添加到主屏幕上

2、service worker
pwa的核心技術，可以讓網頁在離線或者網速比較慢的情況下依然可以訪問

3、Cache storage
用來做緩存，service worker 能夠實現離線訪問主要就是依賴于緩存策略，緩存資源

4、常見的緩存策略
確定哪些資源需要走緩存，那些資源需要走網絡

5、notification
用來做通知的，在網頁下面也可以實現消息通知

如何添加PWA應用到手機

蘋果手機:

使用 Safari 打開相應app網頁，點擊:凸，然后選擇+添加到主屏幕按鈕。

比如：使用 Safari 打開微博網頁，點擊底部導航的 凸 按鈕，選擇添加到主屏幕，你的主屏幕上就會得到一個微博的 APP

安卓手機:

使用Chrome瀏覽器打開相應app網頁，點擊右上角:按鈕，然后選擇“添加到主屏幕"。

目前百度，QQ， UC瀏覽器均不(完全)支持添加到主屏幕功能。

如果沒能成功添加到手機屏幕，請檢查并確保開啟了相應瀏覽器的“桌面快捷方式"和"安裝應用未知來源”權限。某些網站的添加速度可能會比其它網站稍慢，您可以嘗試多添加幾次。

小米手機(MIUI10) 修改chrome權限:打開任務管理器，長按chrome圖標，選擇設置按鈕;進入系統設置界面，選擇"權限管理”，查找并開啟"桌面快捷方式";返回，選擇"安裝應用未知來源”，點擊允許。

PWA應用VS微信小程序

微信小程序源于PWA應用標準，此標準是Google提出并實現的。目前"現代”的瀏覽器都支持這一標準。然而微信小程序確沒有完全支持這一標準，再加上微信對于小程序的各種權限限制。從而導致小程序無法構建一些復雜的功能，在功能性上無法與原生app相比。而PWA應用卻幾乎具有與原生app一樣全面的功能。

參考資料

https://blog.csdn.net/studentenglish/article/details/103174770

https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps

總結

以上是生活随笔為你收集整理的PWA应用入个门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。