Pwa安装自带按钮安装JS+HTML+CSS答案

【问题标题】：Pwa installation own button installation in JS + HTML + CSSPwa安装自带按钮安装JS+HTML+CSS
【发布时间】：2022-01-02 02:06:58
【问题描述】：

我知道如何进行 pwa 集成，并且浏览器建议安装并显示消息“添加 --- 到主屏幕”。我的愿望是：我想在集成的 PWA 网站上设置一个个性化的按钮 l “安装移动版” in HTML 以便我的用户可以根据需要安装渐进式网络应用程序，特别是当他们希望。他们不一定会等待浏览器为他们提供安装。我已经完成了 PWA 集成，并且浏览器已经提供了安装。问题是，我真的不知道如何处理我的永久网络应用渐进式 html + javascript 中的安装按钮，用户将在我的网站上看到浏览器提供的功能之外。

这是我的 service-worker.js 和我的 index.html

var CACHE_NAME = 'PWA-installation';
var urlsToCache = [
  'index.html',
  './',
  'styles.css',
  'scripts/network.js',
  'scripts/ui.js',
  'scripts/clipboard.js',
  'scripts/theme.js',
  'sounds/blop.mp3',
  'images/favicon-96x96.png'
];

self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});


self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- Web App Config -->
    <title>pwa</title>
    
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="manifest" href="manifest.json">
</head>

<body translate="no">
    <header >
      
        <a href="#" id="install" class="icon-button" title="Install PWA" >
             Install PWA
        </a>
    </header>
 
    
    <!-- Footer -->
    <footer class="column">
       
    </footer>
    
    <!-- Scripts -->
    <script src="scripts/network.js"></script>
    <script src="scripts/ui.js"></script>
    <script src="scripts/theme.js" async></script>
    <script src="scripts/clipboard.js" async></script>
   
</body>

</html>

【问题讨论】：

这能回答你的问题吗？ Is it possible to make an in-app button that triggers the PWA "Add to Home Screen" install banner?
这不能解决我的问题
向我们展示至少您已经尝试过，向我们展示您的代码，我遇到了同样的问题，并且我 100% 确定答案解决了它，您也可以阅读以下内容：web.dev/customize-install跨度>
@GuillermoRomero 我很难在 html 中创建一个按钮来控制渐进式网络应用程序的安装
@GuillermoRomero 这是我的代码

标签： javascript html button installation progressive-web-apps

【解决方案1】：

您的代码看起来不错，您只需要实现这部分： https://stackoverflow.com/a/64727286/8716572

首先你需要使用这段代码来监听 beforeinstallprompt 事件：

let deferredPrompt;

window.addEventListener('beforeinstallprompt', function (e) {

  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();

  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

然后你需要给你的按钮添加事件监听器：

var buttonInstall = document.getElementById('install');

buttonInstall.addEventListener('click', function (e) {
  // Show the install prompt
  deferredPrompt.prompt();
});

【讨论】：