![](https://private-user-images.githubusercontent.com/13763624/318162141-ba5b5648-9d35-4e0b-a6ad-65f2c7ea0a88.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE4ODI3ODMsIm5iZiI6MTcyMTg4MjQ4MywicGF0aCI6Ii8xMzc2MzYyNC8zMTgxNjIxNDEtYmE1YjU2NDgtOWQzNS00ZTBiLWE2YWQtNjVmMmM3ZWEwYTg4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzI1VDA0NDEyM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTZlMjQ0M2ZjOTQ2MWExZjI0NTYwMGRiNmRlMTMwZmQxYTAxZTAxNmVlMzg1M2FmZTFlN2RjMjYwZDczODAwMDUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.WAB3kv7_lBHG8VxBxnuGhmLWngljEVP5HYTu09eAVk8)
![](https://private-user-images.githubusercontent.com/13763624/318162160-83320a1b-7690-4b98-80a6-0d9383a91db9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE4ODI3ODMsIm5iZiI6MTcyMTg4MjQ4MywicGF0aCI6Ii8xMzc2MzYyNC8zMTgxNjIxNjAtODMzMjBhMWItNzY5MC00Yjk4LTgwYTYtMGQ5MzgzYTkxZGI5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzI1VDA0NDEyM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTJmODcxNzdjNjY2NWIyNWEwNjQ2NTZlNmIzOWMyNmZlMDM3NzQ5ZDRlOGViODRhNTZlN2VhYWYwNzY3OWM2NjgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.4yBqVixxAtWQQ9JvS_XB1O80fEyTykRElr2uHKeiFhc)
Svelte port of react-ios-pwa-prompt
Polyfilling PWAs for iOS
- 🛠 Fully configurable, set how many times you want to see it, and after how many page visits.
- 📃 PWA available offline? In full screen mode? Customise the content of your prompts message through props.
- ⚡️ Efficient. Very little overhead for non-iOS devices and does as little work as needed for each page load.
- 📱 Detects user's iOS version to provide the correct icon set.
- 🌕 Will display a dark mode if enabled on iOS 13 and 14.
- Install
svelte-ios-pwa-prompt
yarn add svelte-ios-pwa-prompt
npm install svelte-ios-pwa-prompt
- Import into your project:
import PWAPrompt from 'svelte-ios-pwa-prompt'
- Render the component:
<PWAPrompt />
- Add optional props to configure:
timesToShow
: pass an integer to configure how many times to show the prompt. Defaults to1
.promptOnVisit
: pass an integer for the when to start showing the prompt. Defaults to1
(the first page visit).delay
: pass an integer in ms to add a delay to the prompt. Defaults to1000
.onClose
: pass a function to call upon closing the prompt. Passes the event object as the function argument. Defaults to a noop.copyTitle
: pass a string to customise the title of the prompt. Defaults toAdd to Home Screen
.copyBody
: pass a string to customise the body of the prompt. Defaults toThis website has app functionality. Add it to your home screen to use it in fullscreen and while offline.
.copyShareButtonLabel
: pass a string to customise label of share button. Defaults to1) Press the 'Share' button
.copyAddHomeButtonLabel
: pass a string to customise label of add to home instruction. Defaults to2) Press 'Add to Home Screen'
.copyClosePrompt
: pass a string to customise label of close button. Defaults toCancel
.permanentlyHideOnDismiss
: pass a boolean to configure whether to never show the prompt again once dismissed. Defaults totrue
(hide forever).debug
: pass a boolean to put the prompt into debug mode, showing it on any device at all times. Defaults tofalse
(production-mode).
<PWAPrompt
promptOnVisit={1}
timesToShow={3}
copyClosePrompt="Close"
permanentlyHideOnDismiss={false}
/>