我知道如何進行 pwa 集成，并且瀏覽器建議安裝并顯示訊息“添加 --- 到主螢屏”。我的愿望如下：我想在集成的 PWA 網站上設定一個個性化的按鈕 l “安裝移動版”在HTML 中，以便我的用戶可以根據需要安裝漸進式 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>uj5u.com熱心網友回復：
您的代碼看起來不錯，您只需要實作這部分：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();
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/405859.html
標籤：
上一篇：HTML按鈕和事件監聽器
下一篇：嵌套for回圈：錯誤變數已定義