1.0.4 • Published 10 months ago

vue-ios-pwa-prompt v1.0.4

Weekly downloads
-
License
-
Repository
github
Last release
10 months ago

Vue3 port of react-ios-pwa-prompt

npm version

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:

PropDescriptionDefault Value
timesToShowNumber of consecutive visits to show the prompt2
promptOnVisitOn which visit should the first prompt be shown?2
delayDelay in milliseconds before showing the prompt1000
copyTitleThe title of the prompt"Add to Home Screen"
copySubtitleThe subtitle of the promptString(window.location.href)
copyDescriptionThe description of the prompt"This website has app functionality. Add it to your home screen to use it in fullscreen and while offline."
copyShareStepThe Share button copy"Press the 'Share' button on the menu bar below"
copyAddToHomescreenStepThe Add to Homescreen button copy"Press 'Add to Home Screen'"
appIconPathPath to an icon or favicon to be shown as the app iconhttps://s2.googleusercontent.com/s2/favicons?domain=${window.location.origin}
isShownSet to true to manually show the promptundefined
@closeevent when the prompt is dismissed

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

1.0.4

10 months ago

1.0.3

10 months ago

1.0.2

10 months ago

1.0.1

10 months ago

1.0.0

10 months ago