GithubHelp home page GithubHelp logo

kffl / react-ios-pwa-prompt Goto Github PK

View Code? Open in Web Editor NEW

This project forked from chrisdancee/react-ios-pwa-prompt

0.0 1.0 0.0 373 KB

A native styled 'Add to Home Screen' React component for PWAs on iOS

License: MIT License

JavaScript 68.24% SCSS 31.76%

react-ios-pwa-prompt's Introduction

React-iOS-PWA-prompt

npm version Gzip file size

Polyfilling PWAs for iOS

A React component that provides a customisable Progressive Web App (PWA) prompt telling the user to 'Add to Home Screen'. The prompt behaviour is baked in to 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.
  • ๐Ÿ“ƒ 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.

Usage

  1. Add react-ios-pwa-prompt as a dependency using yarn add react-ios-pwa-prompt.

  2. Import into your project:

import PWAPrompt from 'react-ios-pwa-prompt'
  1. Render the component:
<PWAPrompt />
  1. Add optional props to configure:
  • timesToShow: pass an integer to configure how many times to show the prompt. Defaults to 1.
  • promptOnVisit: pass an integer for the when to start showing the prompt. Defaults to 1 (the first page visit).
  • delay: pass an integer in ms to add a delay to the prompt. Defaults to 1000.
  • 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 to Add to Home Screen.
  • copyBody: pass a string to customise the body of the prompt. Defaults to This 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 to 1) Press the 'Share' button.
  • copyAddHomeButtonLabel: pass a string to customise label of add to home instruction. Defaults to 2) Press 'Add to Home Screen'.
  • copyClosePrompt: pass a string to customise label of close button. Defaults to Cancel.
  • permanentlyHideOnDismiss: pass a boolean to configure whether to never show the prompt again once dismissed. Defaults to true (hide forever).
  • debug: pass a boolean to put the prompt into debug mode, showing it on any device at all times. Defaults to false (production-mode).
<PWAPrompt promptOnVisit={1} timesToShow={3} copyClosePrompt="Close" permanentlyHideOnDismiss={false}/>

Examples:

iOS 12:

iOS 13 Light:

iOS 13 Dark:

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.