This gist provides a Vue.js component with step-by-step instructions to guide users on installing the PWA (Progressive Web App) and enabling notifications on both Android and iOS devices. It's crafted to be user-friendly with the inclusion of emojis for visual guidance. Designed to enhance user experience, this component emphasizes the importanc…

HowInstallPWA.vue

<template>
  <div class="container">
    <div>
      <h2>Installation Guide</h2>
      <p><strong>Note:</strong> This website is not fully available unless you install it as a PWA. Please follow the instructions below to install and get the best experience. 🚀</p>

      <h3>iOS (Safari) 🍏</h3>

      <h4>1. Installing the PWA:</h4>
      <ol>
        <li>Open the application in the Safari 🌐 browser.</li>
        <li>Tap the share button (a box with an arrow pointing up) 🔝 at the bottom of the screen.</li>
        <li>Scroll through the options and tap on "Add to Home Screen" 🏠.</li>
        <li>Name the app if you wish, then tap on "Add" on the top right.</li>
        <li>The app icon will appear on your home screen. You can launch it like any other app 🚀.</li>
      </ol>

      <h3>Android 🤖</h3>

      <h4>1. Installing the PWA:</h4>
      <ol>
        <li>Open the application in the Chrome 🌐 browser for Android.</li>
        <li>Tap the "⋮" button on the top right to open the menu.</li>
        <li>Select "Add to Home screen" 🏠 from the menu.</li>
        <li>A popup will appear. Tap on "Add" or "Install" 📲.</li>
        <li>The app icon will appear on your home screen. You can launch it like any other app 🚀.</li>
      </ol>
    </div>
  </div>


</template>

<script setup lang="ts">

</script>

<style scoped>

</style>