Skip to content

a small library for handling install Banner for Progreww Web Application(PWA)

License

Notifications You must be signed in to change notification settings

blackbing/install-prompt-banner

Repository files navigation

install-prompt-banner npm version npm Build Status codecov

This is a small library for handling install Banner for Progressive Web Apps(PWA).

Why

When developing Progressive Web Apps(PWA), the timing of Install App Banner is confused. The default prompt behavior is not cool for users. I create a simple count way to decide the timing of the install banner. This library is very tiny which is implemention from Deferring or cancelling the prompt https://developers.google.com/web/fundamentals/app-install-banners/. You can add it with whatever user's interaction in your web site.

For example,

  • click "Call to Action" 3 times
  • check latest more than 3 times
  • viewed more than 2 pages.

Dependency

No dependency

Install

yarn add install-prompt-banner

Usage

import InstallPrompt from 'install-prompt-banner';
// initial installPromptBanner
const installPromptBanner = new InstallPrompt();

// add 1 count when user do some interactive
installPromptBanner.addCount();

// check if prompt should popup
installPromptBanner.checkPrompt();

Real example (React)

  import InstallPrompt from 'install-prompt-banner';
  ...
  componentDidMount() {
    this.installPromptBanner = new InstallPrompt();
    this.installPromptBanner.addCount();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.cid !== this.props.cid) {
      this.installPromptBanner.addCount().checkPrompt();
    }
  }

Options

  • promptKey: (string) default is 'installPromptBanner'

  • minimumPrompt: (number) default is 2

e.g,

const installPromptBanner = new InstallPrompt({
  promptKey: 'custom-localstorage-key',
  minumumPrompt: 5
});

Development

yarn dev

Test

yarn test

About

a small library for handling install Banner for Progreww Web Application(PWA)

Resources

License

Stars

Watchers

Forks

Packages

No packages published