AVt天堂网 手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

當前位置:首頁 > 科技  > 軟件

穿上App外衣,保持Web靈魂——PWA溫故

來源: 責編: 時間:2023-08-14 22:01:12 323觀看
導讀早在2015年,設計師弗朗西斯·貝里曼和Google Chrome的工程師亞歷克斯·羅素提出“PWA(漸進式網絡應用程序)”概念,將網絡之長與應用之長相結合,其核心目標就是提升 Web App 的性能,改善 Web App以媲美Native的流暢體驗。1.

早在2015年,設計師弗朗西斯·貝里曼和Google Chrome的工程師亞歷克斯·羅素提出“PWA(漸進式網絡應用程序)”概念,將網絡之長與應用之長相結合,其核心目標就是提升 Web App 的性能,改善 Web App以媲美Native的流暢體驗。WGK28資訊網——每日最新資訊28at.com

1. 什么是PWA

PWA 不是一個框架或工具集,而是一個概念,是開發人員需要在應用程序中實現的一組功能,以便將應用程序的用戶體驗提升到一個新的水平上。如果說某網站在某種程度上是 PWA,那它滿足的 PWA 功能清單中的特性越多,它就越接近這個概念。WGK28資訊網——每日最新資訊28at.com

PWA是一類Web應用程序的統稱,通過高級Web功能使Web應用程序的行為和表現像本地應用程序一樣。PWA 可以通過一個代碼庫在多個平臺和多個設備上運行,像一個特定平臺的應用程序那樣,可以安裝在設備上,可以離線和在后臺運行,并且可以與設備和其他已安裝的應用程序集成。WGK28資訊網——每日最新資訊28at.com

PWA能夠重用現有代碼以提供服務體驗。基于其他的跨平臺技術,往往需要一次性將適配于各種設備和平臺的應用程序部署到所有商店,PWA與之有極大的不同,本質上是提供類似于原生應用程序的用戶體驗的網站。PWA受歡迎的原因之一是它能夠滿足所有面向移動網絡的設備需求,同時節省了應用創建和維護的投資成本。WGK28資訊網——每日最新資訊28at.com

簡單而言,一個 PWA 應用首先是一個網頁, 是通過 Web 技術編寫出的一個網頁應用,隨后通過App Shell 架構添加上 Manifest 實現添加至設備主屏幕, 在通過 Service Worker 來實現離線緩存和消息推送等功能。WGK28資訊網——每日最新資訊28at.com

圖片圖片WGK28資訊網——每日最新資訊28at.com

2.PWA 的關鍵技術

歸納而言,PWA 應用中有兩項關鍵技術:基于Manifest的App Shell 架構和Service worker運行機制。WGK28資訊網——每日最新資訊28at.com

2.1 基于Manifest的App Shell架構

App Shell 架構是構建 PWA 應用的一種方式,能即時可靠且地將PWA加載到用戶屏幕上,從而與本機應用相似。WGK28資訊網——每日最新資訊28at.com

作為一種PWA的構建方式,App Shell架構提供了一個最基本的 Web App 框架,包括應用的頭部、底部、菜單欄等結構。App Shell 架構通常使用JavaScript框架(如React或Angular)來實現,可以是一種構建單頁面應用(SPA)的方法,它將邏輯與實際內容分離開來。WGK28資訊網——每日最新資訊28at.com

App Shell 架構涉及緩存靜態資源,然后使用JavaScript動態加載實際內容,是一個能夠支持用最小化HTML/CSS/JS用戶界面集合的可緩存UI框架。如果有離線緩存,可確保在用戶重復訪問時提供即時、可靠的良好性能。這樣一來,用戶重復打開應用時就能迅速地看到 Web App 的基本界面,只需要從網絡中請求、加載必要的內容。這也意味著并不是每次用戶訪問時都要從網絡加載 App Shell,而只需要從網絡中加載必要的內容。???App Shell 是通過瀏覽器中的Web runtime?完成的web 應用與當前設備平臺的交互,尤其是在當前設備的屏幕上增加應用的啟動入口。?Web Application Manifest,即通過一個清單文件向瀏覽器暴露 web 應用的元數據,包括名稱、icon 的 URL 等,以備瀏覽器使用,比如在添加至主屏或推送通知時暴露給操作系統,從而增強 web 應用與操作系統的集成能力。Manifest就是一個json文件,一個簡單示例如下:WGK28資訊網——每日最新資訊28at.com

