pwa-ios-invitation

PWA invitation react component for iOS (located in right place for different devices) and few utils usefull for PWA.

<PwaIosInstallInvitation/>

PWA invitation component on iOS style, located in a bottom for iPhones portrait and in top for iPad and iPhones landscape (greater iPhone SE)

import React, { Fragment } from 'react'
import PwaIosInstallInvitation, { IconShareIos } from 'pwa-const-and-invitation'

ReactDOM.render(
  <Fragment>
    <App />

    <PwaIosInstallInvitation
      showPwaInvitation={true}
      iosInvitationTimeout={10000}
      iosInvitationOnlySafari={true}
      iosInvitationContent={
        (iosDevice)=>
          <Fragment>
            Install my awesome webapp on your {iosDevice}: tap <IconShareIos /> and then Add to Home Screen
          </Fragment>
      }
    />

  </Fragment>,
  document.getElementById('root')
)

Prop / Const	Type	Default	Description
showPwaInvitation	bool or function::bool	true	Value or function that set PWA invitation visablity. It's affect Android devices too
iosInvitationTimeout	int	0	Milliseconds after last closing PWA invitation on ios to show it again
iosInvitationOnlySafari	bool	false	Set to true to show invitation on ios only in Safari
iosInvitationContent	string, jsx or function(iosDevice)	"Install this webapp on your {iosDevice}: tap <IconShareIos /> and then Add to Home Screen"	Ios invitation content
--ios-install-invitation-bg	css const	#f2f8ff	Component background color
--ios-install-invitation-text-color	css const	#37434E	Component text color

Consts

Consts that can be usefull with PWA works

// use this one to reduce bundle size, if you need only const
import { isPwa, isIos, iosDevice, isSafari } from 'pwa-const-and-invitation/const' 

// or you can use this one, if you use invitation too
import { isPwa, isIos, iosDevice, isSafari } from 'pwa-const-and-invitation'

Prop	Type	Description
isPwa	bool	true if application run as PWA
isIos	bool	equal true if device based on ios
iosDevice	string	iPhone or iPad or iPod
isSafari	bool	true if it Safari and NOT Chrome

IconShareIos

Ios style "Share" icon. You can use it for iosInvitationContent

import { IconShareIos } from 'pwa-const-and-invitation'

Prop	Type	Description
className	string	Custom css class for icon component

useWindowBeforeInstallPrompt

Hook for default PWA install invitation event

// use this one to reduce bundle size, if you need only const
import { IconShareIos } from 'pwa-const-and-invitation/hooks'

// or you can use this one, if you use invitation too
import { IconShareIos } from 'pwa-const-and-invitation'