国产精品嫩草99av在线_一区在线视频观看_欧美高清一区_欧美 日韩 国产 一区_99精品欧美一区二区三区_久久大香伊蕉在人线观看热2_一色屋精品视频在线观看网站_在线亚洲国产精品网站_亚洲区一区二区三区_你懂的视频一区二区

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

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

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

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

1. 什么是PWA

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

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

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

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

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

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

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

2.2 Service worker

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

PWA 應用主要功能特點如下:CXT28資訊網——每日最新資訊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,常見的開發工具框架如下:CXT28資訊網——每日最新資訊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確實對一些傳統的應用軟件和開發方式帶來了一定的沖擊和改變。CXT28資訊網——每日最新資訊28at.com

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

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

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

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

2.5 PWA 與小程序

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

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

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

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

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

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

2.6 小結

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

那么,如果PWA 要獲得更加廣泛的應用,優先級最高的突破點在哪里呢?CXT28資訊網——每日最新資訊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://m.rrqrq.com/showinfo-26-5721-0.html穿上App外衣,保持Web靈魂——PWA溫故

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

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

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

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

    Redmi這邊剛如火如荼的宣傳了K60 Ultra的各種技術和硬件配置,作為競品的一加也坐不住了。一加中國區總裁李杰發布了兩條微博,表示在自家的一加Ace2上早就已經采用了和PixelWo
  • 2023年Q2用戶偏好榜:12+256G版本成新主流

    3月份的性能榜、性價比榜和好評榜之后,就要輪到2023年的第二季度偏好榜了,上半年的新機潮已經過去,最明顯的肯定就是大內存和存儲的機型了,另外部分中端機也取消了屏幕塑料支架
  • JavaScript 混淆及反混淆代碼工具

    介紹在我們開始學習反混淆之前,我們首先要了解一下代碼混淆。如果不了解代碼是如何混淆的,我們可能無法成功對代碼進行反混淆,尤其是使用自定義混淆器對其進行混淆時。什么是混
  • 三言兩語說透柯里化和反柯里化

    JavaScript中的柯里化(Currying)和反柯里化(Uncurrying)是兩種很有用的技術,可以幫助我們寫出更加優雅、泛用的函數。本文將首先介紹柯里化和反柯里化的概念、實現原理和應用
  • 破圈是B站頭上的緊箍咒

    來源 | 光子星球撰文 | 吳坤諺編輯 | 吳先之每年的暑期檔都少不了瞄準追劇女孩們的古偶劇集,2021年有優酷的《山河令》,2022年有愛奇藝的《蒼蘭訣》,今年卻輪到小破站抓住了追
  • 自律,給不了Keep自由!

    來源 | 互聯網品牌官作者 | 李大為編排 | 又耳 審核 | 谷曉輝自律能不能給用戶自由暫時不好說,但大概率不能給Keep自由。近日,全球最大的在線健身平臺Keep正式登陸港交所,努力
  • 阿里大調整

    來源:產品劉有媒體報道稱,近期淘寶天貓集團啟動了近年來最大的人力制度改革,涉及員工績效、層級體系等多個核心事項,目前已形成一個初步的“征求意見版”:1、取消P序列
  • 四年持續更迭堅持探索行業無人之境,HarmonyOS 4帶來五大升級多項創新

    除了華為每年新發布的旗艦手機系列,上億花粉更加期待鴻蒙系統每次的跨版本大更新。8月4日,HarmonyOS 4于HDC 2023正式發布,這也是該系統歷經四年的再
  • 蘋果、三星、惠普等暫停向印度出口筆記本和平板電腦

    集微網消息,據彭博社報道,在8月3日印度突然禁止在沒有許可證的情況下向印度進口電腦/平板及顯示器等產品后,蘋果、三星電子和惠普等大公司暫停向印度
