日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

PWA初次體驗(yàn)

創(chuàng)新互聯(lián)專(zhuān)注為客戶(hù)提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站制作、成都做網(wǎng)站、豐鎮(zhèn)網(wǎng)絡(luò)推廣、成都小程序開(kāi)發(fā)、豐鎮(zhèn)網(wǎng)絡(luò)營(yíng)銷(xiāo)、豐鎮(zhèn)企業(yè)策劃、豐鎮(zhèn)品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供豐鎮(zhèn)建站搭建服務(wù)，24小時(shí)服務(wù)熱線(xiàn)：13518219792，官方網(wǎng)址：www.cdcxhl.com

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

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

PWA介紹

一個(gè)新的前端技術(shù)，PWA（ 全稱(chēng)：Progressive Web App ）也就是說(shuō)這是個(gè)漸進(jìn)式的網(wǎng)頁(yè)應(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è)應(yīng)用中實(shí)現(xiàn)和原生應(yīng)用相近的用戶(hù)體驗(yàn)。

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

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

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

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

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

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

Service Worker

以下用SW來(lái)表示

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

瀏覽器支持

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

事件機(jī)制

功能(還是比較逆天的)

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

生命周期

Parsed （ 解析成功 ）： 首次注冊(cè) SW 時(shí)，瀏覽器解決腳本并獲得入口點(diǎn)，如果解析成功，就可以訪問(wèn)到 SW 注冊(cè)對(duì)象，在這一點(diǎn)中我們需要在 HTML 頁(yè)面中添加一個(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)前已無(wú)激活狀態(tài)的 worker 、 SW腳本中的 self.skipWaiting（）方法被調(diào)用 （ ps： self 是 SW 中作用于全局的對(duì)象，這個(gè)方法根據(jù)英文翻譯過(guò)來(lái)也能明白什么意思啦，跳過(guò)等待狀態(tài) ）、用戶(hù)已關(guān)閉 SW 作用域下的所有頁(yè)面，從而釋放了當(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)頁(yè)添加到你的手機(jī)屏幕上

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

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

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

​ 可以設(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 將更新的信息推送給用戶(hù)。

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 文件

index.html

 
 
 
 
 


 
Hello PWA

main.css

h4{
 color: #f00;
}

manifest.json

short_name: “ " 用戶(hù)主屏幕上的應(yīng)用名字

display : “standalone" 設(shè)置啟動(dòng)樣式，讓您的網(wǎng)絡(luò)應(yīng)用隱藏瀏覽器的 URL 地址欄

start_url : “/“ 設(shè)置啟動(dòng)網(wǎng)址，如果不提供的話(huà)，默認(rèn)是使用當(dāng)前頁(yè)面

theme_color : “ “ 用來(lái)告知瀏覽器用什么顏色來(lái)為地址欄等 UI 元素著色

background_color: “ ” 設(shè)置啟動(dòng)頁(yè)面的背景顏色

icons：”” 就是添加到主屏幕之后的圖標(biāo)

{
 "name": "一個(gè)PWA示例",
 "short_name": "PWA示例",
 "start_url": "/index.html",
 "display": "standalone",
 "background_color": "#fff",
 "theme_color": "#3eaf7c",
 "icons": [
 {
  "src": "/youhun.jpg",
  "sizes": "120x120",
  "type": "image/png"
 }
 ],
}

sw.js

看網(wǎng)上很多人都安裝的hs和ngrokk去調(diào)試，在這里為了照顧新手我是直接引用的sw

處理靜態(tài)緩存，首先定義需要緩存的路徑，以及需要緩存的靜態(tài)文件的列表。

借助 SW 注冊(cè)完成安裝 SW 時(shí)，抓取資源寫(xiě)入緩存中。使用了一個(gè)方法那就是 self.skipWaiting( ) ，為了在頁(yè)面更新的過(guò)程當(dāng)中，新的 SW 腳本能夠立刻激活和生效。

importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.1.0/workbox-sw.js");
var cacheStorageKey = 'minimal-pwa-1'
var cacheList=[
 '/',
 'index.html',
 'main.css',
 'youhun.jpg'
]
self.addEventListener('install',e =>{
 e.waitUntil(
 caches.open(cacheStorageKey)
 .then(cache => cache.addAll(cacheList))
 .then(() => self.skipWaiting())
 )
})

處理動(dòng)態(tài)緩存，我們監(jiān)聽(tīng) fetch 事件，在 caches 中去 match 事件的 request ，如果 response 不為空的話(huà)就返回 response ，最后返回 fetch 請(qǐng)求，在 fetch 事件中我們可以手動(dòng)生成 response 返回給頁(yè)面。

更新靜態(tài)資源，緩存的資源會(huì)跟隨著版本的更新會(huì)過(guò)期的，所以會(huì)根據(jù)緩存的字符串名稱(chēng)清除舊緩存。在新安裝的 SW 中通過(guò)調(diào)用 self.clients.claim( ) 取得頁(yè)面的控制權(quán)，這樣之后打開(kāi)頁(yè)面都會(huì)使用版本更新的緩存。舊的 SW 腳本不在控制著頁(yè)面之后會(huì)被停止，也就是會(huì)進(jìn)入 Redundant 期。

self.addEventListener('fetch',function(e){
 e.respondWith(
 caches.match(e.request).then(function(response){
  if(response != null){
  return response
  }
  return fetch(e.request.url)
 })
 )
})
self.addEventListener('activate',function(e){
 e.waitUntil(
 //獲取所有cache名稱(chēng)
 caches.keys().then(cacheNames => {
  return Promise.all(
  // 獲取所有不同于當(dāng)前版本名稱(chēng)cache下的內(nèi)容
  cacheNames.filter(cacheNames => {
   return cacheNames !== cacheStorageKey
  }).map(cacheNames => {
   return caches.delete(cacheNames)
  })
  )
 }).then(() => {
  return self.clients.claim()
 })
 )
})

部署

我們可以把當(dāng)前pwa目錄的所有內(nèi)容都扔進(jìn)服務(wù)器中，或者coding Pages和gitHub Pages也是可以的，當(dāng)然，記得開(kāi)啟https。在上變介紹過(guò)SW的權(quán)利比較大，為了安全性，我們使用https協(xié)議來(lái)訪問(wèn)。

試著訪問(wèn)一下，我們這里用的coding Pages并且綁定了自己的域名

打開(kāi) chrom 的調(diào)試工具，打開(kāi) application ，點(diǎn)擊 service workers 之后我們會(huì)發(fā)現(xiàn) sw.js 腳本已經(jīng)存到了 SW 中 。

我們打開(kāi) Network 刷新頁(yè)面一下，看看，我們的頁(yè)面資源來(lái)自 SW 而不是其他的地方，在 Console 中也打印出了我們?cè)?index.html 中判斷的語(yǔ)句，瀏覽器支持就會(huì)打印出這一句話(huà)。

