技術(shù)簡(jiǎn)介

PWA（Progressive Web App，漸進(jìn)式網(wǎng)頁應(yīng)用） 是一種融合了 網(wǎng)頁（Web） 與 原生應(yīng)用（Native App） 優(yōu)點(diǎn)的技術(shù)。 它讓你用網(wǎng)頁技術(shù)（HTML、CSS、JavaScript）構(gòu)建出一個(gè)能像原生應(yīng)用那樣：

• 可以安裝到桌面或手機(jī)；
• 能在離線或網(wǎng)絡(luò)差的情況下運(yùn)行；
• 能接收推送通知；
• 啟動(dòng)速度快，體驗(yàn)接近原生 App；
• 并且依然是通過瀏覽器訪問，不需要上架應(yīng)用商店。 換句話說，PWA = 網(wǎng)頁 + 應(yīng)用體驗(yàn)。

簡(jiǎn)單來說，就是瀏覽器為你的網(wǎng)頁提供了離線應(yīng)用支持，它將你的網(wǎng)頁所需資源緩存了下來，并攔截了頁面請(qǐng)求，能匹配上這些資源的就直接存緩存中拿出來。

這里涉及到了兩個(gè)重要的技術(shù)點(diǎn)：

1. Service Worker：它是一個(gè)在瀏覽器后臺(tái)運(yùn)行的腳本，負(fù)責(zé)攔截網(wǎng)絡(luò)請(qǐng)求、緩存資源、處理推送通知等。
2. Manifest 文件：它是一個(gè) JSON 格式的文件，用于描述你的 PWA 應(yīng)用的名稱、圖標(biāo)、啟動(dòng) URL 等信息。

Service Worker 幫你實(shí)現(xiàn)離線使用與同步更新，Manifest 則告訴瀏覽器你配置的應(yīng)用信息。

就像這樣：

右上角會(huì)出現(xiàn)一個(gè)安裝應(yīng)用的按鈕，點(diǎn)擊即可安裝到桌面。

核心原理

PWA的核心原理是利用Service Worker來攔截網(wǎng)絡(luò)請(qǐng)求，匹配到緩存中的資源就直接返回，否則就去請(qǐng)求服務(wù)器。

而PWA檢測(cè)更新的原理更加簡(jiǎn)單，當(dāng)使用PWA時(shí)，會(huì)生成一個(gè)類似于檢驗(yàn)碼的js文件，文件地址是固定的。就像md5校驗(yàn)碼一樣，瀏覽器會(huì)定期請(qǐng)求這個(gè)文件，如果與本地的文件有差異則表示此網(wǎng)頁有新的版本。

簡(jiǎn)單開始

以下內(nèi)容弄個(gè)基于Vue3 + Vite進(jìn)行說明。

安裝vite-plugin-pwa

vite-plugin-pwa是Vite提供的便利性插件，讓你通過簡(jiǎn)單的配置即可完成離線應(yīng)用。

npm install vite-plugin-pwa

配置PWA

在vite.config.js中添加如下配置：

import { VitePWA } from 'vite-plugin-pwa'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      registerType: 'autoUpdate', // 自動(dòng)更新 service worker
      includeAssets: ['favicon.svg', 'favicon.ico', 'robots.txt', 'apple-touch-icon.png'],
      manifest: {
        name: 'My Vue App',
        short_name: 'VueApp',
        description: 'My awesome offline-ready Vue 3 app',
        theme_color: '#42b883',
        icons: [
          {
            src: 'pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      },
    })
  ]
})

參數(shù)說明

• registerType: 更新類型，包括兩個(gè)值['prompt' | 'autoUpdate']，prompt表示讓用戶進(jìn)行彈窗確認(rèn)來升級(jí)，autoUpdate表示自動(dòng)進(jìn)行的升級(jí)。
• includeAssets: 你需要進(jìn)行緩存的靜態(tài)資源，比如favicon.ico、robots.txt等。
• manifest: 應(yīng)用清單，也就是應(yīng)用信息。這里需要特別注意icons參數(shù)，它需要真實(shí)的圖片地址與分辨率，如有錯(cuò)誤則不會(huì)在瀏覽器上顯示應(yīng)用安裝按鈕。

進(jìn)行升級(jí)配置

在main.js中添加如下內(nèi)容：

import { registerSW } from 'virtual:pwa-register'

const updateSW = registerSW({
  onNeedRefresh() {
    if (confirm('有新版本可用，是否立即更新？')) {
      updateSW(true)
    }
  },
  onOfflineReady() {
    console.log('應(yīng)用已準(zhǔn)備好離線使用')
  }
})

這里的updateSW定義是為了讓開發(fā)者根據(jù)需要來進(jìn)行手動(dòng)升級(jí)，開發(fā)者可以通過調(diào)用updateSW(true)來手動(dòng)進(jìn)行頁面更新。 你也可以不進(jìn)行定義，這樣只能等待用戶手動(dòng)關(guān)閉頁面并重新打開才能完成新頁面的載入。

小提示

如果你是使用的類似于vite dev的開發(fā)模式，那么離線應(yīng)用是不會(huì)生效的，你需要先對(duì)應(yīng)用進(jìn)行打包，然后再使用vite preview的方式進(jìn)行預(yù)覽。

你可以打開f12，隨后刷新網(wǎng)頁來看一下是否緩存成功了（出現(xiàn)ServiceWorker則表示成功了）：

到此這篇關(guān)于Vue3項(xiàng)目使用PWA技術(shù)進(jìn)行離線加載的詳細(xì)流程的文章就介紹到這了,更多相關(guān)Vue3 PWA進(jìn)行離線加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論