我知道如何进行 PWA 集成，并且浏览器建议安装并显示消息“添加 --- 到主屏幕”。我的愿望如下：我想在集成的 PWA 网站上设置一个个性化按钮 l“安装移动版本”，以便我的用户可以根据需要安装渐进式 Web 应用程序，尤其是在他们愿意的时候。他们不一定会等待浏览器为他们提供安装。我已经完成了 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>
首先需要使用这段代码来监听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();
});