PWA筆記和簡單例項

2022-06-14 05:54:10 字數 1427 閱讀 2497

一、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 與客戶端建立連線並進行通訊,原...