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

{%hackmd @ModernWeb/HkqZxb98v %}

### [簡報下載](https://s.itho.me/modernweb/2020/Slides/d103.pdf)
> 共筆從這開始

###### tags: `MW20` `框架與應用` `PWA`

> 講者blog: magic-panda-engineer.github.io
> 講者mail: [e-mail]
## 認識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的相關東東。

## 好用的開發工具
> 今天是踩坑，所以以介紹為主。

* Workbox
* Google 官方提供的工具
*
* Lighthouse
* 可以直接在瀏覽器看報告。

* PWA Sample: https://magic-panda-engineer.github.io/

## 踩坑血淚史
> 重頭戲
* 第一坑：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](https://caniuse.com/)去確認這件事。
* 第八坑：Service worker 的更新問題
* 部署到使用者端後,如果swjs有更動,可能會導致更新不即時。(明明已更新，使用者端卻還沒)
* 可以在中間加入一個js來控制註冊與註銷。
* 

* 第九坑：手機硬體功能要注意
* 用用相機掃QR CODE還可以。
* 聲音、視訊、gps、電池等等,文件上號稱有,但是還是要建議要實際測試過。
* NFC我沒有測成功。
* 建議還是上[can i use](https://caniuse.com/)査査。
* 河豚計畫，可愛但是有毒
* 不要跟長官答應得太快。就算可以用，也還是測測看，硬體問題很難解。