如何创建一个启用了添加到桌面功能的 vue 应用程序？答案

【问题标题】：How to create a vue app that has add to desktop feature enabled?如何创建一个启用了添加到桌面功能的 vue 应用程序？
【发布时间】：2022-12-17 14:53:26
【问题描述】：

我想创建一个 vue 应用程序，我希望该应用程序具有添加到桌面选项。

就像 youtube 的共享选项附近的那个一样。关于如何做到这一点的任何想法？

【问题讨论】：

标签： vue.js

【解决方案1】：

Chrome 会针对 Progressive Web App 显示此信息，这将通过 manifest.json file 的存在来检测。

【讨论】：

【解决方案2】：

要将“添加到桌面”功能添加到 Vue.js 应用程序，您可以使用 add-to-homescreen 包。以下是如何使用此包的示例：

1- 通过在终端中运行此命令来安装 add-to-homescreen 包：

npm install add-to-homescreen

2- 从 Vue 组件中的 add-to-homescreen 包中导入 addToHomescreen 函数：

import { addToHomescreen } from 'add-to-homescreen';

3- 当您想要提示用户将应用程序添加到他们的主屏幕时调用 addToHomescreen 函数。例如，您可以在用户单击按钮时调用它：

<template>
  <button @click="addToHomeScreen">Add to home screen</button>
</template>

<script>
export default {
  methods: {
    addToHomeScreen() {
      addToHomescreen();
    }
  }
}
</script>

这将提示用户将应用程序添加到他们的主屏幕。请记住，此功能仅适用于移动设备，并且只有在满足特定条件（例如多次访问该网站）时，才会提示用户将应用程序添加到他们的主屏幕。

【讨论】：

“请记住，此功能仅适用于移动设备”OP 显示了桌面屏幕截图，因此谈论的是完全不同的东西。