跳至內容

用戶:AstrianZheng/drafts/progressivewebapps

維基百科,自由的百科全書

漸進式網頁應用程式(Progress Web App,PWA)是一種普通 網頁網站 架構起來的 網頁應用程式,但它可以以傳統 應用程式 或原生 流動應用程式 形式展示給用戶。這種應用程式形態,企圖將目前最為現代化的 瀏覽器 提供的功能與流動裝置的體驗優勢相結合。

技術背景

[編輯]

自 2005 年以來,網頁開發 從 靜態形式 升級為以伺服器端技術(如 PHPASP.NET 等)與客戶端工具(如 Ajax[1] 等)以及一些響應式網頁設計技術構建的 動態 形式。[2]那時儘管有一些基於網頁技術製作的網頁應用(如 iPhone 於 2007 年展開的嘗試),但都在與原生應用的競爭下失敗。相較於需要利用瀏覽器運行的網頁應用,原生應用提供一個更好的用戶體驗和極快的運行速度。以打包資源和直接利用硬件資源的特性,都令原生應用運行速度更快,並提供更多功能。但到 2010 年代中期,由於 HTML 5CSS 3 和 JavaScript 技術的持續發展,技術更強大、兼容性更高的 瀏覽器 的出現,以及類似 A10 和 高通驍龍 821 這樣強大的處理器的發明,都讓高效的混合型應用程式成為強有力的原生應用程式替代品。

混合型應用程式

[編輯]

混合應用程式最大程度地還原流動裝置的用戶體驗,並且需要通過應用商店 下載。 因此,它們依然消耗存儲空間。 以 標記語言樣式表,以及 腳本語言 製作的互動網頁元素沒有使用封閉的系統,例如 Flash。 一部分運行在 移動瀏覽器 的混合型應用沒有 URL,但支持豐富的 用戶界面,也允許使用一些作業系統層級的能力。 在最新發佈的 CSS 3 和 JavaScript 框架 中,開發者被允許使用新的 設計 範式,例如以網格和 Flex 為代表的 CSS 盒模型,還能使用轉譯、轉換與動畫等功能。

特點

[編輯]

在2015年,設計師弗朗西斯·貝里曼和 Google Chrome 的工程師亞歷克斯·羅素提出「漸進式網頁應用程式」概念[3],符合條件的應用程式可以現代的瀏覽器中使用新功能,包括應用工作線程和 網頁應用清單,而且用戶在原生 作業系統 中,可以從網絡應用程式向漸進式網頁應用程式升級。 根據 Google 開發者支持頁面,[4][5] 這些特徵是:

  • 漸進式:用戶無需擔心使用哪個瀏覽器,也可以正常使用 PWA。因為這些 PWA 以 漸進增強 作為核心信條。
  • 響應式:PWA 適應包括電腦、手機、平板等其他常用設備在內的多種瀏覽環境。
  • 連接獨立性:利用服務工作線程,PWA 可以離線或網絡情況較差的環境下工作。
  • 接近原生應用:為用戶提供更接近原生應用的交互體驗與導航。
  • 永葆新版:歸功於服務工作線程的更新機制,PWA 可以保證用戶永遠使用最新版本。
  • 安全:通過 HTTPS,PWA 可以阻止通訊竊聽,而且能保證內容不被篡改。
  • 可被發現: 歸功於 W3C 提供的清單文件[6],以及服務工作線程的註冊範圍機制,PWA 可被標識為「應用」,且搜尋引擎可以正常地索引 PWA。
  • 可被組裝:類似 推送通知 這樣的功能在 PWA 上都可以輕鬆地被組裝。
  • 可被安裝:允許用戶直接「保留」最有用的 PWA 到他們的系統桌面,無需到應用商店完成麻煩的步驟。
  • 可被連結:只需輕鬆地分享 URL 便可連結至 PWA 中,無需複雜的安裝步驟。
List of PWAs
Name Description Link Audit score
ReSTbasis Web Starter Kit. [1] 100
The Air Horner An Air horn. [2] 100
chromestatus Chrome Platform Status [3] 100
Dev.Opera Web features and implementations [4] 73
Bet Calculator Online bet calculator [5] 91
emojoy [6] 82
Expense Manager Example expense manager [7]
Firefox Platform Status Roadmap for web platform features [8]
Flipkart Lite Online shopping [9] 55
GitHub Explorer [10]
Google I/O [11] 82
Guitar Tuner Tune a guitar [12] 82
Kite OnAir network Kite Network [13]
Memory Game PWA [14] 91
Notepad Offline Notes [15]
Paytm Lite [16] 91
Pokedex [17] 91
Polymon by Polymer [18]
Progressive Beer [19] 82
QR Code Scanner Offline QR code scanner [20] 100
React HN [21]
Remember GPS logging [22] 73
Resume Nation [23] 91
SVGOMG SVG editor [24] 82
Smaller Pictures [25]
Soundslice [26] 64
SplittyPie [27]
sv-ginger WebGL Morph Demo [28] 91
Taskade [29]
TeamGrid [30]
Twitter [31] 82
voice-memos [32]
Washington Post [33] 55
Wave-PD1 Synthesizer with Web Audio API [34] 73
Web Bluetooth (Intel® Edison demo) [35] 100
Web NFC enabled shopping cart [36] 100
Wiki Offline [37] 73
X Sound [38] 45

參考文獻

[編輯]
  1. ^ Garrett, Jesse James. Ajax: A New Approach to Web Applications. [February 18, 2005]. 
  2. ^ Marcotte, Ethan. Responsive Web Design. [May 25, 2010]. 
  3. ^ Russell, Alex. Progressive Web Apps: Escaping Tabs Without Losing Our Soul. [June 15, 2015]. 
  4. ^ Your First Progressive Web App | Web Fundamentals - Google Developers. [2016-07-17]. 
  5. ^ Google Developers. Progressive Web App. [June 15, 2015]. 
  6. ^ W3C “Web App Manifest”, Working Draft, retrieved 12 September 2016

[[Category:网络应用程序]]