Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@pwabuilder/pwainstall

Package Overview
Dependencies
Maintainers
1
Versions
48
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@pwabuilder/pwainstall

`pwa-install` is a [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that brings an awesome "install" experience to your Progressive Web App!

  • 1.4.1
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

pwa-install

pwa-install is a web component from the PWABuilder team that brings an awesome "install" experience to your Progressive Web App!

Built with lit-element

What does it look like?

An image of what the component looks like

Using this component

Install

There are two ways to use this component. For simple projects or just to get started fast, we recommend using the component by script tag. If your project is using npm then we recommend using the npm package.

Script tag

  • Put this script tag in the head of your index.html:
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@pwabuilder/pwainstall"
></script>

NPM

  • Run npm install @pwabuilder/pwainstall
  • import with import '@pwabuilder/pwainstall'

Then you can use the element <pwa-install></pwa-install> anywhere in your template, JSX, html etc. An example of using this component can be found here: https://glitch.com/~pwainstall

API

Properties

PropertyAttributeDescriptionTypeDefault
showopenshowopenWill always show the install buttonbooleanfalse
usecustomusecustomHides default buttonbooleanfalse
manifestpathmanifestpathpath to your web manifeststringmanifest.json
explainerexplainerControls the text of the explainer text just below the titlee of the app headerstringThis app can be installed on
featuresheaderfeaturesheaderControls the text of the features headerstringKey Features
descriptionheaderdescriptionheaderControls the text of the description headerstringDescription
installbuttontextinstallbuttontextControls the text of the install buttonstringInstall
cancelbuttontextcancelbuttontextControls the text of the cancel buttonstringCancel
iosinstallinfotextiosinstallinfotextControls the iOS installation info textstringTap the share button and then 'Add to Homescreen'

Methods

nameDescription
openPrompt()Opens the install modal
closePrompt()Closes the install modal

CSS Variables

We recommend using our CSS variables to easliy tweak the style of this component to fit your project. Here are our current supported CSS variables.

nameDescription
--install-button-colorChanges the color of the install button
--modal-z-indexChanges the z-index of the install modal
--modal-background-indexChanges the z-index of the install modal background
--modal-background-colorChanges the background color of the install modal

FAQs

Package last updated on 02 Mar 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc