Angular移動工具集要讓Web應用有原生的感覺
決定為哪個平臺構建應用一直是個挑戰。開發人員應該把時間和金錢花在原生實現上,還是完全專注於Web,或者是某種組合?新增加的Angular移動工具集(AMT)使用新的Web平臺API讓Web應用有了更多原生的感覺,希望可以為做這種決定的人減輕一點壓力。
\\在ng-conf 2016大會上,Jeff Cross和Alex Rickabaugh花時間介紹了AMT以及它如何幫助開發人員讓Web應用的行為更像原生應用。Cross做了總結:
\\\\\“Progressive Web Apps”是以一些已經在某些Web瀏覽器中實現了的新興Web標準為基礎的最佳實踐和技術。對於一些普通的Web應用,你使用新的平臺API新增新的功能,讓它們更加強大。它們可以在任何平臺上工作,但最好是工作在它們可以更多地利用新的技術和API的平臺上。
\
這些技術的主要目標是讓應用可以立即載入、離線工作、可安裝,並提供通知功能。通常,原生應用預設就具備這些特性,但在Web上實現這些特性並不容易。在這四個特性中,Cross和Rickabaugh重點介紹了前三個以及對應每一個特性的技術:
\\- App Shell(立即載入) \\
- Service Worker(離線) \\
- Web App Manifest(可安裝)\
Cross說,App Shell是指“包含動態內容的靜態UI,通常由一個工具欄和某種導航……供所有應用程式檢視使用的東西。”在離線編譯過程中,AMT部分地依賴Angular Universal生成靜態內容。
\\原生應用的其中一個好處是,一旦安裝,即使沒有網路,也總是可以保證最低限度的使用。AMT依賴Service Worker在後臺下載應用程式碼,因此,應用可以離線工作。一個意外的結果是,在後續載入時,應用的啟動速度更快,因為它已經有了程式碼,省去了網路和下載呼叫。
\\使用App Shell和Service Worker可以將首次同示例應用互動的時間從2356毫秒減少到128毫秒。
\\最後,Rickabaugh說,Web App Manifest是“一個標準,允許你指定應用程式的後設資料。”其用途是允許將Web應用“安裝”在裝置上。執行這些應用中的任何一個,其外觀和感覺都跟原生應用一樣,因為瀏覽器邊框可以隱藏。
\\最大的問題是有關progressive web apps的這三項技術中有兩項在Safari或Edge瀏覽器中無效。
\\App Shell之所以有效是因為它在應用載入前會渲染成HTML傳給客戶端。Service Worker是一項尚處於發展中的Web平臺開發技術,隨著時間推移,會有更多的瀏覽器支援。Web App Manifest只在Android上有效。iOS目前有自己的方式讓應用出現在使用者的主介面上,而不需要瀏覽器邊框。
\\感興趣的讀者可以在YouTube上觀看完整視訊。
\\檢視英文原文:Angular Mobile Toolkit Tries to Make Web Apps Feel Native
相關文章
- Flutter Cupertino 教程:如何構建外觀和感覺原生的 iOS 應用FlutteriOS
- 一項簡單的移動機制,讓這款城建模擬遊戲有了RPG的感覺遊戲
- [譯] PWA 會取代原生移動應用嗎?
- 基於HTML5的移動Web應用HTMLWeb
- 原生移動應用框架React Native與Flutter比較框架React NativeFlutter
- 基於HTML5的移動Web應用——檔案操作HTMLWeb
- Web 和移動應用程式測試之間的區別Web
- 如何選擇合適的移動應用測試工具?
- 棒型電感的應用有哪些gujing
- 基於HTML5的移動Web應用——Geolocation地理定位HTMLWeb
- web 移動端 橫向滾動的阻尼感很強,滑動不靈敏Web
- Dart 2 Web 應用遷移指南DartWeb
- 體感互動的多方面應用
- 基於Python實現互動式資料視覺化的工具(用於Web)Python視覺化Web
- 分散式 PostgreSQL 叢集(Citus)官方教程 - 遷移現有應用程式分散式SQL
- Angular 應用要啟用 Service Worker 所需滿足的一些前提條件Angular
- Windows 的這款工具,有時讓我覺得 Mac 不是很香WindowsMac
- 移動應用app設計開發工具:Creo 2 for macAPPMac
- 遊戲應該讓玩家主動移動嗎遊戲
- 振動感測器資料採集閘道器的功能及應用場景
- 新移動框架中企業自建應用的來源是【移動輕應用管理】框架
- 相容移動端的 Web 檔案館視覺化管理系統Web視覺化
- 雲原生平臺,讓邊緣應用玩出花!
- 正確選擇合適的移動應用測試工具很重要
- jpackage安裝Java原生本機應用的新工具PackageJava
- 體感互動大屏的功能與應用
- 用gpt直接寫後端的感覺GPT後端
- 視覺化程式設計技術在移動 UI 自動化中的應用 - 張海峰視覺化程式設計UI
- 使用React Native和Expo快速構建原生移動iOS和Android應用程式React NativeiOSAndroid
- 為什麼要部署Web應用防火牆(WAF)?Web防火牆
- Web移動端 自適應縮放介面Web
- Docker部署Angular應用DockerAngular
- 移動應用效能優化優化
- 移動Web單頁應用開發實踐——頁面結構化Web
- 感測器在自動駕駛中的應用自動駕駛
- 移動web——移動web開發簡介,WebStorgae簡介Web
- 移動端車牌識別的應用
- 72 個網路應用安全實操要點,全方位保護 Web 應用的安全Web
- Web應用程式測試的工具selenium用法詳解Web