<dd id="hziaf"></dd>

    <dd id="hziaf"></dd>

      <th id="hziaf"><track id="hziaf"></track></th>
    1. <button id="hziaf"><acronym id="hziaf"></acronym></button>

      朗創seo公司

      朗創seo公司幫助企業快速提升網絡營銷業績專注網站建設,SEO關鍵詞排名,一切用數據說話!

      咨詢電話:400-880-6422

      百度在PWA中的探索與實踐

      作者: admin 來源:朗創seo公司 發布日期: 2018-09-21
      信息摘要:
      QCON全球軟件開發大會于4月20日至22日在北京舉行。作為世界信息技術峰會主辦的世界頂級技術大會,共邀請了2500名高級開發人員參加會議。百度高級工程師彭星被邀請參加會議。他還分

      QCON全球軟件開發大會于4月20日至22日在北京舉行。作為世界信息技術峰會主辦的世界頂級技術大會,共邀請了2500名高級開發人員參加會議。百度高級工程師彭星被邀請參加會議。他還分享了百度在PWA前端實踐中的探索和探索。更佳實踐。本文基于彭星的演講。
          
           PWA是一個顛覆性的網絡側概念,在國外已被廣泛接受,許多網站已經轉化為PWA,并取得了很好的效果。理想情況下,微博、饑餓等許多大型網站已經轉變為PWA,并且有更多的網站正在轉型。
          
           可靠性指的是PWA的安全性,它只能在HTTPS上運行。另一方面,當網絡不穩定或不穩定時,仍然可以訪問PWA。
          
           通過增加桌面的粘性和推送離線消息,用戶可以獲得第二次訪問,并依靠良好的用戶體驗來吸引用戶再次訪問。
          
           PWA不是單獨的技術,包括Web應用程序清單、服務工作者、Push API通知API、App Shell App Skeleton等等。我們將關注一些技術和解決相關問題的方法。
          
           Web應用程序清單是一種技術解決方案,用于支持站點在主屏幕上創建圖標,并定制PWA啟動屏幕的圖標和顏色,如下所示:
          
           雖然Web應用程序清單是強大的,但在技術上并不困難。它是一個外部鏈JSON文件,它通過鏈接:Link(=)清單HRF= /資產/清單來引入。JSON>文件的詳細內容如下:
          
           服務工作者是PWA中更重要的概念之一。它是一個特殊的Web工作者,獨立于瀏覽器的主線程運行。它可以攔截用戶的網絡請求,操作緩存,并支持推和后臺同步。
          
           Service.r使用Cache Storage、Cache API來操作本地緩存,以及獲取API來請求服務器端數據,不管是否存在網絡連接,還是出現404,500個站點,都允許用戶查看專門定制的錯誤頁面,而不是瀏覽器默認的404頁。
          
           PWA通常是SPA,通常使用App Shell來設計模型,App Shell是PWA中非常重要的概念,那么什么是App Shell呢
          
           App Shell是指支持頁面所需的HTML、CSS和JavaScript資源的更小集合。一旦脫機,就可以確保在重復訪問用戶時提供即時、可靠和良好的性能。下面的截圖向用戶展示了應用程序外殼
          
           如上所示,App Shell呈現標題部分,因此主體部分在加載數據之前是白色的,這對用戶體驗非常不利,有一個術語叫做App Skeleton,在將數據呈現在白色屏幕位置之前,盡量不要出現長時間的白色屏幕。
          
           App Skeleton需要在盡可能短的時間內呈現給用戶,所以通常,App Skeleton將被編譯成HTML,就像下面的代碼一樣,期望瀏覽器在加載HTML之后顯示骨架屏幕。
          
           但是骨架屏幕將被阻塞,直到CSS文件被加載,并且瀏覽器不會呈現骨架屏幕,因此用戶將看到白色屏幕的時間比預期的長。很少有站點會注意到,即使生成了骨架屏幕,也不一定能解決CSS加載的問題。防止骨架屏幕被渲染,比如饑餓的PWA主頁。
          
           那么,我們怎樣才能解決這個問題呢它可以通過Link的預加載來解決,這并不妨礙HTML的渲染。在加載預加載的資源之后,它將更改回樣式表,并調用mount以顯示JS的呈現結果。
          
           除了通過預加載的這個解決方案之外,您還可以將鏈接從CSS鏈接到JS中,而VUE項目默認為JS中的CSS。
          
           PWA的全名是Progressive Web Apps,意味著它是增量的,也就是說,它是在現有的基礎上逐漸添加的,從而改善用戶體驗,不需要回推,整個站點都在進行轉換。
          
           SEO是每個站點都關心的問題,PWA通常是SPA,眾所周知,傳統的搜索引擎不能通過JS索引來渲染頁面,那么,我們需要解決這個問題。
          
           首先,百度不是傳統的搜索引擎,百度、谷歌都能夠對移動SPA頁面進行索引。所以對于其他搜索引擎來說,解決PWA搜索引擎優化問題的唯一方法就是服務器端渲染(SSR),現在市場上的主流MVVM框架提供了SSR解決方案,比如React、Vu。E、San等等。
          
           SSR頁面是服務器直接輸出,內容頁面同時輸出,那么如何將這種方法與Service.r結合起來脫機以及如何實現App Shell的啟動效果呢我們采用服務人員+應用程序外殼+ SSR+解決方案(VUE/Engule/SAN)來完美地解決這個問題。
          
           在第一個請求中,服務器直接在SSR之后輸出內容,在加載頁面之后注冊Service.r,并且Service.r在安裝階段預緩存一些靜態文件或其他資源。這里,我們添加了一個具有/appshell地址的請求,該請求返回App SHell的HTML的內容,其中包含來自JS和CSS的代碼,可以作為Vue:HTML的示例來引用
          
           http://Github.com /Lavas Project /Lavas模板VU/BLB/Basic基本/PulsAppSHIL.VUE
          
           在第二個請求上,服務工作者根據請求確定當前請求是否是頁面請求。模式= =導航。如果是,預緩存/AppStk HTML結構返回到頁面。在渲染之后,AppShell通過當前URL請求相應的JS和數據來呈現頁面。
          
           這樣,不僅可以解決SEO問題,站點可以完全脫機,而且縮短了白屏時間,更重要的是,還可以大大降低服務器SSR帶來的壓力。NT請求都是前向渲染。
          
           PWA在2017年初,只有Chrome和Firefox支持PWA,經過一年的發展,中國的主流瀏覽器都支持PWA,iOS也在新的11.3版本中支持PWA。
          
           BOW(Brilliant Open Web)團隊是一個專門的Web技術開發團隊,致力于促進Open Web技術的發展,使Web成為開發人員的首選。
          
          

      咨詢熱線

      400-880-6422
      快三竞彩