PWA 和 Django #將 PWA 安裝為本機應用程式

本教學展示如何為使用 Django 建置的漸進式 Web 應用程式 (PWA) 啟用本機安裝。 它非常簡單，並且對用戶體驗非常有益。

啟用本機安裝

新增一小段程式碼會提示使用者將 PWA 安裝為本機應用程式。

<code class="language-javascript">let beforeInstallPromptEvent = null;
let installed = false;

async function installPWA() {
   if (beforeInstallPromptEvent === null || installed) {
       return;
   }

   try {
       beforeInstallPromptEvent.prompt();

       const { outcome } = await beforeInstallPromptEvent.userChoice;
       if (outcome === 'accepted') {
           console.log("App install dialog accepted!");
           beforeInstallPromptEvent = null;
           installed = true;
       }

   } catch(e) {
       console.error(e);
   }
}</code>

事件監聽器最佳化安裝過程：

<code class="language-javascript">window.addEventListener('beforeinstallprompt', (e) => {
   beforeInstallPromptEvent = e;
});

window.addEventListener('appinstalled', () => {
   installed = true;
});</code>

「安裝」按鈕會觸發安裝提示：

瀏覽器顯示安裝對話框：

接受後，PWA 將使用自己的啟動器圖示註冊：

作為獨立應用程式運作

安裝後，PWA 在自己的視窗中啟動，利用清單定義的樣式來獲得更原生的感覺：

請記住，PWA 清單可讓您自訂圖示、行為、顏色等。了解更多：

• https://www.php.cn/link/076db4058c59c7390c4ceec61646ea33
• https://www.php.cn/link/a6143dafe10eb30e48832f3a092674e0

未來主題

未來的貼文將涵蓋：

• 軟體架構
• 程式環境
• Linux作業系統
• 還有更多！

建議您想要涵蓋的主題！我總是渴望探索新的課題。

作者簡介

我是 Andrés，帕爾馬的一名全端開發人員，不斷完善我的編碼技能。 我也是一位奇幻作家，已出版四本小說。歡迎聯絡！

以上是PWA 和 Django #將 PWA 安裝為本機應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！