PWA，Progressive Web Apps 是結(jié)合了 web 和 原生應(yīng)用中最好功能的一種體驗(yàn)。它能夠快速地加載，即使在比較糟糕的網(wǎng)絡(luò)環(huán)境下瞪浸，能夠推送相關(guān)消息, 也可以像原生應(yīng)用那樣添加至主屏齐蔽，能夠有全屏瀏覽的體驗(yàn)赡茸。
為什么你的網(wǎng)站應(yīng)該升級(jí)為PWA
漸進(jìn)增強(qiáng)- 能夠讓每一位用戶使用，無論用戶使用什么瀏覽器蓖谢，因?yàn)樗鞘冀K以漸進(jìn)增強(qiáng)為原則捂蕴。
響應(yīng)式用戶界面- 適應(yīng)任何環(huán)境：桌面電腦譬涡，智能手機(jī)，筆記本電腦启绰，或者其他設(shè)備昂儒。
不依賴網(wǎng)絡(luò)連接- 通過 service workers 可以在離線或者網(wǎng)速極差的環(huán)境下工作。
類原生應(yīng)用- 有像原生應(yīng)用般的交互和導(dǎo)航給用戶原生應(yīng)用般的體驗(yàn)委可，因?yàn)樗墙⒃?app shell model 上的。
持續(xù)更新- 受益于 service worker 的更新進(jìn)程腊嗡，應(yīng)用能夠始終保持更新着倾。
安全- 通過 HTTPS 來提供服務(wù)來防止網(wǎng)絡(luò)窺探，保證內(nèi)容不被篡改燕少。
可發(fā)現(xiàn)- 得益于 W3C manifests 元數(shù)據(jù)和 service worker 的登記卡者，讓搜索引擎能夠找到 web 應(yīng)用。
再次訪問- 通過消息推送等特性讓用戶再次訪問變得容易客们。
可安裝- 允許用戶保留對(duì)他們有用的應(yīng)用在主屏幕上崇决，不需要通過應(yīng)用商店。
可連接性- 通過 URL 可以輕松分享應(yīng)用底挫，不用復(fù)雜的安裝即可運(yùn)行恒傻。
基于應(yīng)用外殼的架構(gòu)
什么是應(yīng)用外殼(App Shell)
App Shell是應(yīng)用的用戶界面所需的最基本的 HTML、CSS 和 JavaScript建邓，也是一個(gè)用來確保應(yīng)用有好多性能的組件盈厘。它的首次加載將會(huì)非常快官边，加載后立刻被緩存下來沸手。這意味著應(yīng)用的外殼不需要每次使用時(shí)都被下載，而是只加載需要的數(shù)據(jù)注簿。
應(yīng)用外殼的結(jié)構(gòu)分為應(yīng)用的核心基礎(chǔ)組件和承載數(shù)據(jù)的 UI契吉。所有的 UI 和基礎(chǔ)組件都使用一個(gè) service worker 緩存在本地，因此在后續(xù)的加載中 Progressive Web App 僅需要加載需要的數(shù)據(jù)诡渴，而不是加載所有的內(nèi)容捐晶。
外殼設(shè)計(jì)核心組件?
- 需要立刻顯示什么在屏幕上？
- 我們的應(yīng)用需要那些關(guān)鍵的 UI 組件玩徊？
- 應(yīng)用外殼需要那些資源租悄？比如圖片，JavaScript恩袱，樣式表等等泣棋。
兩小時(shí)讓你的網(wǎng)站成為 PWA
需要解決的問題：
1.可以在離線或弱網(wǎng)速情況下加載應(yīng)用
2.提示用戶添加快捷方式到主屏
3.安裝過的app啟動(dòng)時(shí)使用自定義動(dòng)畫
4.地址欄匹配品牌顏色
第一步：?jiǎn)?dòng)serviceWork
1.把下面的代碼添加在頁面尾部script標(biāo)簽里
if('serviceWorker' in navigator){
navigator.serviceWorker
.register('/service-worker.js')
.then(function(){console.log('Service Worker Registered');})
.catch(function(err){
console.log('ServiceWorker registration failed:',err);
});
}
2.緩存站點(diǎn)的資源，創(chuàng)建service-worker.js文件畔塔，放在網(wǎng)站根目錄潭辈。該文件可以使用sw-precache.js生成鸯屿。
當(dāng) service worker 被注冊(cè)以后，當(dāng)用戶首次訪問頁面的時(shí)候一個(gè) install 事件會(huì)被觸發(fā)把敢。在這個(gè)事件的回調(diào)函數(shù)中寄摆，我們能夠緩存所有的應(yīng)用需要再次用到的資源。
var cacheName = 'site-cache';
var filesToCache = [
'/',
'/style.css',
'/js/production.min.js'
];
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName).then(function(cache) {
console.log('[ServiceWorker] Caching app shell');
return cache.addAll(filesToCache);
})
);
});
從緩存中加載 app shell
self.addEventListener('fetch', function(e) {
console.log('[ServiceWorker] Fetch', e.request.url);
e.respondWith(
caches.match(e.request).then(function(response) {
//return response || fetch(e.request);
if(response){
return response
}
var fetchRequest = event.request.clone();
return fetch(fetchRequest).then(
function(response){
if(!response || response.status !==200 || response.type !=='basic' ){
return response;
}
var responseToCache = response.clone();
caches.open(cacheName)
.then(function(cache){
cache.put(event.request, responseToCache);
});
return response;
}
)
})
);
});
第二步：添加 Web App Manifest
manifest.json 文件來聲明一個(gè)應(yīng)用程序清單
web 應(yīng)用程序清單是一個(gè)簡(jiǎn)單的 JSON 文件修赞，它給你了控制你的應(yīng)用如何出現(xiàn)在用戶期待出現(xiàn)的地方（比如用戶手機(jī)主屏幕）婶恼，這直接影響到用戶能啟動(dòng)什么，以及更重要的柏副，用戶如何啟動(dòng)它勾邦。
使用 web 應(yīng)用程序清單，你的應(yīng)用可以：
- 能夠真實(shí)存在于用戶主屏幕上
-在 Android 上能夠全屏啟動(dòng)割择，不顯示地址欄 - 控制屏幕方向已獲得最佳效果
- 定義啟動(dòng)畫面眷篇，為你的站點(diǎn)定義主題
- 追蹤你的應(yīng)用是從主屏幕還是 URL 啟動(dòng)的
把manifest.json文件添加到域名根目錄，JSON文件像下面的樣子：
{
"name": "chebada",//app名稱
"short_name": "買車票荔泳，就用XXX",
"icons": [ //添加屏幕上的icon
{
"src": "img/jg-launcher-icon-1x.jpg",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "img/jg-launcher-icon-2x.jpg",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "img/jg-launcher-icon-4x.jpg",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "/?utm_source=homescreen", //啟動(dòng)訪問路徑
"background_color": "#23507a",//設(shè)備背景顏色
"display": "standalone",
"theme_color": "#23507a" // 瀏覽器theme顏色
}
告訴瀏覽器你的程序清單文件
將這段代碼添加至你的 index.html 的 <head> 部分：
<link rel="manifest" href="/manifest.json">
至此一個(gè)PWA應(yīng)用就完成了蕉饼，可以安裝瀏覽器插件 Lighthouse測(cè)試一下性能。
