icon 替代方案

• Chrome & Opera :避免icon變形，可以指定sizes尺寸。

<link rel="icon" sizes="192x192" href="src/images/icons/demo-icon192.png">

• Safari: 按照昨天manifest.json中的icon設定各個尺寸的icon。

    <link rel="apple-touch-icon" href="src/images/icons/demo-icon48.png" sizes="48x48">
    <link rel="apple-touch-icon" href="src/images/icons/demo-icon72.png" sizes="72x72">
    <link rel="apple-touch-icon" href="src/images/icons/demo-icon96.png" sizes="96x96">
    <link rel="apple-touch-icon" href="src/images/icons/demo-icon144.png" sizes="144x144">
    <link rel="apple-touch-icon" href="src/images/icons/demo-icon168.png" sizes="168x168">
    <link rel="apple-touch-icon" href="src/images/icons/demo-icon192.png" sizes="192x192">

• IE & Windows Phone

<meta name="msapplication-TileImage144x144" content="src/images/icons/demo-icon144.png">

theme-color(網址列顏色) 替代方案

• Chrome, Firefox 和 Opera

<meta name="theme-color" content="色碼">

• iOS

<meta name="apple-mobile-web-app-status-bar-style" content="色碼">

safari 其他設定

• standalone效果設定:設定yes，隱藏網址列

    <meta name="apple-mobile-web-app-capable" content="yes">

• 設定app標題

    <meta name="apple-mobile-web-app-title" content="MyGram">

其他資源

Apple Guide
MSDN

Chrome 自動顯示Add to Home Screen 訊息

圖片來源： https://developers.google.com/web/fundamentals/app-install-banners/

必要條件

• 設定short_name
• 設定 name
• 設定 192x192尺寸的png icon檔
• 設定 start_url
• 註冊 service worker
• 網站必須有https

Chrome 提供javascript測試App Install Banner Events

<script>
      window.addEventListener('beforeinstallprompt', function(e) {
      // beforeinstallprompt Event fired
      // e.userChoice will return a Promise.
      e.userChoice.then(function(choiceResult) {
        console.log(choiceResult.outcome);
        if(choiceResult.outcome == 'dismissed') {
          console.log('User cancelled home screen install');
        }
        else {
          console.log('User added to home screen');
        }
      });
    });
</script>

這支script新增了一個簡單的監聽事件beforeinstallprompt測試使用者點選新增還是取消。
如果使用者取消，則顯示User cancelled home screen install
使用者加入，則顯示User added to home screen

var deferredPrompt;

window.addEventListener('beforeinstallprompt', function(e) {
  console.log('beforeinstallprompt Event fired');
  e.preventDefault();

  // Stash the event so it can be triggered later.
  deferredPrompt = e;

  return false;
});

這支用於延遲載入提示視窗。

btnSave.addEventListener('click', function() {
  if(deferredPrompt !== undefined) {
    deferredPrompt.prompt();

    deferredPrompt.userChoice.then(function(choiceResult) {
      console.log(choiceResult.outcome);
      if(choiceResult.outcome == 'dismissed') {
        console.log('User cancelled home screen install');
      }
      else {
        console.log('User added to home screen');
      }
      deferredPrompt = null;
    });
  }
});

如果使用者點擊按鈕時，才觸發加入Home Screen視窗。

實作延遲載入

先來看看Demo結果

流程

今天我們要來做的事情，不要一開啟網頁的時候，就詢問使用者要不要安裝，因為不一定每個近來網站的人都一定是對網站有興趣的，所以我們假設點選「+」來新增訊息的人，會是我們潛在
要抓住的客群。

因此，當使用者點選「+」的時候，我們再載入「Install to Home Screen」的功能。

第一步: 預設跳出安裝訊息的程式中，阻止它執行!

var deferredPrompt;
window.addEventListener('beforeinstallprompt', function(event){
    console.log('安裝視窗跳出來前 阻止它!!');
    event.preventDefault();
    deferredPrompt = event;
    return false;
});

首先，我們用deferredPrompt暫存安裝狀態，並透過event.preventDefault()，取消預設會執行的程式。

第二步: 在觸發按鈕時，如果安裝狀態存在，跳出來給使用者選

function openCreatePostModal() {
  createPostArea.style.display = 'block';
  if(deferredPrompt){
      deferredPrompt.prompt();
      deferredPrompt.userChoice.then(function(choiceResult){
        console.log(choiceResult.outcome);
        if(choiceResult.outcome == 'dismissed')
            console.log('使用者取消安裝');
        else
            console.log('使用者安裝');
      });
      deferredPrompt = null;
  }
}

當點選「+」，會觸發openCreatePostModal()這支function，如果deferredPrompt存在，deferredPrompt.prompt()，來執行提示安裝視窗，接著透過userChoice，等待使用者回應，會回傳一個promise，所以為了測試使用者行為，接著寫then的function，使用者選擇結果會顯是在choiceResult.outcome。
如果選擇安裝：回傳accepted
選擇關閉： 回傳dismissed

測試：使用Android Pixel模擬機做測試

Step1: 開啟chrome開發者視窗，選More Tools -> Remote devices

透過chrome瀏覽器提供的遠端連線做測試。

Step2: 打勾「Port forwarding」

Step3: 左邊輸入「8080」，右邊輸入「localhost:8080」，點選Add Rule

這一步我們要建立在手機或虛擬機上可以存取的連結，左邊是填寫裝置要輸入的port，右邊是網站local的網址。

Step4: 點選「裝置名稱」

Step5: 點選「Inspect」

當你左邊出現裝置名稱，代表連線成功。
手機：要插USB。
虛擬機： 可以使用Android Studio的虛擬機。

接著會看到現在瀏覽器開著的網址，選擇Inspect之後會出現手機的畫面

連線成功畫面

這時候當你改變手機或虛擬機上的畫面，localhost的網頁也會跟著變動，這樣我們就能來偵錯啦!!!

Step6: 回歸測試重點

Service Worker 註冊成功
安裝視窗跳出來前 阻止它!!
App banner not shown: page has requested the banner prompt be cancelled

當載入首頁的時候，console視窗出現了三個訊息。

1. 註冊了Service Worker
2. 成功阻止安裝視窗出現
3. 瀏覽器顯示「requested the banner prompt be cancelled」，意思就是原本應該出現的安裝視窗被取消了。

Step7: 點選「+」，跳出安裝視窗

accepted
使用者安裝

console顯示accepted，代表使用者介面成功出現安裝視窗，並且點選了安裝到裝置桌面。

總結

看到現在會發現，這個event的必要條件不是有https嗎？
那是因為google為了開發人員測試方便，local的環境屬於例外情形，今天看到Service Worker註冊成功，但是我們不是還沒講到嗎!!
因為event必要條件之一就是環境必須註冊Service worker所以為了demo，就先補上去了，但接下來幾天的主角就是它啦~~
Manifest還沒有很全面的支援下，還是可以透過meta設定補足想實現的效果，接下去我們就接著學習，另一個核心的角色Service worker吧!

閱讀資源

google developer
github範例程式
遠端Debug