欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

PWA初次體驗(yàn)

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

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

部分資源來自網(wǎng)絡(luò)資源及PWA官網(wǎng)，不要把PWA想象的太復(fù)雜，跟著示例走一下，你行的。

PWA介紹

一個(gè)新的前端技術(shù)，PWA（ 全稱：Progressive Web App ）也就是說這是個(gè)漸進(jìn)式的網(wǎng)頁應(yīng)用程序。

官網(wǎng)： https://developers.google.com/web/progressive-web-apps/

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

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

Reliable：當(dāng)用戶從手機(jī)主屏幕啟動(dòng)時(shí)，不用考慮網(wǎng)絡(luò)的狀態(tài)是如何，都可以立刻加載出 PWA。

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

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

PWA關(guān)鍵技術(shù)

  • Service Worker （可以理解為服務(wù)工廠）
  • Manifest （應(yīng)用清單）
  • Push Notification （推送通知）

Service Worker

以下用SW來表示

SW 是什么呢？這個(gè)是離線緩存文件。我們 PWA 技術(shù)使用的就是它！SW 是瀏覽器在后臺(tái)獨(dú)立于網(wǎng)頁運(yùn)行的腳本，它打開了通向不需要網(wǎng)頁或用戶交互的功能的大門，因?yàn)槭褂昧怂艜?huì)有的那個(gè) Reliable 特性吧，SW 作用于 瀏覽器于服務(wù)器之間，相當(dāng)于一個(gè)代理服務(wù)器。

瀏覽器支持

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

PWA介紹及快速上手搭建一個(gè)PWA應(yīng)用的方法

事件機(jī)制

PWA介紹及快速上手搭建一個(gè)PWA應(yīng)用的方法

功能(還是比較逆天的)

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

生命周期

PWA介紹及快速上手搭建一個(gè)PWA應(yīng)用的方法

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

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

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

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

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

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

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

Manifest

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

​ 能夠?qū)⒛銥g覽的網(wǎng)頁添加到你的手機(jī)屏幕上

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

​ 控制屏幕 橫屏 / 豎屏 展示

​ 定義啟動(dòng)畫面

​ 可以設(shè)置你的應(yīng)用啟動(dòng)是從主屏幕啟動(dòng)還是從 URL 啟動(dòng)

​ 可以設(shè)置你添加屏幕上的應(yīng)用程序圖標(biāo)、名字、圖標(biāo)大小

Push Notification

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

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

​ Push 和 Notification 的關(guān)系，Push：服務(wù)器端將更新的信息傳遞給 SW ，Notification： SW 將更新的信息推送給用戶。

PWA示例

準(zhǔn)備

我們先創(chuàng)建一個(gè)關(guān)于 PWA 的項(xiàng)目文件夾，

進(jìn)入文件夾下我們準(zhǔn)備一張 120x120的圖片一張，作為我們的應(yīng)用程序圖標(biāo)。

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

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

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

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

PWA介紹及快速上手搭建一個(gè)PWA應(yīng)用的方法

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>

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

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

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

廣告

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

成都做網(wǎng)站