PWA

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

楊凱傑 2019/04/15 11:22:51
616
一. 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接受安裝至桌面');
}
});
});
 
(5)啟動應用時符合下列條件時系統會跳出是否將應用加至桌面的提示
    1.必須為https協議
    2.不能為無痕模式
    3.還未安裝過該應用
    4.必須為chrome android才支援
 
(6)目前IOS並無支援跳出是否將應用加至桌面的提示的功能,只能自行手動點擊分享圖標,再點擊添加到主屏幕,最後點擊確定即可
 
三.快速檢查功能是否OK
     chrome上調成手機檢視模式後按下F12,然後選擇application,按下Add to homescreen後如果console沒有跳出錯誤提示即表示成功
 
 
四.成功效果
 
 
 
楊凱傑