PWA 漸進式 web 應用

2021-10-07 12:59:19 字數 1480 閱讀 6507

背景

解決的問題:

關鍵時間節點:

主要特點

使用pwa的基本要求

離線通知

作用域

更新策略

瀏覽器通過自身 diff 演算法能夠檢測 service work 的更新包含兩種方式

生命週期

mainfest欄位詳解

short_name:

應用展示的名稱

(桌面上顯示的名稱)

icons: 定義不同尺寸的應用圖示

start_url: 定義桌面啟動的 url

description: 應用描述,可以參考 meta 中的 description

display: 定義應用的顯示方式,有 4 種顯示方式,分別為:

fullscreen: 全屏

standalone: 應用

minimal-ui: 類似於應用模式,但比應用模式多一些系統導航控制元素,但又不同於瀏覽器模式

browser: 瀏覽器模式,預設值

name: 應用名稱(瀏覽器提示使用者新增和android啟動屏顯示的名稱)

orientation: 定義預設應用顯示方向,豎屏、橫屏

background_color: 應用載入之前的背景色,用於應用啟動時的過渡

theme_color: 定義應用預設的主題色

dir: 文字方向,3 個值可選 ltr

(left-to-right)

,rtl

(right-to-left) 和 auto

(瀏覽器判斷),預設為 auto

scope: 定義應用模式下的路徑範圍,超出範圍會已瀏覽器方式顯示

修復ios上icon配置失效

"/img/mobile-homescrenn-192x192.png"

>

1. 資源請求攔截2. 本地儲存管理3. 預快取方案workbox

微博

漸進式web應用 PWA

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

漸進式Web應用 PWA 對前端技術的挑戰

1.什麼是pwa?第一步 使用https 第二步 建立乙個應用程式清單 manifest 第三步 建立乙個 service worker 第四步 建立可用的離線頁面3.pwa示例 我們先建立乙個關於 pwa 的專案資料夾,進入資料夾下我們準備一張 120x120的一張,作為我們的應用程式圖示。建立乙...

Makefile漸進式訓練

本目錄主要包含makefile一步步遞進學習的示例 makefile 例項 進行makefile小實驗,體驗makefile的功能。目錄中的makefile是不嚴謹的編寫方式。目錄中的makefile phony是嚴謹的編寫方式。切換至step0目錄下,即makefile所在的同級目錄,使用如下命令...