接下來(lái)我們斷網(wǎng)操作，在 Application 中給 Offline 打上對(duì)勾就行啦。然后刷新頁(yè)面，我們?nèi)匀荒芸吹街暗捻?yè)面，原因就是我們?cè)谏蠄D看到，他的資源是從 SW 上獲得到的。當(dāng)我們第一次打開(kāi)這個(gè)頁(yè)面的時(shí)候，Resopnse 對(duì)象被存到了 Cache Storage （ 定義在 SW 規(guī)范中 ，相關(guān)資料請(qǐng)同學(xué)們自行查詢(xún)啦 ）中，我們看下圖：

通過(guò)存放到 Cache Storage 中，我們下次訪問(wèn)的時(shí)候如果是弱網(wǎng)或者斷網(wǎng)的情況下，就可以不走網(wǎng)絡(luò)請(qǐng)求，而直接就能將本地緩存的內(nèi)容展示給用戶(hù)，優(yōu)化用戶(hù)的弱網(wǎng)及斷網(wǎng)體驗(yàn)。

這個(gè)時(shí)候肯定會(huì)有同學(xué)在想，如果內(nèi)容更新了，那么頁(yè)面展示的內(nèi)容是新內(nèi)容呢還是舊內(nèi)容呢？下面我們操作一下，打開(kāi) index.html 文件，我們?cè)?body 中添加一個(gè) p 標(biāo)簽 ，然后回到頁(yè)面刷新。

我們看到，頁(yè)面上的內(nèi)容并沒(méi)有顯示出我剛剛添加的那個(gè) p 標(biāo)簽。這說(shuō)明了，我們拿到的數(shù)據(jù)還是從 Cache Storage 中獲取到的，Cache Storage中的內(nèi)容并沒(méi)有更新，強(qiáng)制刷新也不行哦，那么我們?cè)趺床拍茏屛覄倓偺砑拥哪莻€(gè) p 標(biāo)簽顯示出來(lái)呢。

我們打開(kāi) sw.js 腳本文件，我們修改一下 cacheStorageKey。

修改后，我們?cè)俅未蜷_(kāi)該網(wǎng)址，強(qiáng)制刷新下或者關(guān)掉瀏覽器重新打開(kāi)。

頁(yè)面中出現(xiàn)了剛剛添加的P標(biāo)簽，我們?cè)倏匆幌?Cache Storage 中的緩存名字，已經(jīng)被修改。

總結(jié)

如果是使用coding或者gitHub提供的pages服務(wù)，則需要注意最好綁定下獨(dú)立域名。如果不綁定則注意下文件請(qǐng)求路徑即可。

研究PWA門(mén)檻不低，部署的服務(wù)器要求HTTPS，ServiceWorker涉及API眾多，需要單獨(dú)學(xué)習(xí)，另外npm中也已經(jīng)有這個(gè)包了https://www.npmjs.com/package/web-pwa ，玩玩可以，真正部署到項(xiàng)目生產(chǎn)環(huán)境可能坑很多，但有坑填坑，不折騰還叫前端么。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。