前言

Do you want to sell sugar water for the rest of your life, or do you want to come with me and change the world？

我沒有能力改變世界，所以我只能先從改變自己開始。

前言

我們都知道 Angular 是一個純前端的網頁框架，學習上也比其他框架多了些許的門檻，甚至也需要我們改變開發模式，說白一點，很多地方無法用過去的經驗來套用，我想這也是許多人抗拒學習的因素，當然對於開始使用的人來說，會逐漸了解這些代價的犧牲是為了解決過去開發上會遇到的許多問題，相對報酬來說得到的會比失去的還多，最近筆者就看到一個具有 Angular 風格的後端框架-Nest，對於已經會 Angular 的人來說，這應該是一個報酬率很高的投資。

前言

對程式設計師來說撰寫程式應該是最花時間跟精力的事情，但是撰寫文件卻是一件不輸撰寫程式的工作，尤其是現在這種需求變更越來越頻繁、更新速度越來越快的時代，撰寫文件往往變成只是應付驗收用的工作，所以很多公司都是驗收前再開始撰寫，避免浪費人力跟時間，而這種敷衍的心態也造成系統上線(驗收)後隨著需求不斷的調整與增加，文件跟程式越來越不同步，甚至不再維護文件，所以承接別人的系統應該是程式設計師最討厭的事情。

前言

原本打算研究 ServiceWorker 另一個功能-Sync，不過網路上找不到比較詳細的說明，也沒比較完整的範例，因此打算改研究 Workbox 或 @angular/service-worker，因為這2個是將 Angular 調整為 PWA 比較常見的用法，但是從 npm 網站查詢可以看到 @angular/service-worker 被歸屬在 mobile-toolkit 下面，而 mobile-toolkit 幾乎沒有在維護了。

ServiceWorker

在 PWA 偽裝術：manifest.json 我們透過 manifest.json 來讓 Web 可以在桌面上產生捷徑，並在執行時隱藏了不需要的網址列，讓外觀上跟一般 App 已無太大差異，接下來我們要解決 Web App 的另一大難題-離線機制，雖然說現在的系統幾乎都是透過網路與後端資料做即時交換，可說如果沒有網路的話過半數的 App 大概都會失去它的功用，但是與網頁不同的是在沒有網路狀態下仍然有畫面，而網頁則會顯示瀏覽器預設的警示畫面，相較之下對於一般使用者來說較不友善，而起好一點的 App 都會將網路下載下來的資訊儲存在本機端，當離線時雖然無法再與後端做資料交換，但是仍然可以提供之前獲取的資料，雖然 Web 也提供了離線儲存機制，但是扣除安全性不說，開發上就比較困難，尤其是使用者(或是瀏覽器擴充功能)還可以禁止相關功能。

推送通知 (Push Notification)

推送通知(Push Notification) 或者也可以稱作推播，有智慧手機的人我想應該非常熟悉，尤其是 App 盛行的時期幾乎每隻 App 都會有推送通知功能，這也是惡夢的開始，你會發覺在大半夜裏你的手機會三不五時地叫你起床，所以現在的手機幾乎都內建了勿擾模式，讓使用者可以設定每天的某個時段可以封鎖特定的訊息通知，甚至現在的系統都可以讓使用用決定 App 允許那些權限。

漸進式網頁應用程式 (Progressive Web App)

什麼是 漸進式網頁應用程式(PWA) 其在網路上已經有很多篇文章了，筆者看完得到的結論就是-讓以前只有 APP 做得到的事情，現在在 Web 上也可以做到，而現在之所以能實現是因為新版的瀏覽器增加了相關功能，言下之意就是瀏覽器的版本很重要，後續測試會以 Google Chrome 為主。

歷史

很多事情沒有經歷過就無法深刻體會，所以”感同身受”真的很難，但是軟體工程師是一個很特別的職務，尤其是與業務的隔閡，說給同業的朋友聽時，既使他沒遇過同樣的事情，但是也可以感同身受了解你的苦處。

Ionic 與 Angular 比較

在建立 Ionic 專案中，我們練習了如何建立 Ionic，接下來對於 會開發 Angular 程式的人來說，最關注的應該就是 Ionic 跟 Angular 有什麼不同？要再多學些什麼？

建立專案

在Ionic 開發環境中安裝好開發環境之後，接下來就是開始由無到有的建置新專案，Ionic 其實是以 Angular 為核心基礎所衍生出來的框架，所以對已經會 Angular 的人來說會很容易上手，我們拿 Ionic CLI 與 Angular CLI 來比較，就會發現指令十分雷同，下面列出常用指令：