快捷導(dǎo)航

Vue?2?如何添加?register-service-worker?實現(xiàn)緩存請求的問題

更新時間：2022年11月17日 10:20:41 作者：十月ooOO

這篇文章主要介紹了Vue?2?如何添加?register-service-worker?以實現(xiàn)緩存請求的目的,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

Vue 2 如何添加 register-service-worker 以實現(xiàn)緩存請求的目的

一、問題描述

現(xiàn)在 vue 3 的模板中是自帶 register-service-worker 的。
用這個的好處是，它會自動將項目中的所有文件請求緩存到 service-worker 中，以實現(xiàn)再次打開網(wǎng)站的時候會非常非?？?。
如果頁面中變化，也會自動在后臺下載變化的文件，頁面的變化在下次刷新頁面的時候就會自動生效。

我有幾個 Vue2 的項目需要實現(xiàn)這個功能，摸索了下，把結(jié)果分享一下：

二、實現(xiàn)

1. 需要在 package.json 中添加兩個插件：

    "register-service-worker": "^1.7.2",  // 用于管理  service-worker 的文件注冊更新等
    "@vue/cli-plugin-pwa": "^4.5.19",

安裝 register-service-worker 安裝到項目依賴目錄 dependencies

npm i register-service-worker

安裝 @vue/cli-plugin-pwa 安裝到項目開發(fā)支持目錄 devDependencies

npm i  -D @vue/cli-plugin-pwa@4.5.19

安裝完成之后的 package.json 文件是這樣的：

  "dependencies": {
    ...
    "register-service-worker": "^1.7.2",
    ...
  },
  "devDependencies": {
  	...
    "@vue/cli-plugin-pwa": "^4.5.19",
    ...
  }

2. 添加 registerServiceWorker.js

還需要在 /src 目錄下，添加 registerServiceWorker.js 這個文件，這個文件的內(nèi)容很固定，直接用就行。

官方的那個只能用于項目處于網(wǎng)站根目錄的情況，而我自己有很多項目是部署在子目錄的，比如 kylebing.cn/diary kylebing.cn/tools/wubi-dict-editor，那么此時再用官方的那個文件內(nèi)容可能就不能用了。所以直接用我這個就行。

registerServiceWorker.js 完整內(nèi)容

/* eslint-disable no-console */

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)
    }
  })
}

3. 在 main.js 中引入 registerServiceWorker.js 即可

在項目的 main.js 中引入 registerServiceWorker.js，再執(zhí)行 npm build 即可生成能夠緩存請求的項目了

我一般的項目入口文件名這 main.js，你的可能是 app.js，等同。

import "./registerServiceWorker"

4. 在 vue.config.js 中添加 pwa 配置

添加 pwa 支持之后， index.html 中的 favicon 設(shè)置就已經(jīng)失效了，需要從 vue.config.js 的 pwa 字段中單獨配置。

/**
     * PWA 設(shè)置
     */
    pwa: {
        name: '地圖工具', // 名字
        themeColor: "white", // 背景顏色
        appleMobileWebAppCapable: true, // 蘋果 WebApp 支持

        // manifest 設(shè)置
        manifestOptions: {
            name: '地圖工具',
            short_name: "地圖工具",
            theme_color: "white",
            start_url: ".",
            display: "standalone",
            background_color: "white",
            icons: [
                {
                    src: "favicon.png", // 這里的圖片地址對應(yīng) /public 目錄中的圖片地址
                    sizes: "512x512",
                    type: "image/png",
                    purpose: "any",
                }
            ],
        },

        // 圖標(biāo)
        iconPaths: {
            // 這里是項目外的路徑，對應(yīng) public 目錄
            favicon32: 'favicon.png', // 這里的圖片地址對應(yīng) /public 目錄中的圖片地址
            favicon16: 'favicon.png', // 這里的圖片地址對應(yīng) /public 目錄中的圖片地址
            maskIcon: null,
            msTileImage: null
        }
    }

之后就能正常顯示了：