✅作者簡介：人工智能專業大學在讀，喜歡計算機與程式設計，寫部落格記錄自己的學習曆程。
🍎個人首頁：小嗷犬的部落格
🍊個人信條：為天地立心，為生民立命，為往聖繼絕學，為萬世開太平。
🥭本文内容：JS手動觸發PWA安裝視窗
本文目錄
- PWA
- JS手動觸發PWA安裝視窗
- 按鈕添加位置參考
-
- 添加到社交圖示欄
- 添加到導航欄菜單
PWA
PWA（Progressive Web App）是一種理念，使用多種技術來增強 web app 的功能，可以讓網站的體驗變得更好，能夠模拟一些原生功能，比如通知推送。在移動端利用标準化架構，讓網頁應用呈現和原生應用相似的體驗。
其中我最喜歡的PWA功能就是可以将網頁添加到桌面，就像原生應用一樣，可以在桌面上建立快捷方式，通過緩存可以實作弱網使用，可以接收通知推送等等。
但是，PWA的安裝需要使用者點選浏覽器的PWA安裝按鈕。對于不同的浏覽器，這個按鈕的位置可能有很大的差别，特别是在移動端，該按鈕可能會被收納到一堆浏覽器設定選項中，找起來不是很友善；部分浏覽器支援PWA，但卻沒有主動安裝PWA的選項，想要安裝網站的PWA必須等待網站彈出安裝提示，而在移動端部分浏覽器中PWA安裝提示僅會在第一次彈出，如果使用者錯過了安裝提示可能就無法安裝PWA。
是以，我們希望能夠将PWA安裝按鈕固定到網頁中，這樣使用者就可以在任何時候都可以點選安裝按鈕來安裝PWA。
JS手動觸發PWA安裝視窗
首先要保證自己的網站支援PWA，可以通過Google Lighthouse來檢測自己的網站是否支援PWA。
接下來就可以配置PWA安裝所需的JS函數了。
建立
/source/js/installPWA.js
var deferredPrompt = null;
// 監聽beforeinstallprompt事件，該事件在網站滿足PWA安裝條件時觸發，儲存安裝事件
window.addEventListener("beforeinstallprompt", e => {
e.preventDefault();
deferredPrompt = e;
});
// 監聽appinstalled事件，該事件在使用者同意安裝後觸發，清空安裝事件
window.addEventListener("appinstalled", () => {
deferredPrompt = null;
});
// 手動觸發PWA安裝
function addToDesktop() {
deferredPrompt.prompt();
}
在
_config.butterfly.yml
中引用
installPWA.js
inject:
head:
bottom:
+ - <script src="/js/installPWA.js"></script>
接下來你就可以使用
addToDesktop()
函數來手動觸發PWA安裝視窗了。
按鈕添加位置參考
使用butterfly主題可以添加到社交圖示欄中，或是導航欄菜單中。
添加到社交圖示欄
我的網站将其添加到了社交圖示欄中。
修改
_config.butterfly.yml
# social settings (社交圖標設置)
# formal:
# icon: link || the description
social:
+ fas fa-puzzle-piece: javascript:addToDesktop(); || PWA
除此之外還要修改
/themes/butterfly/layout/includes/header/social.pug
，為了社交圖示按鈕正常調用JS函數，需要将
target="_blank"
去掉。
each url, icon in theme.social
- a.social-icon(href=url_for(trim(url.split('||')[0])) target="_blank"
+ a.social-icon(href=url_for(trim(url.split('||')[0]))
title=url.split('||')[1] === undefined ? '' : trim(url.split('||')[1]))
i(class=icon)
這項修改不會影響其他社交圖示按鈕的連結跳轉功能。
效果如下：
點選後：
移動端Edge效果：
點選後：
添加到導航欄菜單
如果你不想将按鈕添加到社交圖示欄中，也可以将按鈕添加到導航欄菜單中。
修改
_config.butterfly.yml
menu:
+ PWA: javascript:addToDesktop(); || fas fa-puzzle-piece
無需進行其他修改。
除此之外，還可以将按鈕添加到其他任何位置，隻要能夠調用JS函數即可。