大家好,我试过访问这个页面:https ://web.dev/customize-install/,stackover flow questions 和 google pages,但我还是写不出来。我试图用我的 PWA 应用程序实现三件事:
- 打开“缓存”并使用安装事件获取文件。
- 使用“beforeinstallprompt”侦听器防止安装默认 PWA。
- 显示带有“下载”按钮的引导模式。
- 单击该按钮时,触发安装应用程序的“获取”事件。
我能够做到 1 和 2。我在 main.js 上触发了我的模式。我在服务人员身上试过,但我做不到。模态上的下载按钮也没有
索引.php
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
<div class="modal-content" >
<div class="modal-body">
<center><p><i class="fa fa-arrow-circle-down"></i></p>
<h5 style="margin-top:0vh;" >Download App</h5>
<p>Download our super cool app.
<div >
<div class="wrap-login100-form-btn" >
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn" class="AndaniDownload" id="btnDownloadAppOffline" >
Download </button>
</div>
</div>
</center>
</div>
</div>
</div>
</div>
主.js
$(document).ready(function(){
$('#myModal3').modal('show');
});
pwabuilder-sw.js
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
const CACHE = "pwabuilder-page";
const offlineFallbackPage = "offline.html";
self.addEventListener("message", (event) => {
if (event.data && event.data.type === "SKIP_WAITING") {
self.skipWaiting();
}
});
self.addEventListener('install', async (event) => {
event.waitUntil(
caches.open(CACHE)
.then((cache) => cache.add(offlineFallbackPage))
);
});
if (workbox.navigationPreload.isSupported()) {
workbox.navigationPreload.enable();
}
self.addEventListener('fetch', (event) => {
if (event.request.mode === 'navigate') {
event.respondWith((async () => {
try {
const preloadResp = await event.preloadResponse;
if (preloadResp) {
return preloadResp;
}
const networkResp = await fetch(event.request);
return networkResp;
} catch (error) {
const cache = await caches.open(CACHE);
const cachedResp = await cache.match(offlineFallbackPage);
return cachedResp;
}
})());
}
});
self.addEventListener('beforeinstallprompt', event => {
event.preventDefault();
var button =self.querySelector('.AndaniDownload');
//button.removeAttribute('hidden');
button.addEventListener('click', () => {
event.prompt();
button.setAttribute('disabled', true);
});
});