PWA介紹及快速上手搭建一個PWA應用的方法-創(chuàng)新互聯(lián)

PWA初次體驗

創(chuàng)新互聯(lián)公司是一家以網絡技術公司，為中小企業(yè)提供網站維護、成都做網站、網站設計、外貿營銷網站建設、網站備案、服務器租用、國際域名空間、軟件開發(fā)、微信平臺小程序開發(fā)等企業(yè)互聯(lián)網相關業(yè)務，是一家有著豐富的互聯(lián)網運營推廣經驗的科技公司，有著多年的網站建站經驗，致力于幫助中小企業(yè)在互聯(lián)網讓打出自已的品牌和口碑，讓企業(yè)在互聯(lián)網上打開一個面向全國乃至全球的業(yè)務窗口：建站聯(lián)系電話：13518219792

前言：本示例不用安裝任何東西

部分資源來自網絡資源及PWA官網，不要把PWA想象的太復雜，跟著示例走一下，你行的。

PWA介紹

一個新的前端技術，PWA（全稱：Progressive Web App ）也就是說這是個漸進式的網頁應用程序。

官網： https://developers.google.com/web/progressive-web-apps/

是 Google 在 2015 年提出，2016年6月才推廣的項目。是結合了一系列現(xiàn)代Web技術的組合，在網頁應用中實現(xiàn)和原生應用相近的用戶體驗。

官網上給出 PWA 的宣傳是： Reliable （可靠的）、 Fast （快速的）、 Engaging （可參與的）

Reliable：當用戶從手機主屏幕啟動時，不用考慮網絡的狀態(tài)是如何，都可以立刻加載出 PWA。

Fast：這一點應該都很熟悉了吧，站在用戶的角度來考慮，如果一個網頁加載速度有點長的話，那么我們會放棄瀏覽該網站，所以 PWA 在這一點上做的很好，他的加載速度是很快的。

Engaging： PWA 可以添加在用戶的主屏幕上，不用從應用商店進行下載，他們通過網絡應用程序 Manifest file 提供類似于 APP 的使用體驗（在 Android 上可以設置全屏顯示哦，由于 Safari 支持度的問題，所以在 IOS 上并不可以），并且還能進行 ”推送通知” 。

PWA關鍵技術

Service Worker （可以理解為服務工廠）
Manifest （應用清單）
Push Notification （推送通知）

Service Worker

以下用SW來表示

SW 是什么呢？這個是離線緩存文件。我們 PWA 技術使用的就是它！SW 是瀏覽器在后臺獨立于網頁運行的腳本，它打開了通向不需要網頁或用戶交互的功能的大門，因為使用了它，才會有的那個 Reliable 特性吧，SW 作用于瀏覽器于服務器之間，相當于一個代理服務器。

瀏覽器支持

順便帶一句：目前只能在 HTTPS 環(huán)境下才能使用SW，因為SW 的權利比較大，能夠直接截取和返回用戶的請求，所以要考慮一下安全性問題。

PWA介紹及快速上手搭建一個PWA應用的方法

事件機制

PWA介紹及快速上手搭建一個PWA應用的方法

功能(還是比較逆天的)

后臺數(shù)據(jù)的同步
從其他域獲取資源請求
接受計算密集型數(shù)據(jù)的更新，多頁面共享該數(shù)據(jù)
客戶端編譯與依賴管理
后端服務的hook機制
根據(jù)URL模式，自定義模板
性能優(yōu)化
消息推送
定時默認更新
地理圍欄

生命周期

PWA介紹及快速上手搭建一個PWA應用的方法

Parsed （解析成功）：首次注冊 SW 時，瀏覽器解決腳本并獲得入口點，如果解析成功，就可以訪問到 SW 注冊對象，在這一點中我們需要在 HTML 頁面中添加一個判斷，判斷該瀏覽器是否支持 SW 。

Installing （正在安裝）：SW 腳本解析完成之后，瀏覽器會嘗試進行安裝，installing 中 install 事件被執(zhí)行，如果其中有 event.waitUntil ( ) 方法，則 installing 事件會一直等到該方法中的 Promise 完成之后才會成功，如果 Promise 被拒絕，則安裝失敗，SW會進入 Redundant（廢棄）狀態(tài)。

Installed / Waiting （安裝成功/等待中）：如果安裝成功，SW 將會進入這個狀態(tài)。

Activating （正在激活）：處于 waiting 狀態(tài)的 SW 發(fā)生以下情況，將會進入 activating 狀態(tài)中：

當前已無激活狀態(tài)的 worker 、 SW腳本中的 self.skipWaiting（）方法被調用（ ps： self 是 SW 中作用于全局的對象，這個方法根據(jù)英文翻譯過來也能明白什么意思啦，跳過等待狀態(tài) ）、用戶已關閉 SW 作用域下的所有頁面，從而釋放了當前處于激活狀態(tài)的 worker、超出指定時間，從而釋放當前處于激活狀態(tài)的 worker

Activated （激活成功）：該狀態(tài)，其成功接收了 document 全面控制的激活態(tài) worker 。

Redundant （廢棄）：這個狀態(tài)的出現(xiàn)時有原因的，如果 installing 事件失敗或者 activating 事件失敗或者新的 SW 替換其成為激活態(tài) worker 。installing 事件失敗和 activating 事件失敗的信息我們可以在 Chrome 瀏覽器的 DevTools 中查看

Manifest

Web App Manifest 是一個 W3C 規(guī)范，它定義了一個基于 JSON 的 List 。Manifest 在 PWA 中的作用有：

能夠將你瀏覽的網頁添加到你的手機屏幕上

在 Android 上能夠全屏啟動，不顯示地址欄（由于 Iphone 手機的瀏覽器是 Safari ，所以不支持哦）

控制屏幕橫屏 / 豎屏展示

定義啟動畫面

可以設置你的應用啟動是從主屏幕啟動還是從 URL 啟動

可以設置你添加屏幕上的應用程序圖標、名字、圖標大小

Push Notification

Push 和 Notification 是兩個不同的功能，涉及到兩個 API 。

Notification 是瀏覽器發(fā)出的通知消息。

Push 和 Notification 的關系，Push：服務器端將更新的信息傳遞給 SW ，Notification： SW 將更新的信息推送給用戶。

PWA示例

準備

我們先創(chuàng)建一個關于 PWA 的項目文件夾，

進入文件夾下我們準備一張 120x120的圖片一張，作為我們的應用程序圖標。

創(chuàng)建一個 index.html 文件

創(chuàng)建一個 main.css 文件

創(chuàng)建一個 manifest.json 文件

創(chuàng)建一個 sw.js 文件

PWA介紹及快速上手搭建一個PWA應用的方法

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hello PWA</title>
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <link rel="stylesheet" href="main.css" rel="external nofollow" >
 <link rel="manifest" href="manifest.json" rel="external nofollow" >
</head>
<body>
 <h4>Hello PWA</h4>
</body>
<script>
 // 檢測瀏覽器是否支持SW
 if(navigator.serviceWorker != null){
 navigator.serviceWorker.register('sw.js')
 .then(function(registartion){
  console.log('支持sw:',registartion.scope)
 })
 }
</script>
</html>

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

新聞名稱：PWA介紹及快速上手搭建一個PWA應用的方法-創(chuàng)新互聯(lián)
網站地址：http://www.rwnh.cn/article26/dghgjg.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網站制作、微信小程序、網站維護、電子商務、虛擬主機、網站內鏈

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

PWA介紹及快速上手搭建一個PWA應用的方法-創(chuàng)新互聯(lián)