Pwa安装自己的按钮安装在JS + HTML + CSS
Pwa installation own button installation in JS + HTML + CSS
我知道如何进行 pwa 集成，浏览器建议安装并显示消息“添加 --- 到主屏幕”。我的愿望是：我想在集成的PWA网站上设置一个个性化的按钮 l HTML中的“安装手机版”，这样我的用户就可以安装progressive根据需要使用 Web 应用程序，尤其是在他们愿意的时候。他们不一定会等待浏览器为他们提供安装。我已经完成了 PWA 集成并且浏览器已经提供了安装。问题是，我真的不知道如何处理 html + javascript 中的永久 Web 应用程序渐进式 安装按钮，用户会在我的外部网站上看到该按钮浏览器提供的内容。
这是我的服务-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();
});
我知道如何进行 pwa 集成，浏览器建议安装并显示消息“添加 --- 到主屏幕”。我的愿望是：我想在集成的PWA网站上设置一个个性化的按钮 l HTML中的“安装手机版”，这样我的用户就可以安装progressive根据需要使用 Web 应用程序，尤其是在他们愿意的时候。他们不一定会等待浏览器为他们提供安装。我已经完成了 PWA 集成并且浏览器已经提供了安装。问题是，我真的不知道如何处理 html + javascript 中的永久 Web 应用程序渐进式 安装按钮，用户会在我的外部网站上看到该按钮浏览器提供的内容。
这是我的服务-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();
});