此文主要針對(duì)是由vue構(gòu)建的項(xiàng)目基礎(chǔ)上進(jìn)行PWA化。
PWA化主要解決了兩大問(wèn)題： 1）使web app有沉浸式體驗(yàn)嘱巾，也就是更靠近原生體驗(yàn)授嘀。如：去掉瀏覽器的地址欄和底部工具欄物咳；在桌面上生成圖標(biāo)，方便再次進(jìn)入蹄皱。 2）提供獨(dú)立于瀏覽器的緩存览闰，并且可以接收服務(wù)器的推送芯肤。如：在沒有網(wǎng)絡(luò)，或者網(wǎng)絡(luò)狀態(tài)較差的時(shí)候压鉴，仍可訪問(wèn)緩存在本地的數(shù)據(jù).
步驟:
1. 通過(guò)vue-cli腳手架進(jìn)行安裝pwa插件
vue add pwa
此時(shí)會(huì)生成manifest.json和registerServiceWorker.js兩個(gè)文件崖咨。
2. 配置manifest.json文件.(manifest.json文件主要是配置圖標(biāo)，app名稱油吭，顯示方式等)參考MDN手冊(cè)
{
"name": "wc--movies",// 導(dǎo)航顯示的名字
"short_name": "wc", // app的名字
"start_url": ".",
"icon": [
{
// app圖標(biāo)击蹲，會(huì)根據(jù)不一樣的系統(tǒng)進(jìn)行適配
"src": "/public/img/icons/android-chrome-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/public/img/icons/android-chrome-192x192.png",
// 大小
"sizes": "192x192",
// 格式
"type": "image/png"
}],
//導(dǎo)航界面的背景顏色
"background_color": "white",
//手機(jī)最上方顯示運(yùn)營(yíng)商及電量、時(shí)間等這一欄的顏色
"theme_color": "white",
//頁(yè)面顯示效果為沒有地址欄和底部狀態(tài)欄
"display": "standalone"
}
3. 在index.html中引入manifest.json
<link rel="manifest" href="/manifest.json">
4. registerServiceWorker.js文件(registerServiceWorker.js主要是注冊(cè)Service Worker婉宰。SW可以用于消息推送歌豺，緩存管理、后臺(tái)同步心包、攔截和處理網(wǎng)絡(luò)請(qǐng)求等类咧。注意：使用SW需要https及瀏覽器兼容)
import { register } from 'register-service-worker'
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
ready () {
console.log(
'App is being served from cache by a service worker.\n' +
'For more details, visit https://goo.gl/AFskqB'
)
},
registered () {
console.log('Service worker has been registered.')
},
cached () {
console.log('Content has been cached for offline use.')
},
updatefound () {
console.log('New content is downloading.')
},
updated () {
console.log('New content is available; please refresh.')
},
offline () {
console.log('No internet connection found. App is running in offline mode.')
},
error (error) {
console.error('Error during service worker registration:', error)
}
})
}
5)配置vue.config.js文件,控制Service Worker行為。設(shè)置緩存邏輯谴咸、文件名字等轮听。參考@vue/cli-plugin-pwa及workbox參考
pwa: {
workboxPluginMode: 'GenerateSW', // 也可以定義為‘InjectManifest’模式。但是需自己寫SW.js文件進(jìn)行配置
workboxOptions: {
importWorkboxFrom: 'cdn', //從''cdn"導(dǎo)入workbox,也可以‘local’
skipWaiting: true, // 安裝完SW不等待直接接管網(wǎng)站
clientsClaim: true,
navigateFallback: '/index.html',
exclude: [/\.(?:png|jpg|jpeg|svg)$/], //在預(yù)緩存中排除圖片
// 定義運(yùn)行時(shí)緩存
runtimeCaching: [
{
urlPattern: new RegExp('^https://cdn'),
handler: 'NetworkFirst',
options: {
networkTimeoutSeconds: 20,
cacheName: 'cdn-cache',
cacheableResponse: {
statuses: [200]
}
}
}
]
}
}
注意：蘋果的safari,如果僅是上邊那樣設(shè)置可能還并不能兼容岭佳，但其支持通過(guò)meta/link進(jìn)行設(shè)置血巍。可設(shè)置如下：
// app名稱
<meta name="apple-mobile-web-app-title" content="WCmovies">
// 是否隱藏地址欄等
<meta name="apple-mobile-web-app-capable" content="yes">
// 修改狀態(tài)欄顏色
<meta name="apple-mobile-web-app-status-bar-style" content="black">
// 指定桌面icon
<link rel="apple-touch-icon" href="./favicon.ico">
