PWA dan Django #Memasang PWA sebagai aplikasi asli

Tutorial ini menunjukkan cara mendayakan pemasangan asli untuk Apl Web Progresif (PWA) anda yang dibina dengan Django. Ia sangat mudah dan sangat bermanfaat untuk pengalaman pengguna.

Mendayakan Pemasangan Asli

Tambahan kod kecil menggesa pengguna memasang PWA anda sebagai aplikasi asli.

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);
   }
}

Pendengar acara memperhalusi proses pemasangan:

window.addEventListener('beforeinstallprompt', (e) => {
   beforeInstallPromptEvent = e;
});

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

Butang "Pasang" mencetuskan gesaan pemasangan:

Pelayar memaparkan dialog pemasangan:

Setelah diterima, PWA didaftarkan dengan ikon pelancarnya sendiri:

Berjalan sebagai Apl Kendiri

Selepas pemasangan, PWA dilancarkan dalam tetingkapnya sendiri, memanfaatkan penggayaan yang ditakrifkan manifes untuk rasa yang lebih asli:

Ingat, manifes PWA membolehkan anda menyesuaikan ikon, gelagat, warna, dll. Ketahui lebih lanjut:

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

Topik Masa Depan

Siaran akan datang akan meliputi:

• Seni bina perisian
• Persekitaran pengaturcaraan
• Sistem pengendalian Linux
• Dan banyak lagi!

Cadangkan topik yang anda ingin bincangkan! Saya sentiasa bersemangat untuk meneroka subjek baharu.

Mengenai Pengarang

Saya Andrés, pembangun tindanan penuh di Palma, sentiasa memperhalusi kemahiran pengekodan saya. Saya juga seorang pengarang fantasi dengan empat novel terbitan. Jangan ragu untuk berhubung!

Atas ialah kandungan terperinci PWA dan Django #Memasang PWA sebagai aplikasi asli. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!