資訊專欄INFORMATION COLUMN
摘要：簡稱，是提升的體驗的一種新方法，能給用戶原生應用的體驗。當網站以這種方式啟動時它具有唯一的圖標和名稱，以便用戶將其與其他網站區分開來。表示啟動時的方向，橫屏豎屏等，具體參數值可參考文檔。下一篇文章中，主要講述在實踐中的重要能力。
這周，Chrome 70正式版本發布，Progressive Web Apps（PWA）已經正式支持到Windows 10平臺，然而，早在前幾個版本之前，Chrome就已經通過chrome://flags支持開啟實驗性的功能，早就支持在Windows 10平臺上安裝Progressive Web Apps（PWA）。谷歌表示安裝在桌面的網頁應用使用體驗非常接近于本地應用，并且應用的服務商可以緩存所有資源因此這些PWA應用有很好的兼容性和可靠性。
在上一篇文章Service Worker學習與實踐（一）——離線緩存中，已經講到Service Worker的生命周期、如何創建、激活、更新Web應用程序的Service Worker，并且給出了一個簡單的示例來說明使用Service Worker來實現離線緩存的原理，在這篇文章里，主要是對Service Worker實現原生應用程序的能力做出一定解析，下一篇文章，將通過一個例子闡述如何使用Service Worker實現消息推送功能。
Progressive Web Apps（PWA）Progressive Web App, 簡稱 PWA，是提升Web App的體驗的一種新方法，能給用戶原生應用的體驗。
PWA能做到原生應用的體驗不是靠特指某一項技術，而是經過應用一些新技術進行改進，在安全、性能和體驗三個方面都有很大提升，PWA本質上是Web App，借助一些新技術也具備了Native App的一些特性，兼具Web App和Native App的優點。
PWA的主要特點包括下面三點：
可靠 - 即使在不穩定的網絡環境下，也能瞬間加載并展現
體驗 - 快速響應，并且有平滑的動畫響應用戶的操作
粘性 - 像設備上的原生應用，具有沉浸式的用戶體驗，用戶可以添加到桌面
PWA本身強調漸進式，并不要求一次性達到安全、性能和體驗上的所有要求，開發者可以通過PWA Checklist查看現有的特征。
通過上面的PWA Checklist，總結起來，PWA大致有以下的優勢：
體驗：通過Service Worker配合Cache Storage API，保證了PWA首屏的加載效率，甚至配合本地存儲可以支持離線應用；
粘性：PWA是可以安裝的，用戶點擊安裝到桌面后，會在桌面創建一個 PWA 應用，并且不需要從應用商店下載，可以借助Web App Manifest提供給用戶和Native App一樣的沉浸式體驗，可以通過給用戶發送離線通知，讓用戶回流；
漸進式：適用于大多數現代瀏覽器，隨著瀏覽器版本的迭代，其功能是漸進增強的；
無版本問題：如Web應用的優勢，更新版本只需要更新應用程序對應的靜態文件即可，Service Worker會幫助我們進行更新；
跨平臺：Windows、Mac OSX、Android、IOS，一套代碼，多處使用；
消息推送：即使用戶已經關閉應用程序，仍然可以對用戶進行消息推送；
總的說來，只要Web應用支持的功能，對于PWA而言，基本都支持，此外，還提供了原生能力。
使用PWA manifest添加桌面入口注意這里說的manifest不是指的manifest緩存，這個manifest是一個JSON文件，開發者可以利用它控制在用戶想要看到應用的區域（例如移動設備主屏幕）中如何向用戶顯示網絡應用或網站，指示用戶可以啟動哪些功能，以及定義其在啟動時的外觀。
manifest提供了將網站書簽保存到設備主屏幕的功能。當網站以這種方式啟動時：
它具有唯一的圖標和名稱，以便用戶將其與其他網站區分開來。
它會在下載資源或從緩存恢復資源時向用戶顯示某些信息。
它會向瀏覽器提供默認顯示特性，以避免網站資源可用時的過渡過于生硬。
下面是我的博客網站的manifest.json文件，作為桌面入口配置文件的示例：
{
"name": "Counterxing",
"short_name": "Counterxing",
"description": "Why did you encounter me?",
"start_url": "/index.html",
"display": "standalone",
"orientation": "any",
"background_color": "#ACE",
"theme_color": "#ACE",
"icons": [{
"src": "/images/logo/logo072.png",
"sizes": "72x72",
"type": "image/png"
}, {
"src": "/images/logo/logo152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "/images/logo/logo192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "/images/logo/logo256.png",
"sizes": "256x256",
"type": "image/png"
}, {
"src": "/images/logo/logo512.png",
"sizes": "512x512",
"type": "image/png"
}]
}
上面的字段含義也不用多解釋了，大致就是啟動的icon樣式，應用名稱、簡寫名稱與描述等，其中必須確保有short_name和name。此外，最好設定好start_url，表示啟動的根頁面路徑，如果不添加，則是使用當前路徑。
display為standalone，則會隱藏瀏覽器的UI界面，如果設置display為browser，則啟動時保存瀏覽器的UI界面。
orientation表示啟動時的方向，橫屏、豎屏等，具體參數值可參考文檔。
background_color和theme_color表示應用程序的背景顏色和主題顏色。
在創建好manifest.json后，將、使用link標簽添加到應用程序的所有頁面上，
安裝到桌面 桌面端（以Mac OSX為例）只有注冊、激活了Service Worker的網站才能夠安裝到桌面，在Chrome 70版本之前，需要手動開啟實驗性功能，步驟如下：
進入chrome://flags
找到Desktop PWAs，選擇Enabled
此時，進入一個支持PWA的網站（例如Google I/O），在Chrome瀏覽器右上角，點擊安裝。即可安裝到桌面。這里以我的博客為例：
可以到awesome-pwa查找目前支持PWA的網站列表
接著點擊安裝：
這樣，一個PWA應用就安裝到你的機器上了，這里我的操作系統為Mac OSX，應用程序可以通過Launchpad打開，在Windows也是同理的，會被安裝到桌面上，可通過開始菜單找到應用程序。
打開應用程序，發現其與原始應用幾乎沒有任何差距：
Windows與上述方法類似，這里就不做過多闡述移動端（以IOS為例）
由于當初蘋果推出PWA時，并沒有一個統一的manifest的規范，最開始的設計是通過meta和link標簽來設定應用的對應參數的，所以，在移動端上的PWA應用，為了兼容Windows Phone和iPhone，需要在所有頁面的HTML的head中添加以下的標簽：
添加好后，就可以體驗我們的PWA了！
IOS在11.3版本之后也支持PWA了，知道這一消息的我，卸載了手機上很多軟件，立刻體驗上了PWA。
這里以豆瓣移動端為例使用Safiri瀏覽器打開一個網站，點擊下方分享圖標，選擇添加到主屏幕。
然后在新彈出的一個瀏覽器頁面，選擇添加：
就以上簡短的步驟，移動端上的一個PWA桌面應用就添加好了，趕緊體驗吧！
小結本文是筆者寫的Service Worker學習與實踐系列文章的第二篇，主要講述的是配合Service Worker使用的PWA的優勢，如何配置manifest.json文件來實現將PWA安裝到桌面，并通過Mac OSX和IOS如何安裝PWA到桌面的詳細步驟，闡述了如何配置PWA，使其方便地安裝到桌面上。
下一篇文章中，主要講述Service Worker在PWA實踐中的重要能力：Web Push。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108745.html
摘要：學習與實踐系列文章已整理至學習手冊，文字內容已同步至。本文是學習與實踐系列的第三篇文章。引言其中一個令人著迷的能力就是離線可用。但是，如果你注意到文章開頭的圖片就會發現，離線時我們不僅可以訪問，還可以使用搜索功能。 《PWA學習與實踐》系列文章已整理至gitbook - PWA學習手冊，文字內容已同步至learning-pwa-ebook。轉載請注明作者與出處。 本文是《PWA學習與實...
摘要：本文是學習與實踐系列的第五篇文章。實際上，消息推送與提醒是兩個功能和。在這一篇里，我們先來學習如何使用進行消息推送。而當服務端要推送消息時，會使用私鑰對發送的數據進行數字簽名，并根據數字簽名生成一個叫請求頭。 《PWA學習與實踐》系列文章已整理至gitbook - PWA學習手冊，文字內容已同步至learning-pwa-ebook。轉載請注明作者與出處。 本文是《PWA學習與實踐》系...
摘要：前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。 前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對于...
摘要：另一部分屬于進程，它重新在后臺起了一個進程，它和應用的主進程互不影響，可以同時執行。其中一般作為應用程序瀏覽器和網絡如果可用之間的代理服務。他們還將允許訪問推送通知和后臺同步。然后開始在進程中通過事件，來監聽請求，并對請求和響應進行緩存。 前言:我們的應用可以分為兩部分，一部分是屬于主進程的(包括js(同步,異步)，以及dom渲染等等)，在一個時刻點，只能執行一個，要么先去渲染dom，...
閱讀 1264·2021-09-27 13:35
閱讀 2563·2021-09-06 15:12
閱讀 3380·2019-08-30 15:55
閱讀 2828·2019-08-30 15:43
閱讀 431·2019-08-29 16:42
閱讀 3446·2019-08-29 15:39
閱讀 3062·2019-08-29 12:28
閱讀 1239·2019-08-29 11:11