{    "name": "Progressive web app sample",    "short_name": "pwa sample",    "start_url": "/index.html",    "display": "standalone",    "theme_color": "#FFDF01",    "background_color": "#FFDF01",    "icons": [        {            "src": "homescreen.png",            "sizes": "168x168",            "type": "image/png"        },        {            "src": "homescreen-124.png",            "sizes": "124x124",            "type": "image/png"        }    ]}

當用戶第一次訪問PWA應用程序時,瀏覽器會按照manifest.json文件的內容對應用程序進行注冊與安裝,以便隨時在離線狀態下訪問。WGK28資訊網——每日最新資訊28at.com

對于使用包含大量 JavaScript 的架構的單頁面應用來說,基于Manifest 的 App Shell 適用于在沒有網絡的情況下將一些初始 HTML 快速加載到屏幕上。WGK28資訊網——每日最新資訊28at.com

圖片圖片WGK28資訊網——每日最新資訊28at.com

2.2 Service worker

Service worker是 web技術中worker 的一種,那么,什么是worker呢?WGK28資訊網——每日最新資訊28at.com

由于Javascript 的單線程特性,任何“重量”操作都會阻塞主線程。為了提升性能和體驗,現代瀏覽器使用worker 作為一種多線程機制,把原本的單線程應用變成多線程運行。現代瀏覽器中提供了 3 種 Worker,分別是:WGK28資訊網——每日最新資訊28at.com

  • Web worker—— 包含專用 worker及共享 worker
  • Service worker
  • Worklet—— 包含PaintWorklet、AudioWorklet、AnimationWorklet、LayoutWorklet。其中,Worklet 與硬件交互設計相關且仍處于試驗狀態。Web worker 特別適用于后臺跑腳本。現在的網頁都可以注冊多個 Worker,讓不同的任務在各自獨立的環境中完成。Service worker 相當于是瀏覽器在網頁和服務器通信中插入的一個“中間層”,本質上充當代理,以編程方式攔截和處理來自頁面的網絡請求,甚至可以從各種來源產生全新的反應并構建HTML。

關于service worker 的主要內容,下圖給出了核心提示:WGK28資訊網——每日最新資訊28at.com

圖片圖片WGK28資訊網——每日最新資訊28at.com

在Service Worker安裝期間預加載文件。對于SPA,這通常包括我們之前討論的“應用程序外殼”,而簡單的靜態網站可能會選擇預加載所有HTML、CSS和JavaScript,以確保離線時基本功能得到維護。處理推送通知,類似于本機應用程序。這意味著網站可以獲得用戶的許可來發送通知,然后依靠Service Workers接收消息并執行消息,即使瀏覽器關閉。.WGK28資訊網——每日最新資訊28at.com

2.3 基于Service worker 的Push、notification 和后臺服務

目前,不同的瀏覽器廠商使用了不同的Push Service,chrome使用了自家的FCM,firefox也是使用自家的服務,不同push服務遵循共同的Web Push協議,具有標準的調用方式。WGK28資訊網——每日最新資訊28at.com

圖片圖片WGK28資訊網——每日最新資訊28at.com

其中,“UA”就是我們的用戶客戶端,也就是瀏覽器;“Application Server”是后端服務;“Push Service”作為中間代理商,扮演著核心角色。Push Service接收客戶端的消息訂閱,維護管理“客戶端url-公鑰”對的列表,并將訂閱和私鑰信息發送給服務器進行存儲;此外,它后續還得接收服務端的推送消息,校驗并發送給對象的客戶端進行展示。WGK28資訊網——每日最新資訊28at.com

Push Service還有一個非常重要的功能:當用戶離線時,可以幫我們保存消息隊列,直到用戶聯網后再發送給他們。WGK28資訊網——每日最新資訊28at.com

