這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
前言：
梳理了一下專案中的PWA的相關用法，下面我會正對vue2和vue3的用法進行一些教程示例，引入離線快取機制，即使你斷網，也能訪問頁面，一旦用戶訪問了我們的網頁，我們就像牛皮糖一樣粘連著他，他永遠都可以訪問，即使斷網也能訪問，有一天我們下掉了網站他仍然能夠訪問，這就是把快取寫入了cache storage，并安裝注冊到用戶的本地，
PAW在vue-admin-element下的相關配置
1、執行vue add @vue/cli-plugin-pwa
package.json里會增加兩個依賴 // dependencies下 "register-service-worker" <!-- devDependencies下 --> "@vue/cli-plugin-pwa" 會自動在src的根目錄生成一個registerServiceWorker.js檔案
2、在main.js匯入
import './registerServiceWorker'
3、在src下新建service-worker.js檔案
完整配置如下（拿來即用）
/* eslint-disable no-undef*/
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js')
if (workbox) {
console.log(`Yay! Workbox is loaded ??`)
} else {
console.log(`Boo! Workbox didn't load ??`)
}
workbox.core.setCacheNameDetails({
prefix: 'ochase-search',
suffix: 'v1.0.0'
})
workbox.core.skipWaiting() // 強制等待中的 Service Worker 被激活
workbox.core.clientsClaim() // Service Worker 被激活后使其立即獲得頁面控制權
workbox.precaching.precacheAndRoute(self.__precacheManifest || []) // 設定預加載
// 快取web的css資源
workbox.routing.registerRoute(
// Cache CSS files
/.*\.css/,
// 使用快取，但盡快在后臺更新
new workbox.strategies.StaleWhileRevalidate({
// 使用自定義快取名稱
cacheName: 'css-cache'
})
)
// 快取web的js資源
workbox.routing.registerRoute(
// 快取JS檔案
/.*\.js/,
// 使用快取，但盡快在后臺更新
new workbox.strategies.StaleWhileRevalidate({
// 使用自定義快取名稱
cacheName: 'js-cache'
})
)
// 快取web的圖片資源
workbox.routing.registerRoute(
/\.(?:png|gif|jpg|jpeg|svg)$/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'images',
plugins: [
new workbox.expiration.ExpirationPlugin({
maxEntries: 60,
maxAgeSeconds: 30 * 24 * 60 * 60 // 設定快取有效期為30天
})
]
})
)
// 如果有資源在其他域名上，比如cdn、oss等，這里做單獨處理，需要支持跨域
workbox.routing.registerRoute(
/^https:\/\/cdn\.ochase\.com\/.*\.(jpe?g|png|gif|svg)/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'cdn-images',
plugins: [
new workbox.expiration.ExpirationPlugin({
maxEntries: 60,
maxAgeSeconds: 5 * 24 * 60 * 60 // 設定快取有效期為5天
})
],
fetchOptions: {
credentials: 'include' // 支持跨域
}
})
)
4、改造registerServiceWorker.js
需要先判斷瀏覽器是否支持serviceWorker否則部署后控制臺會報錯；然后需要改造register引入的位置，默認是走環境變數，為了更方便我用了獲取當前地址去根目錄下找到service-worker.js，完整改造后的代碼如下（拿來即用）
/* eslint-disable no-console */
import { register } from 'register-service-worker'
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
if (process.env.NODE_ENV === 'production') {
register(`${window.location.origin}/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
在module.exports下配置pwa的配置項如下
module.exports = {
pwa: {
name: 'xxx',
themeColor: '#4DBA87',
msTileColor: '#000000',
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
workboxPluginMode: 'InjectManifest',
workboxOptions: {
importScripts: ['https://storage.googleapis.com/workbox-cdn/releases/5.1.4/workbox-sw.js'],
exclude: [/\.html$/],//html不進行service Worker快取
// 自定義 Service Worker 檔案的位置
swSrc: 'src/service-worker.js'
}
},
//...otherCode
}
如何到這一步基本上就配置好了，這里我們需要注意一下 *注意??????PWA是基于Service Worker，由于Service Worker權限很高，所以只支持https協議或者localhost?????? 本地運行專案后在localhost下可以看到這個圖示，
點擊安裝，就安裝在了電腦本地了，也可以在chrome地址欄輸入
chrome://apps/ 查看管理安裝的webapp（pwa）
6、配合nginx進行協商快取
可以打包發布到nginx上,配合協商快取（因為我們即需要快取，也需要在代碼更新后拉取快取最新的代碼），所以需要對html檔案進行專項協商快取，nginx配置如下
#在server下配置
location / {
if ($request_filename ~* .*\.(?:htm|html)$) {
add_header Cache-Control "no-cache";
}
root /usr/local/h5/demo;
index index.html;
try_files $uri $uri/ /index.html;
}
7、打包發布到nginx服務器下就可以進行訪問查看了
再次提醒注意*注意??????PWA是基于Service Worker，由于Service Worker權限很高，所以只支持https協議或者localhost??????所以線上的域名一定要是https協議才行；可以在控制臺查看請求相關的快取狀態
再次重繪后就可以看到直接從serviceWorker里面讀取里
也可以在Application里查看serviceWorker的狀態
至此就可以運行了，但是快取的邏輯有很多種，可以根據自己的實際需求來進行離線快取，弱網快取，PWA的強大不止于此，后面我會繼續深入出一個深入一點的文章
注意中間可能出現問題：
-
先檢查是否符合??????PWA是基于Service Worker，由于Service Worker權限很高，所以只支持https協議或者localhost??????**
-
在線上進行網站訪問的時候控制臺可能會報錯，當報錯從service-worker.js出來的時候需要注意配置是否和我的一致，我之前按照網上的其他教程配置會出問題
import { precacheAndRoute } from 'workbox-precaching'
precacheAndRoute(self.__WB_MANIFEST)
此處是網上教程會報錯，匯入方式在我自己專案里部署后訪問serviceworker會報錯，匯入方式不支持，所以可以改成我上面配置的示例用importScripts來匯入；
- 包括排除html的快取
exclude: [/.html$/],//html不進行service Worker快取，因為我們要讓更新后的代碼及時生效，所以進行協商快取，
本文轉載于:
https://juejin.cn/post/7221057111090495547
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/549912.html
標籤：其他