vue-ios-pwa-prompt

Vue3 port of react-ios-pwa-prompt

Vue Port from

A Vue 3 component that provides a customizable Progressive Web App (PWA) prompt telling the user to 'Add to Home Screen'. The prompt behavior is baked into Android devices, yet iOS is still lagging behind. This component aims to provide a simple way to provide this functionality on iOS for websites that are PWA-ready. The prompt styles closely match iOS designs for both light and dark UI modes to appear native to the user.

Features

• 🛠 Fully configurable — set how many times you want to see it, and after how many page visits.
• 📃 Customizable — modify the content of your prompt message through props, including offline and full-screen availability.
• ⚡️ Efficient — very little overhead for non-iOS devices, and it only does the work needed for each page load.
• 🌕 Light & dark mode available, depending on the user's settings.

Usage

1. Install the vue-ios-pwa-prompt package

Install it using npm or yarn:

npm install vue-ios-pwa-prompt

or

yarn add vue-ios-pwa-prompt

2. Import and use the component

In your Vue 3 project, import and use the PWAPrompt component:

<script setup lang="ts">
import {PWAPrompt} from 'vue-ios-pwa-prompt'
</script>

<template>
  <PWAPrompt />
</template>

3. Add optional props for configuration

You can configure the PWAPrompt component by passing in various props. Here is a list of the available props:

Example usage with custom props:

<template>
  <PWAPrompt :promptOnVisit="1" :timesToShow="1" />
</template>

4. Create your own trigger conditions

You can easily set your own conditions for triggering the prompt. For example, to display the prompt 20% of the time:

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import {PWAPrompt} from 'vue-ios-pwa-prompt';

const shouldShowPWAPrompt = ref(false);

onMounted(() => {
  // 20% chance of showing the prompt
  shouldShowPWAPrompt.value = Math.random() < 0.2;
});
</script>

<template>
  <PWAPrompt :isShown="shouldShowPWAPrompt" @close="shouldShowPWAPrompt = false" />
</template>

License

MIT License