PWA and Django #4: Installing a PWA as a native application

Welcome to the fourth entry on the Progressive Web Application with Django series. In this chapter we will learn how to install our webapp as a native application. Very useful and really easy.

Allowing native installation

With a small change to the source code, we can ask the user if they want to install our supercool webapp as a “native” app.

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

Enter fullscreen mode Exit fullscreen mode

We can also listen to a couple of events to customize the responses and behavior of our webapp in every step of the process:

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

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

Enter fullscreen mode Exit fullscreen mode

The user needs to fire the event, so an install button is a good place to call the new code:

When clicked, the user will see a browser dialog asking for the installation like this:

If accepted, the webapp will be registered on the operating system, with its own launcher icon:

Executing as a standalone app

Once installed, the web app will launch in its own window, providing a more integrated experience with styling based on the manifest (see previous chapters). Like this:

Note that you can customize the icon, the behavior of the webapp, colors, etc. in the PWA manifest. You can read more about this here:

• https://developer.mozilla.org/en-US/docs/Web/Manifest
• https://web.dev/learn/pwa/web-app-manifest

About the list

Among the Python and Docker posts, I will also write about other related topics, like:

• Software architecture
• Programming environments
• Linux operating system
• Etc.

If you found some interesting technology, programming language or whatever, please, let me know! I’m always open to learning something new!

About the author

I’m Andrés, a full-stack software developer based in Palma, on a personal journey to improve my coding skills. I’m also a self-published fantasy writer with four published novels to my name. Feel free to ask me anything!

原文链接：PWA and Django #4: Installing a PWA as a native application