owned this note   changed a year ago  
Linked with GitHub

PWA 開發血淚史 ／ Ko Ko（柯克）

歡迎來到 Modern Web 2020 共筆

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

共筆入口：https://hackmd.io/@ModernWeb/2020
手機版請點選上方 按鈕展開議程列表。

簡報下載

共筆從這開始

tags: MW20 框架與應用 PWA

講者blog: magic-panda-engineer.github.io
講者mail: qqkerk@hotmail.com

認識PWA

PWA 是甚麼

  • Progressive Web Apploication
    • Progressive 漸進的意思，從Web進站到APP。
    • 或是進展到下一世代的Web APP。
  • 2016 年Google開始大力的推廣
  • 2018 年iOS也開始支援。
  • 本質就是網頁，可以安裝在手機裡 (ps: iOS Chrome 不能一鍵安裝到桌面，只能提示)
  • 可以支援手機的硬體控制、離線操作。
    • 離線是重點！！

PWA的優劣

優勢

  • 不用上架到Google Play Store & iOS APP Store可以省下上架費（25美金hen貴）
  • 安裝檔較小
  • 可以不用管APP下面的負評。
  • 本質是網頁，可以透過優化SEO來做推廣。
  • 不用寫一堆平台dependent的code。Write once Run everywhere。
  • 安裝擋較小
  • 可以優化SEO來做推廣
  • 大家越來越不想下載APP。
  • 可以離線工作

劣勢

  • 吃瀏覽器本身的資源(？)
  • 非原生的效能略差
  • 手機本身硬體的支援度有限(尤其實雙平台)

PWA 和 Hybrid APP的差異

PWA

  • 不用上架
  • 本質就是Web
  • 手機本身硬體支援有限
  • 董瀏覽器的特性會更好開發。

Hybrid APP (Cordova)

  • 還是要上架到Google Play Store & iOS APP Store
  • 手機本身硬體的支援度比較好一點點
  • 懂原生平台的開發會好一點

PWA 成功案例

  • 星巴克網路訂餐的流量加倍
    • PWA: 600KB
    • Android APP: 20MB
    • iOS APP:146 MB
  • 推特送出數量提昇75%
    • PWA: 600 KB

PWA的兩大核心

Service Worker

  • 是連接個瀏覽器API的橋樑
  • 會自動喚醒，不使用時自動休眠
  • 一定要註冊
  • 一般做成sw.jS

Manifiest.json

  • 就是一個設定檔的json，拿來描述APP的相關東東。

好用的開發工具

今天是踩坑，所以以介紹為主。

踩坑血淚史

重頭戲

  • 第一坑：https:

    • 要有https或是localhost，sw.js才會跑。
    • 很多客戶沒有https
    • 尤其企業內網

  • 第二坑：storage要記得清掉

    • 在開發測試時，要記得清掉，否則更新後沒有update

  • 第三坑：善用ES6之後的小特性

    • 可能會在sw.js裡寫很多業務邏輯，不小心會寫成波動拳。
    • 善用 promise、async/await，避免非同步的問題。

  • 第四坑：定義好要離線工作的範圍

    • 離線工作是 PWA 的一大特性。
    • 但是離線工作愈多。就是意味著你要額外寫的 Service worker 更多。

  • 第五坑：善用 sync 避免斷線

    • Service worker可以註冊sync manager，加入一個sync的tag。
    • 沒有網路的狀態下，先將欲上傳的資料存在indexedDB。
    • Sync事件觸發網路正常後，則可以上傳資料回到server。
    • Sync comopleted後，則刪除sync並刪除tag。

  • 第六坑：iOS要使用者手動加到主畫面

    • 在安卓,PWA可以一鍵安裝到手機,但是iOS不行。
    • iOS只能用提示的方式,讓使用者安裝到手機。

  • 第七坑：iOS不支援notification。

    • Safari電腦版支援,但是iOS版不支援…推播有困難。
    • 用can i use去確認這件事。

  • 第八坑：Service worker 的更新問題

    • 部署到使用者端後,如果swjs有更動,可能會導致更新不即時。(明明已更新，使用者端卻還沒)
    • 可以在中間加入一個js來控制註冊與註銷。

  • 第九坑：手機硬體功能要注意

    • 用用相機掃QR CODE還可以。
    • 聲音、視訊、gps、電池等等,文件上號稱有,但是還是要建議要實際測試過。
    • NFC我沒有測成功。
    • 建議還是上can i use査査。
    • 河豚計畫，可愛但是有毒
    • 不要跟長官答應得太快。就算可以用，也還是測測看，硬體問題很難解。
Select a repo