PWA

如何將網站當成原生App加至手機桌面

楊凱傑 2019/04/15 11:22:51

1 6551

一. PWA簡介

PWA的全稱是Progressive Web App，翻譯過來就是漸進式增強的網頁應用。漸進式增強是PWA的開發宗旨，它的好處之一就是讓PWA能夠兼容所有的瀏覽器。利用Web的技術給移動端的設備提供App的體驗，這是PWA的目的。因此，PWA經過Google Chrome團隊的開發在可靠性、響應速度、用户體驗三方面，升級了原來Web App的體驗。

二.讓系統會跳出是否將應用加至桌面的提示步驟

(1)在根路徑下創建manifest.json文件:

{
  "name": "阿發",
  "short_name": "阿發",
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "display": "standalone",
  "Scope": "/",
  "start_url": "/ChatWeb/chat",
  "icons": [
    {
      "src": "resources/images/app/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
   
  ],
}

也可至https://app-manifest.firebaseapp.com/自動產生manifest.json文件

欄位簡介:

name	應用程式名稱
short_name	應用程式簡稱
theme_color	主題顏色
background_color	啟動畫面背景顏色
display	顯示模式：fullscreen、standalone、minimal-ui、browser
Scope	相關設定影響範圍
start_url	起始頁面
icons	應用程式圖示(可設定多種size)

(2)在根路徑下創建service-worker.js

self.addEventListener('install', function (event) {
});
self.addEventListener('activate', function (event) {
});
self.addEventListener('fetch', function (event) {
});

(3)網頁上加上 <link rel="manifest" href=" manifest .json "/>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link rel="manifest" href="manifest.json"/>

(4)初始化時執行下列script

1.註冊service-worker.js

2.監聽跳出提示後user的選擇

   if('serviceWorker' in navigator){
     navigator.serviceWorker
           .register('service-worker.js')
           .then(function(){
               console.log('Service Worker 註冊成功');
           }).catch(function(error) {
               console.log('Service worker 註冊失敗:', error);
           });
  } else {
     avalon.log('瀏覽器不支援 serviceWorker');
  }

  window.addEventListener('beforeinstallprompt', function(e) {
       e.userChoice.then(function(choiceResult) {
           if(choiceResult.outcome == 'dismissed') {
              console.log('user取消安裝至桌面');
           }
           else {
              console.log('user接受安裝至桌面');
           }
       });
  });