Top 国产精品嫩草99av在线_一区在线视频观看_欧美高清一区_欧美 日韩 国产 一区_99精品欧美一区二区三区_久久大香伊蕉在人线观看热2_一色屋精品视频在线观看网站_在线亚洲国产精品网站_亚洲区一区二区三区_你懂的视频一区二区
亚洲午夜久久久久久久久电影院| 国产综合视频| 欧美色图免费看| 精品在线视频一区| 日韩欧美在线1卡| av在线不卡网| 亚洲欧洲一区二区三区| 99人久久精品视频最新地址| 亚洲国产裸拍裸体视频在线观看乱了| 久久福利毛片| 激情综合网激情| 精品免费一区二区三区| 欧美激情日韩| 亚洲三级在线免费| 久久福利毛片| 国产寡妇亲子伦一区二区| 欧美va亚洲va在线观看蝴蝶网| 99久久精品免费看| 亚洲欧美国产77777| 久久国产主播精品| 国产一区二区三区四区五区入口 | 色综合久久综合网欧美综合网| 17c精品麻豆一区二区免费| 久久综合久久综合这里只有精品| 国产一区二区三区四区五区入口| 国产亚洲一区二区三区四区 | 久久一区免费| 国产v综合v亚洲欧| 中文字幕一区二区不卡| 色av一区二区| 欧美在线播放一区| 日韩av在线免费观看不卡| 精品sm在线观看| 亚洲永久字幕| 成人av网站免费| 亚洲午夜精品在线| 欧美一区二区三区在线观看 | 国产精品久久九九| 国产成人免费视频| 亚洲永久精品大片| 日韩午夜av一区| 国产日韩欧美三区| 国产成人精品综合在线观看 | 国产精品久久久久久久久搜平片 | 亚洲一线二线三线久久久| 91精品国产91久久久久久一区二区 | 日韩精品亚洲一区| 美女视频网站久久| 久久亚洲一区二区三区明星换脸 | 在线日韩av| 丰满亚洲少妇av| 亚洲国产精品久久人人爱蜜臀| 日韩欧美亚洲国产精品字幕久久久| 日韩亚洲国产欧美| 波多野结衣在线一区| 夜夜精品视频一区二区| 精品少妇一区二区三区免费观看| 亚洲伊人网站| 午夜电影亚洲| 国产精品1区2区| 亚洲v日本v欧美v久久精品| 久久先锋影音av| 欧美日韩一区在线| 国产精品欧美日韩一区| 色综合久久综合| 韩国中文字幕2020精品| 艳妇臀荡乳欲伦亚洲一区| 久久亚洲二区三区| 欧美日韩和欧美的一区二区| 亚洲看片免费| 91蜜桃在线观看| 国产另类ts人妖一区二区| 天天综合日日夜夜精品| 亚洲少妇30p| 久久久久国产精品人| 666欧美在线视频| 久久一区二区三区av| 99国产精品视频免费观看一公开| 成人国产免费视频| 激情伊人五月天久久综合| 五月婷婷激情综合网| 亚洲欧美另类久久久精品| 国产丝袜欧美中文另类| 精品噜噜噜噜久久久久久久久试看| 欧美性色欧美a在线播放| 美女黄网久久| 亚洲一卡久久| 国产欧美一级| 99精品视频免费观看视频| 国产精品va| 午夜久久久久| 欧美高清一区二区| 欧美ab在线视频| 91年精品国产| 91色在线porny| 成人av片在线观看| 成人黄色国产精品网站大全在线免费观看 | 色综合天天天天做夜夜夜夜做| 大胆欧美人体老妇| 国产激情一区二区三区| 国产在线播放一区二区三区| 婷婷久久综合九色国产成人 | 国产自产在线视频一区| 91欧美激情一区二区三区成人| 国产精品自拍网站| 国产成人啪免费观看软件| 亚洲六月丁香色婷婷综合久久| 日韩一区欧美一区| 久久天天做天天爱综合色| 91精品国产福利| 日韩免费一区二区| 欧美人xxxx| 久久国产精品一区二区三区四区| 亚洲区欧美区| 国产精品国产三级欧美二区| 国产一区激情| 午夜日韩福利| 亚洲精品少妇| 亚洲国产精品视频一区| 在线综合视频| 欧美精品三级日韩久久| 日本电影亚洲天堂一区| 欧美日韩卡一卡二| 亚洲欧美久久久| 日本高清无吗v一区| 色老汉av一区二区三区| 国产日韩欧美一区在线| 国产伦精品一区二区三区视频黑人 | 欧美精品一区男女天堂| 2023国产精品| 中文字幕一区二区三区在线不卡| 国产日韩欧美综合一区| 亚洲精品中文在线影院| 亚洲精品国产无天堂网2021 | 美女一区二区久久| 精品在线观看视频| 蜜桃免费网站一区二区三区| 国产九色sp调教91| 欧美成人首页| 亚洲乱码久久| 久久一日本道色综合久久| 91精品国产手机| www激情久久| 久久精品综合网| 日韩一区在线看| 亚洲丝袜另类动漫二区| 亚洲成在人线在线播放| 国产尤物一区二区| av动漫一区二区| 国产精品主播| 欧美日韩免费观看一区二区三区 | 天天综合日日夜夜精品| 国产一区亚洲一区| 色综合天天在线| 亚洲激情社区| 一本久久a久久免费精品不卡| 久久精品国产99精品国产亚洲性色| 在线看国产一区二区| 日韩精品专区在线影院重磅| 精品久久久久久久人人人人传媒 | 亚洲不卡在线观看| 午夜电影网亚洲视频| 成人一级片在线观看| 99热免费精品在线观看| 精品1区2区3区| 国产精品久久午夜| 天天色综合成人网| 91麻豆精品一区二区三区| 欧美激情第10页| 在线免费精品视频| 国产精品免费av| 亚洲成人免费影院| a级高清视频欧美日韩| 国产亚洲永久域名| 久久这里只有精品首页| 亚洲欧美综合色| 丝袜亚洲另类欧美综合| 久久精品理论片| 欧美日韩免费观看一区| 欧美高清精品3d| 国产精品女同一区二区三区| 精品影视av免费| 亚洲午夜在线| 日韩欧美亚洲国产另类| 五月婷婷激情综合网| 成人激情校园春色| 日本电影欧美片| 国产精品青草久久| 国产综合色在线| 亚洲国产一区二区在线| 精品国产乱码久久久久久免费| 天天综合网天天综合色| 欧美一区二区三区久久精品茉莉花| 欧美在线一区二区三区| 国产精品美女久久久久aⅴ| 尤物精品在线| 欧美一区二区三区在| 亚洲第一狼人社区| 欧美国产一区二区三区激情无套| 欧美日韩电影在线|