If pwa enabled give user prompt for installing

[SoumyaK4]

Checklist

• I have read and accepted the contributing guidelines.

Is your feature request related to a problem? Please describe

I've often seen different websites I visit show a popup to install their pwa so I decided to make this.
I'm just adding a general version, if this gets added then please modify it to integrate with chirpy better.

Describe the solution you'd like

This is how I envision this feature:

1. in _config.yml have pwa-popup: true, this could be in the pwa section in config.
2. assets/js/pwa-popup.js

document.addEventListener("DOMContentLoaded", () => {
  let deferredPrompt; // Store the install prompt event
  let popupDisplayed = false; // Ensure the popup shows only once

  // Create the popup dynamically
  const popup = document.createElement("div");
  popup.id = "install-pwa-popup";
  popup.innerHTML = `
    <div id="popup-content">
      <p id="popup-message">Use web-app for a better experience!</p>
      <div id="popup-buttons">
      <button id="install-pwa-yes">Install</button>
      <button id="install-pwa-no">Close</button>
      </div>
    </div>
  `;
  document.body.appendChild(popup);

  // Style the popup
  const popupStyles = `
  #install-pwa-popup {
    position: fixed;
    top: 90px;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the popup */
    background: #b7b7c710;
    color: white;
    width: 100vw;
    padding: 10px; /* Minimal padding */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 1000;
  }
  
  #install-pwa-popup.show {
    display: block;
  }
  
  #popup-content {
    display: flex;
    flex-direction: column; /* Arrange items vertically */
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically */
    gap: 5px; /* Minimal spacing between items */
    width: auto; /* Ensure the content stays centered */
    max-width: 500px; /* Set a max width for the content */
    margin: 0 auto; /* Center content horizontally within the popup */
  }
  
  #popup-message {
    font-weight: bold;
    font-size: 20px;
  }
  
  #install-pwa-popup button {
    padding: 5px 10px; /* Minimal button padding */
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  #install-pwa-yes {
    background-color: #4caf50;
    color: white;
  }
  
  #install-pwa-no {
    background-color: #f44336;
    color: white;
  }
  
  `;
  const styleSheet = document.createElement("style");
  // styleSheet.type = "text/css";
  styleSheet.innerText = popupStyles;
  document.head.appendChild(styleSheet);

  // Listen for the beforeinstallprompt event
  window.addEventListener("beforeinstallprompt", (e) => {
    e.preventDefault();
    deferredPrompt = e;

    // Show the popup after 4 seconds
    setTimeout(() => {
      if (!popupDisplayed && !window.matchMedia("(display-mode: standalone)").matches) {
        popup.classList.add("show"); // Show the popup by sliding it down
        popupDisplayed = true;
      }
    }, 4000); // 4-second delay
  });

  // Handle the Install button click
  document.getElementById("install-pwa-yes").addEventListener("click", async () => {
    if (deferredPrompt) {
      deferredPrompt.prompt();
      const choiceResult = await deferredPrompt.userChoice;
      if (choiceResult.outcome === "accepted") {
        console.log("User accepted the install prompt");
      } else {
        console.log("User dismissed the install prompt");
      }
      deferredPrompt = null; // Clear the event
    }
    popup.classList.remove("show"); // Hide the popup
  });

  // Handle the Close button click
  document.getElementById("install-pwa-no").addEventListener("click", () => {
    popup.classList.remove("show"); // Hide the popup
  });

  // Hide popup if app is installed
  window.addEventListener("appinstalled", () => {
    console.log("PWA installed");
    popup.classList.remove("show");
  });
});

3. Have <script src="/assets/js/pwa-popup.js" defer></script> at _includes/metadata-hook.html for whole site
4. For having the script in any specific page instead of whole site, just place the script tag at the bottom of desired page

Describe alternatives you've considered

Live Demo

Additional context

If this doesn't get accepted please covert it to an idea discussion.

Anyone who's trying to implement this from the code: I haven't configured it for displaying only on mobile yet, and there's some other issues also I think

[cotes2020]

Hi, this doesn't seem to be a necessary feature, so I will follow your wishes and convert it into an idea to share in the discussions.