Notification通知的功能與消息push類似,但更為簡單,只要設置好通知消息,調用service worker的相同通知接口即可,甚至可以可以帶操作,WGK28資訊網——每日最新資訊28at.com

后臺同步也是Service Worker的一個子功能,用于在終端弱網或無王情況下同步后臺的數據或繼續前端的請求消息由于service worker在瀏覽器關閉后仍然運行著,所以即使用戶沒有網絡或關閉客戶端,service worker仍會存儲相應的請求,并在有可用網絡連接時發起數據同步。WGK28資訊網——每日最新資訊28at.com

3. PWA 的應用特性與功能特點

Google 給出的 PWA 應用特性如下:WGK28資訊網——每日最新資訊28at.com

  • 可靠:即使在互聯網連接不佳或沒有互聯網的情況下,也可以快速加載。當沒有互聯網連接時,PWA 會使用 Service Worker 來消除對Web服務器的依賴。
  • 快速:流暢的動畫和交互效果,應用程序擁有原生的體驗,沒有笨拙的網頁滾動。
  • 參與感:能夠全屏運行(如果添加到手機桌面),并處理通知。

PWA 應用主要功能特點如下:WGK28資訊網——每日最新資訊28at.com

  • 漸進增強:在盡可能多的環境中運行,可以使用任何可用的服務,并在沒有服務的情況下優雅地降級。
  • 響應式用戶界面:該應用程序適應各種輸入方式(觸摸、語音等)和輸出方式(不同的屏幕尺寸、振動、音頻、盲文顯示等)。
  • 連接獨立性:該應用程序在離線狀態下以及間歇性或低帶寬網絡連接下也能運行良好。
  • App-like UI:應用程序采用原生平臺的 UI 元素,能夠快速加載的用戶界面。
  • 持續更新:Service Worker API 定義了一個將應用程序自動更新到新版本的過程。
  • 安全通信:通過 HTTPS 提供服務和通信,以防止窺探和攻擊。
  • 應用程序發現:即SEO友好,W3C 網絡應用程序清單等元數據,使搜索引擎能夠找到網絡應用程序。
  • 推送交互:推送通知等功能可以主動讓用戶了解最新信息。
  • 后臺加載:網頁關閉,PWA 仍然可以在后臺運行獲取數據更新(當然有限制)。
  • 本機可安裝性:可以安裝 Web 應用程序,無需通過本機應用程序商店來進行。
  • 可鏈接性:通過 URL 輕松共享應用程序,無需顯示安裝即可運行。
  • 可再次訪問,通過 URL 可以輕松分享應用,不用復雜的安裝即可運行。
  • 輕量級:web應用更加輕量級,整個APP都在KB占用內。

2.4 PWA開發工具與生態影響

漸進式web應用程序(PWA)框架簡單可靠,開發人員可以使用不同的來開發PWA,常見的開發工具框架如下:WGK28資訊網——每日最新資訊28at.com

  • VueJS:Vue是頂級的PWA框架庫之一,因為它簡化了編碼并提供了高速渲染。
  • AngularJS:2009年由谷歌發布,是PWA應用程序開發中最廣泛的流程之一。
  • ReactJS:2013年由Facebook發布的React包含了一個廣泛的JavaScript庫,使用JSX呈現連接HTML結構的函數來提供React PWA解決方案。
  • Ionic:一個開源SDK,提供了一個龐大的插件庫,能夠在無需編碼的情況下訪問API
  • Polymer:Polymer具有多種工具、組件和模板,使用純HTML、CSS或JavaScript的一個獨立框架
  • Magento PWA Studio:提供創建、部署和管理PWA所需的一切,包括用于構建用戶界面、管理數據和測試應用程序的工具。
  • Svelte:一個用于開發PWA的JavaScript框架,構建了快速加載的小代碼包。

對于軟件生態而言,PWA確實對一些傳統的應用軟件和開發方式帶來了一定的沖擊和改變。WGK28資訊網——每日最新資訊28at.com

對于一些開發商而言,PWA技術的出現意味著需要考慮在Web端進行應用開發,并為用戶提供更好的Web應用體驗。但同時,PWA的開發方式也使得他們可以更加靈活地進行應用開發,并且減少了一些原生應用的開發和發布成本。WGK28資訊網——每日最新資訊28at.com

