一、manifest的使用和介紹
1、建立manifest.json檔案,並進行配置,常用配置引數有:
] :應用圖示
background_color:背景色
theme_color:主題色
display:standalone 顯示模式
}2、在index.html中引入manifest.json檔案
二、web worker的使用和介紹(無法處理快取)
介紹:web worker可以脫離主線程之外,做一些複雜的運算,在獨立的執行環境,不能操作dom和bom.
使用:1、建立web worker
var worker = new worker('work.js'); ------ 在js中進行複雜的運算
2、計算結束後給主線程傳送訊息
self.postmessage(msg);
3、主線程監聽訊息
worker.addeventlistener('message', e => )
三、service worker(離線快取技術)
1、基本使用
在window.onload中註冊service worker,防止與其他資源競爭
window.addeventlistener('load', () => )
.catch(err => )}}
2、生命週期(self和this都可以)
三、乙個簡單的pwa例項 sw.js
//建立快取資源
var cachename = 'cache_v1'; //
快取名稱
var cachelist =[
'./',
'./main.css',
'./script.js',
'./pkq.png',
'./manifest.json',
'./sw.js']
//處理靜態快取
self.addeventlistener('install', event => );
//利用fetch事件,讀取快取。fetch事件會監聽url請求,
//如果在sw快取中,就從sw中取;如果不在,就通過網路從伺服器中取。
self.addeventlistener('fetch', function
(event)
return fetch(event.request.url);//
sw沒有,通過網路從伺服器中取
}) );
});//
更新靜態資源
self.addeventlistener('activate', function
(e) ).map(cachenames =>)
)}).then(() =>)
)})
PWA 學習筆記
一.基本介紹 1.漸進式 適用所有瀏覽器,因為它是以漸進式增強作為宗旨開發的,不支援的瀏覽器不影響 2.流暢 能夠借助service worker在離線或者網路較差的情況下正常訪問 5.粘性 通過推送離線通知等,可以讓使用者回流 1.需要index.html引入manifest.json檔案 2.例...
PWA 學習筆記 一
概念 pwa 的關鍵技術在瀏覽器中的支援度 2 service worker 的支援度達到 89.84 3 notifications api 的支援度達到 75.17 4 push api 的支援度達到 78.06 產生原因 移動時代 主要特點 1 可靠 即使在網路不穩定甚至斷網的環境下,也能瞬間...
Socket筆記和簡單例項
socket的通訊過程 伺服器端 01,申請乙個socket 02,繫結到乙個ip位址和乙個埠上 03,開啟偵聽,等待接收連線 客戶端 01,申請乙個socket 02,連線伺服器 指明ip位址和埠號 伺服器端接收到連線請求後,產生乙個新的socket 埠大於1024 與客戶端建立連線並進行通訊,原...