vue 项目 安装桌面应用(PWA)

• 提醒用户安装

 

• 在桌面生成图标 （可以自定义）

如何使用 PWA 进行开发

1、确保你的Vue项目是使用Vue CLI创建的。如果没有使用Vue CLI创建项目，可以通过以下命令全局安装Vue CLI：npm install -g @vue/cli

npm install -g @vue/cli

2、在项目的根目录下，打开终端并运行以下命令安装@vue/cli-plugin-pwa插件：vue add @vue/pwa

vue add @vue/pwa

3、安装完成后，会在你的项目中自动添加一个名为"public"的文件夹，其中包含一个manifest.json文件和一些默认的图标文件。（没有 manifest.json 可以自行创建）。

{
  "name": "简称",
  "short_name": "全称",
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png", // 图标 可以自定义 
      "sizes": "192x192", // 要注意尺寸要和实际大小一样
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html", // 启动页面
  "display": "standalone", // 启动画面
  "background_color": "#000000", // 启动背景颜色
  "theme_color": "#4DBA87" // （index.html文件中也要设置）主题颜色，强烈建议和ui主题颜色保持一致，看起来更有原生app的感觉
}

修改public目录下的manifest.json文件，根据你的需求进行配置，包括应用程序的名称、描述、图标等。

 4、注册service worker。 安装pwa插件时会生成一个registerServiceWorker.js（src文件下）文件并在main.js中添加导入，这个文件中自动生成了注册service worker的代码。其中默认生成的service worker名称为service-worker.js，可以修改为自定义的service worker。

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

然后我们在main.js中引入registerServiceWorker.js 

import './registerServiceWorker'

5、 vue.config.js 文件中配置pwa

 pwa: {
    workboxOptions: {
      // https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin
      skipWaiting: true,
      clientsClaim: true,
      importWorkboxFrom: 'local',
      importsDirectory: 'js',
      navigateFallback: '/',
      navigateFallbackBlacklist: [/\/api\//]
    }
  },

6、之后我们在 public/index.html 设置我们的主题色 并引入 manifest.json

 <meta name="theme-color" content="#00142A">
 <link rel=manifest href=/manifest.json>

到此，我们就可以运行项目运行安装了。

通过按钮 js 来控制显示 安装窗口

1、确保你的 Vue 项目已经正确配置 PWA 功能。

        通过 vue.config.js 文件中设置 pwa 选项来完成。

        确保 pwa 选项中的 workboxPluginMode 被设置为 'InjectManifest'

  pwa: {
    workboxOptions: {
      workboxPluginMode: 'InjectManifest'
    }
  },

2、打开你想要添加安装按钮的 Vue 组件文件

3、在 Vue 组件模版中添加一个按钮元素， 并为按钮添加点击事件

<template>
  <div>
    <button @click="installApp" v-if="showInstallButton">
      安装
    </button>
  </div>
</template>

4、在 Vue 组件中 data 中定义名为 showInstallButton 的响应式数据， 并将其初始值设置为 false

export default {
  data() {
    return {
      showInstallButton: false, // 用来判断当前浏览器是否支持安装
      installPromptEvent: null, // 实例对象 
    }
  },
  // ...
}

5、在 Vue 组件的 created 或 mounted 生命周期中添加 检查用户是否可以安装 PWA 应用，并在满足条件时更新  showInstallButton 的值。

export default {
  // ...
  created() {
    window.addEventListener('beforeinstallprompt', event => {
      // 防止默认的应用安装提示
      event.preventDefault();
      // 在Vue组件中保存事件对象
      this.installPromptEvent = event;
      // 显示安装按钮
      this.showInstallButton = true;
    });
  },
  // ...
}

6、添加 Vue 组件方法来处理安装按钮的点击事件， 并在方法中调用安装操作。

export default {
  // ...
  methods: {
    installApp() {
      if (this.installPromptEvent) {
        // 调用安装操作
        this.installPromptEvent.prompt();
      }
    }
  },
  // ...
}

通过完成以上步骤，你应该能够在Vue PWA项目中添加一个按钮，并在点击按钮时调用安装操作。请注意，安装操作的触发还受到浏览器对 PWA 的支持程度，以及用户是否已经满足安装条件的影响。

遇到的问题

TypeError: Cannot read properties of undefined (reading 'tap')

1、确保你的 Vue CLI 版本是最新的。 可以通过运行以下命令来更新 Vue CLI

npm update -g @vue/cli

2、如果你使用的 Vue CLI 3.x 版本， 请尝试将 @vue/cli-plugin-pwa 插件降到 3.x 版本。 可以通过运行以下命令安装旧版本的插件

vue add @vue/cli-plugin-pwa@3

3、如果你使用的 Vue CLI 4.x 版本，请尝试将 @vue/cli-plugin-pwa 插件升到最新版本。

vue upgrade @vue/cli-plugin-pwa

4、如果上述方案仍然无效，可以尝试删除项目的 node_modules 文件夹，并重新运行 npm install 命令来重新安装依赖项