您在這裡

PWA(漸進式網頁應用)交流研讨

James Qi 在 2017年4月24日 - 13:33 發表

  去年就聽說過Google的PWA(Progressive Web Apps),後來在關注和開發微信小程序中,對“漸進式網頁應用”又有了進一步的了解,并寫過一篇《Google的PWA(漸進式網頁應用)是未來趨勢嗎?》的博文,還由此有一位機械工業出版社編輯聯系我能否寫一本主題為PWA的書,雖然我對出書有興趣,但其實對PWA技術的細節和程序實現了解并不夠,而且感覺這個技術在國内的興起還需要以年來計算的時間,所以寫書的事情也不急,3月份去北京參加Google AdSense研讨會的時候也與這位出版社編輯見了一面,說晚些時候再說。

  不過也許用不了那麼長的時間就會興起的,例如近期微信小程序突然發力,推出多項新功能(個人可以申請開發、支持模糊搜索、小程序碼長按識别、公衆号綁定小程序、小程序之間跳轉推薦、小程序第三方平台等),就可能讓小程序加快發展,而PWA也可能會加快普及。我們公司在春節後也招聘了專門的前端技術開發人員,做了一些webapp方面的開發嘗試。上周還專門做了一次前端技術交流。

  我把Google PWA官方網站上面的内容也摘錄、翻譯了一下,用PPT和大家分享,現在再摘錄放在下面:

一、軟件、網站和應用的演進

  • 軟件平台演變
    • PC單機軟件時代
    • 局域網C/S軟件時代
    • 互聯網Web時代
    • 移動互聯網App時代
    • 未來?web v.s. Native app
  • 用戶對軟件的需求:
    • 功能:滿足功能需要
    • 便捷:方便獲取
    • 快速:響應速度快
    • ...

二、Progressive Web Apps簡介

  • 主要特征
    • Reliable 可靠性 - 即時加載、離線可用
    • Fast 快速 - 即時響應,平滑動畫、滾動
    • Engaging 吸引力 – 類似原生app,真實用戶感受

更詳細說明見網站

 

三、為什麼要建PWA?

  • 添加到首屏
    Worthy of being on the home screen 
  • 無論網絡環境都能可靠工作
    Work reliably, no matter the network conditions 
  • 增加吸引力
    Increased engagement 
  • 提高轉換率
    Improved conversions

四、PWA檢查列表

  • Baseline
    • Site is served over HTTPS
    • Pages are responsive on tablets & mobile devices
    • The start URL (at least) loads while offline
    • Metadata provided for Add to Home screen
    • First load fast even on 3G
    • Site works cross-browser
    • Page transitions don't feel like they block on the network
    • Each page has a URL
  • Exemplary 
    • Indexability & social
    • User experience
    • Performance
    • Caching
    • Push notifications
    • Additional features

五、深入知識點

  • Move to HTTPS
  • Preventing Mixed Content
  • App Install Banners
  • Lighthouse
  • Get Support

六、做第一個PWA

......

  PPT的講解還不方便用博客呈現出來,我以後再補充文字内容。

  另外,如果有對PWA技術實現很了解和對出書很感興趣的朋友,也歡迎與我聯系,我很想能找到寫PWA書的合作作者,謝謝!

自由标簽:

發表新回應

Plain text

  • 不允許使用 HTML 標籤。
  • 自動將網址與電子郵件地址轉變為連結。
  • 自動斷行和分段。