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