PWA的探索與應用

2022-09-15 03:00:13 字數 1849 閱讀 8668

本文由雲+社群發表

傳統的web網頁存在以下幾個問題:

2016 年google i/o 大會上提出乙個 next web generation 的概念。pwa是在傳統web應用的基礎上,結合manifest和service worker,完善web應用的一些能力,比如:

pwa 站點部署的 manifest.json檔案滿足以下條件時會自動顯示橫幅:

- short\\_name (主螢幕顯示)

- name (安裝橫幅顯示)

- icons (必須包含乙個 mime 型別為 image/png 的圖示宣告)

- start\\_url (應用啟動位址)

- display (必須為 standalone 或 fullscreen)

- 站點註冊 service worker。

- 站點支援 https 訪問。

- 同一瀏覽器中站點至少被訪問兩次,間隔至少為 5 分鐘。

​ pwa應用的離線體驗、定期的後台同步以及推送通知等功能的實現依賴於service worker技術,下圖為目前sw技術的支援度。

sw具有以下特徵:

service worker是基於註冊、安裝、啟用等步驟

註冊

if ('serviceworker' in n**igator) )

.catch(function (err) );

});}

安裝

this.addeventlistener('install', function(event) )

);

});

啟用

//service worker啟用事件

this.addeventlistener('activate', function(event)

}}));

}));

});

// 漸進式快取

優點

能夠在網路差和斷網條件下

推送訊息的能力

快速響應使用者指令

缺點

PWA 漸進式 web 應用

背景 解決的問題 關鍵時間節點 主要特點 使用pwa的基本要求 離線通知 作用域 更新策略 瀏覽器通過自身 diff 演算法能夠檢測 service work 的更新包含兩種方式 生命週期 mainfest欄位詳解 short name 應用展示的名稱 桌面上顯示的名稱 icons 定義不同尺寸的應...

漸進式web應用 PWA

pwa 漸進式 web 應用 運用現代的 web api 以及傳統的漸進式增強策略來建立跨平台 web 應用程式。pwa 所需的關鍵要素是service worker支援。值得慶幸的是,桌面和移動裝置上的所有主流瀏覽器都支援 service worker。注意 service workers 大量使...

Google Hack語法的探索與應用

說到搜尋引擎,相信任何人都不會陌生,它包含著我們生活中方方面面的知識,儲存著數億計的資訊,每當有人來問我東西的時候我只想說 越來越多的hack搜尋引擎的出現比如fofa,zoomeye,shodan成為了我們滲透時的利器,它們進行合理的分類整理來達到有效利用目的,但在我看來往往資訊的複雜程度越高,資...