[Angular Firebase 入門與實做] Day-23 Progressive Web App with Firebase

2018鐵人賽 angular firebase angularfire2 angualr2

AlanShun

2018-01-12 19:35:41

2931 瀏覽

分享至

每日一句來源：Daily English

Pride relates more to our opinion of ourselves, vanity to what we would have others think of us. -- 驕傲多數情況下，無非是我們對自己的看法，但虛榮卻指的是我們過於看中其他人對我們的評價。

前兩天我們使用了FCM來推波訊息，很酷沒錯，但是還是要開啟瀏覽器，依舊不是我們要的，因此我們可以搭配PWA來把我們的web包裝起來，讓他更像APP並且能在背景執行取得推波！

PWA是什麼？筆者這邊就不再贅述，詳細大家可以參考
30 天 Progressive Web App 學習筆記
 Google 官方文件

那我們直接開始設定環境吧~

在先前我們已經有加入推波的services worker了，我們今天要透過cli內建的serviceWorker來實做PWA。

首先我們到.angular-cli.json加入設定

在app底下加上"serviceWorker": true

"environments": {
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
},
"serviceWorker": true

接著我們要建立一個ngsw-config.json這是讓CLI使用的config檔案，注意名子不要打錯了
接著打開內容，相關詳細設定參數可以參考官方說明
或是這裡https://medium.com/google-developer-experts/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-2-practice-3221471269a1

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ],
      "url": [ // 如果你有想要放的額外路徑，可以放在這裡
        "https://fonts.googleapis.com/icon?family=Material+Icons"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

接著我們要安裝@angular/service-worker
npm i @angular/service-worker

回到app.module把此module加入

ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})

再來這邊要特別注意！筆者這裡卡了許久，不知道為何，在有angularfire2加入的狀況下，ngsw-worker.js就是不會被載入，筆者查了很多資料最後我們需要在main.ts底下加入以下才有辦法正常運作

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(() => {
    if (environment.production && 'serviceWorker' in navigator) {
      navigator.serviceWorker.register('/ngsw-worker.js');
    }
  })
  .catch(err => console.log(err));

再來我們要在index.html加入一些meta讓瀏覽器知道這是PWA

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="msapplication-starturl" content="/">
<meta name="theme-color" content="#ff8a65">

結束!接著我們只要ng build --prod就能產生一個pwa的架構了!
看一下dist底下的檔案，會多這兩個檔案