PWA技術的出現可能會對應用商店造成一定的沖擊,因為PWA可以通過瀏覽器直接訪問,不需要下載和安裝,這可能會導致一些應用商店用戶流失。但是,應用商店也可以通過采取措施,例如推出PWA應用、提供更好的應用變現機會等來應對這種變化。WGK28資訊網——每日最新資訊28at.com

對于用戶而言,PWA技術的出現可能會提供更好的Web應用體驗,例如離線訪問、桌面快捷方式、推送通知等功能,同時也可以減少一些應用的下載和安裝成本。但是,用戶也需要考慮PWA應用在一些方面可能相對于原生應用和小程序存在的較多局限性和不足。WGK28資訊網——每日最新資訊28at.com

PWA技術對于應用軟件開發商、應用商店和用戶都可能會產生一定的影響,但是它并不會完全顛覆原有的開發和使用方式。PWA的優點和缺點都是相對的,不同的應用場景和開發需求會影響開發者對PWA和原生應用的選擇。如果應用的功能、性能和用戶體驗要求較高,可以考慮原生應用;如果希望對開發和維護成本進一步降低,但又擁有app的一些特征,可以考慮使用PWA。WGK28資訊網——每日最新資訊28at.com

2.5 PWA 與小程序

各種類型的小程序都或多或少地繼承或借鑒了PWA的技術理念,可以認為PWA是各種小程序的源頭之一。WGK28資訊網——每日最新資訊28at.com

圖片圖片WGK28資訊網——每日最新資訊28at.com

依托于超級App,微信、百度、支付寶等公司都推出了各自的小程序。歸納而言,小程序采用了輕量級的框架和組件,加載速度快,用戶可以迅速打開應用程序。小程序能夠與設備的硬件功能(如攝像頭、定位、陀螺儀等)進行原生集成,提供更豐富的功能和用戶體驗。通過應用商店進行分發,用戶可以方便地搜索、發現和安裝小程序。小程序開發使用統一的開發工具和語言,在一定程度上減少了開發者的學習成本。另外小程序可以共享用戶數據,提供更便捷的登錄和數據傳輸。WGK28資訊網——每日最新資訊28at.com

PWA可以在幾乎所有現代瀏覽器上運行,具有廣泛的設備和平臺支持。開發者可以充分利用現有的Web開發知識和工具,龐大的開發者社區來提供豐富的資源、工具和支持。小程序可以通過超級App作為流量入口,也可以運行在企業自有App中,任何企業的App只需要通過集成小程序運行時SDK,即可獲得小程序運行能力,讓小程序擁有了更多分發渠道。小程序生態系統提供了數據分析和統計工具,幫助開發者了解用戶行為、應用性能和使用情況。開發者可以通過這些工具獲取關鍵指標和數據,進行數據驅動的優化和改進。這些工具提供了可視化的報表和圖表,幫助開發者更好地理解用戶行為和應用運行情況。WGK28資訊網——每日最新資訊28at.com

圖片圖片WGK28資訊網——每日最新資訊28at.com

PWA和小程序都是當前移動應用開發領域的熱門技術方案,各具特色。從開發者的角度來看,PWA具有廣泛的瀏覽器支持、跨平臺能力和成熟的Web開發生態系統。小程序則在流量入口、應用商店支持和與硬件集成方面表現突出。WGK28資訊網——每日最新資訊28at.com

2.6 小結

PWA 是一種先進的理念和技術探索,但理念并不能直接演變成競爭優勢。現在是2023年了,推廣和應用成本更低的PWA仍然活在小程序陰影下,看起來仍然沒法撼動應用開發的現狀。除了國內各平臺的強勢影響力和平臺審核因素外,PWA仍然存在一些明顯缺點。PWA是一個基于瀏覽器的web端技術,相較于native APP的各項系統級功能明顯不足,比如無法做硬件層面的調用;在動畫、渲染等方面性能也明顯弱于native APP;大計算量處理和音視頻方面也都是弱項。WGK28資訊網——每日最新資訊28at.com

