如何为 pwa 添加自定义安装按钮

2024-03-12

我想添加自定义install网站内我的渐进式网络应用程序的按钮。我红色了很多文章并尝试了他们提供的答案。他们使用beforeinstallprompt

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
    deferredPrompt = e;
});

但我面临的问题是我希望按钮直接安装 PWA,而不是触发安装提示。是否可能,如果可以,我怎样才能实现这一目标。预先感谢您。


尝试下面的代码,

第 1 步 - 创建按钮或任何控制器

<button id="installApp">Install</button>

第 2 步 - 在脚本中添加以下 js 代码,而不是在 Service Worker 中

let deferredPrompt;
    window.addEventListener('beforeinstallprompt', (e) => {
        deferredPrompt = e;
    });

    const installApp = document.getElementById('installApp');
    installApp.addEventListener('click', async () => {
        if (deferredPrompt !== null) {
            deferredPrompt.prompt();
            const { outcome } = await deferredPrompt.userChoice;
            if (outcome === 'accepted') {
                deferredPrompt = null;
            }
        }
    });
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何为 pwa 添加自定义安装按钮 的相关文章

随机推荐

  • HMAC 解决方案中的密钥使用什么(最佳/良好实践)?

    我正在根据另一家公司提供给我的规范实施类似 HMAC 的解决方案 散列参数和密钥的使用不是问题 密钥本身的分发也不是问题 因为我们联系密切且地理位置接近 但是 实际密钥的最佳实践是什么value 由于两家公司正在合作 看起来 c9ac56d
  • 在 Android 谷歌地图 v2 上保存标记

    我正在使用 Android Google 地图 v2 API 并将其设置为在长按时添加标记 我需要一种方法来保存这些标记并在应用程序再次恢复时重新加载它们 做到这一点的最佳方法是什么 请帮忙 目前我添加标记如下 map addMarker
  • 在shared_ptr的自定义删除器中检查nullptr是否有意义?

    我见过一些使用的代码std shared ptr使用自定义删除器来测试 nullptr 的参数 例如 MyClass其中有一个close 方法并用一些构造CreateMyClass auto pMyClass std shared ptr
  • 如何用背景颜色填充整个div

    我试图获取背景颜色来填充 bootstrap 中子 div 中的整个 div 但我完全陷入困境 我希望右侧部分为黄色 但它仅突出显示 div 中的文本 这是一个fiddle https jsfiddle net hcgriggs yjcrc
  • 如何在不创建 new Form() 的情况下从 Form2 访问 Form1 函数;

    我是 C 新手 正如我现在面临的问题 public void snz btn Click object sender EventArgs e this Close beside than this Form1 fs new Form1 fs
  • 如何在Python中生成唯一ID? [复制]

    这个问题在这里已经有答案了 我需要根据随机值生成一个唯一的 ID Perhaps uuid uuid4 可能会完成这项工作 看uuid http docs python org library uuid html了解更多信息
  • 如何将来自其他分叉的未合并的上游拉取请求应用到我的分叉中?

    我在 GitHub 上有一个分叉的项目有一个新的拉取请求 我想将其拉入我的分叉中 但作者尚未拉入 有没有一种简单的方法可以将其他分叉的拉取请求应用到我的分叉中 我还缺少其他东西吗 更新 通过网页 您还可以通过 github 网页执行此操作
  • Python Pandas:根据时间范围删除时间序列的行

    我有以下时间序列 start pd to datetime 2016 1 1 end pd to datetime 2016 1 15 rng pd date range start end freq 2h df pd DataFrame
  • 单一职责和混合

    鉴于Mixins http en wikipedia org wiki Mixin通常会在类中引入新的行为 这通常意味着一个类将具有多个行为 如果一个类具有单一职责 则这被定义为该类只有一个变更原因 所以 我可以从两个不同的角度来看待这个问
  • ASP.NET Core 3.1 MVC 中的本地化

    我正在尝试将本地化添加到我的 ASP NET Core 3 1 MVC 项目中 遗憾的是我找不到任何文章或教程来展示如何以简单的方式完成此操作 每个人都有一些我无法理解的问题 谁能告诉我一个简单的方法来做到这一点 好的 我尝试执行syncf
  • document.referrer 是否等于 HTTP Referer 标头?

    如果我点击正常链接http google com http google com to http example com http example com 通常我的浏览器发送到 example com 的 httpreferrer 标头是
  • Android 应用程序的 Twitter 登录

    谁能告诉我从我的 Android 应用程序执行 Twitter 登录开放身份验证的正确步骤 还有一件事是可以在没有 gng 的情况下从我的应用程序执行 Twitter 帐户的登录身份验证到 Twitter 登录页面吗 想法是使用 Twitt
  • Spring data jpa中save和saveAndFlush的区别

    我正在尝试通过测试一些 CRUD 操作来学习 spring data JPAJpaRepository 我遇到了两种方法save and saveAndFlush 我不明白这两者之间的区别 通话时save我的更改也被保存到数据库中 所以有什
  • 如何在更新单独结构中的 @AppStorage 后更新 SwiftUI 视图

    我有以下课程 struct PriceFormatter AppStorage UserDefaultsKey savedCurrency var savedCurrency String let price Float init pric
  • 创建动态规则

    我正在尝试使用代码动态调整相对布局中的图像大小 int height v getHeight int width v getWidth height 50 width 50 RelativeLayout LayoutParams layou
  • NestJs:无法读取模块文件中的环境变量,但可以读取服务文件中的环境变量?

    我有一个 env文件位于我的 NestJs 项目的根目录中 其中包含一些环境变量 奇怪的是 我能够读取服务文件中的变量 但不能读取模块文件中的变量 所以在像这样的服务文件中users service ts 这有效 saveAvatar co
  • 无法从 CursorWindow 读取第 0 行、第 -1 列

    我正在尝试获取表中的记录 我正在使用这个代码 if c null if c moveToFirst String tipId c getString c getColumnIndex DAO TIP ID toString trim Sys
  • 如何为 Prometheus 检测 Java 应用程序代码指标

    我正在尝试将 Java 应用程序的自定义值指标导出到 Prometheus 我读到可以使用 Push Gateway 来完成 下面是我使用下一个方法的示例 static void executeBatchJob throws Excepti
  • pecl 找不到 imagick 包

    我正在尝试在我的 Mac 上安装 imagick 我搜索并阅读了很多 包括这个 但是 我在最后一步遇到了问题 即通过 pecl 实际安装 imagick 软件包 我收到此错误 No releases available for packag
  • 如何为 pwa 添加自定义安装按钮

    我想添加自定义install网站内我的渐进式网络应用程序的按钮 我红色了很多文章并尝试了他们提供的答案 他们使用beforeinstallprompt let deferredPrompt window addEventListener b