Pwa安装自己的按钮安装在JS+HTML+CSS中

我知道如何进行pwa集成，浏览器建议安装并显示消息"将---添加到主屏幕"；。我的愿望是：我想在PWA的综合网站上建立一个个性化的按钮l"安装移动版"；在HTML中，这样我的用户就可以根据需要安装渐进式web应用程序，尤其是在他们愿意的时候。他们不一定要等待浏览器为他们提供安装。我已经完成了PWA集成，浏览器已经提供了安装。问题是，我真的不知道如何使用我的永久性web应用程序渐进式安装按钮(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>

您的代码看起来不错，只需要实现这一部分：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();
});

相关内容

最新更新

热门标签：