那么,如果PWA 要獲得更加廣泛的應用,優先級最高的突破點在哪里呢?WGK28資訊網——每日最新資訊28at.com

【參考資料與關聯閱讀】

  • Dean Hume,Manning,“Progressive Web Apps”
  • https://web.dev/blog
  • https://segmentfault.com/a/1190000041729491
  • https://developer.mozilla.org/zh-CN/docs/Web/Progressivewebapps
  • https://zhuanlan.zhihu.com/p/598814908
  • https://blog.51cto.com/u_15147537/5631116
  • https://blog.bitsrc.io/what-is-a-pwa-and-why-should-you-care-388afb6c0bad
  • https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
  • http://blueskyawen.com/2019/02/15/PWA-and-service-worker-in-angular/
  • https://developers.google.com/web/progressive-web-apps/
  • https://www.w3.org/TR/push-api/
  • https://w3c.github.io/manifest/
  • https://html.spec.whatwg.org/multipage/#dom-worker
  • https://www.w3.org/TR/service-workers/

本文鏈接:http://www.tebozhan.com/showinfo-26-5721-0.html穿上App外衣,保持Web靈魂——PWA溫故

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 提升Go的HTTP路由器的提案

下一篇: 提高虛擬機游戲性能指南

標簽:
  • 熱門焦點
  • K60至尊版剛預熱 一加Ace2 Pro正面硬剛

    Redmi這邊剛如火如荼的宣傳了K60 Ultra的各種技術和硬件配置,作為競品的一加也坐不住了。一加中國區總裁李杰發布了兩條微博,表示在自家的一加Ace2上早就已經采用了和PixelWo
  • Redmi Pad評測:紅米充滿野心的一次嘗試

    從Note系列到K系列,從藍牙耳機到筆記本電腦,紅米不知不覺之間也已經形成了自己頗有競爭力的產品體系,在中端和次旗艦市場上甚至要比小米新機的表現來得更好,正所謂“大丈夫生居
  • JavaScript 混淆及反混淆代碼工具

    介紹在我們開始學習反混淆之前,我們首先要了解一下代碼混淆。如果不了解代碼是如何混淆的,我們可能無法成功對代碼進行反混淆,尤其是使用自定義混淆器對其進行混淆時。什么是混
  • 把LangChain跑起來的三個方法

    使用LangChain開發LLM應用時,需要機器進行GLM部署,好多同學第一步就被勸退了,那么如何繞過這個步驟先學習LLM模型的應用,對Langchain進行快速上手?本片講解3個把LangChain跑起來
  • ESG的面子與里子

    來源 | 光子星球撰文 | 吳坤諺編輯 | 吳先之三伏大幕拉起,各地高溫預警不絕,但處于厄爾尼諾大“烤”之下的除了眾生,還有各大企業發布的ESG報告。ESG是“環境保
  • 蘋果、三星、惠普等暫停向印度出口筆記本和平板電腦

    集微網消息,據彭博社報道,在8月3日印度突然禁止在沒有許可證的情況下向印度進口電腦/平板及顯示器等產品后,蘋果、三星電子和惠普等大公司暫停向印度
  • OPPO K11搭載高性能石墨散熱系統:旗艦同款 性能涼爽釋放

    日前OPPO官方宣布,將于7月25日14:30舉辦新品發布會,屆時全新的OPPO K11將正式與大家見面,將主打旗艦影像,和同檔位競品相比,其最大的賣點就是將配備索尼
  • 英特爾Xe-HP項目終止,將專注Xe-HPC/HPG系列顯卡

    據10 月 31 日消息報道,英特爾高級副總裁兼加速計算系統和圖形事業部總經理 表示,Xe-HP“ Arctic Sound” 系列服務器 GPU 已經應用于 oneAPI devcloud 云服
  • 上海舉辦人工智能大會活動,建設人工智能新高地

    人工智能大會在上海浦江兩岸隆重拉開帷幕,人工智能新技術、新產品、新應用、新理念集中亮相。8月30日晚,作為大會的特色活動之一的上海人工智能發展盛典人工
Top