技術簡介

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

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

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

這里涉及到了兩個重要的技術點：

1. Service Worker：它是一個在瀏覽器后臺運行的腳本，負責攔截網(wǎng)絡請求、緩存資源、處理推送通知等。
2. Manifest 文件：它是一個 JSON 格式的文件，用于描述你的 PWA 應用的名稱、圖標、啟動 URL 等信息。

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

就像這樣：

右上角會出現(xiàn)一個安裝應用的按鈕，點擊即可安裝到桌面。

核心原理

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

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

簡單開始

以下內容弄個基于Vue3 + Vite進行說明。

安裝vite-plugin-pwa

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

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

進行升級配置

在main.js中添加如下內容：

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

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

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

小提示

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

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

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

最新評論