Newtonian Physics Mockumentary
Miss any of our Open RFC calls?Watch the recordings here! »


1.10.21 • Public • Published

Install pwafire via NPM

npm i pwafire --save

Get pwafire over CDN as an E6 Module

import pwafire from '';
const pwa = pwafire.pwa;

Import pwafire in your for e.g React App

import pwafire from 'pwafire';
const pwa = pwafire.pwa;

All stable in Chrome 80 and later versions, also in MS Edge. Check Browser Support status.

API Spec

For promise types, the promise value returned is an object

// Success...
{ type: 'success', message: 'Copied' }
 // Fail...
{ type: 'fail', error };

Do something with the promise value returned for e.g copyText;

// Copy text
pwa.copyText(text).then((res) => {
  // Do something with 'res'
  if (res.type === 'success') {
    // Success...

1. Copy Text

Copy text to clipboard.

Copy text to clipboard

// Copy text

2. Copy image (Only PNG are supported for security purposes) to clipboard

Copy png images to clipboard

Call the copyImage method on pwa


3. Web Share

Share links, text, and files to other apps installed on the device.

Define the data object to be shared

const data = {
  // Title of what to share
  title: `Some title..`,
  // Text to share
  text: `Some text...`,
  // Url to share...
  url: '',

Call the share method on pwa


4. Contacts Picker

Contacts Picker API allows a PWA to access contacts from the mobile device's native contacts manager.

Chrome 80 or higher running on Android M or later required.

Define the "properties" and "select type" option you need

const props = ['name', 'email', 'tel'];
const options = { multiple: true };

Call the contacts method on pwa, the promise resolves with an object

// Do something with the promise value...
pwa.Contacts(props, options).then((res) => {
  // Do something with contacts...
  const contacts = res.type === 'success' ? res.contacts : null;

5. Show PWA Connectivity status

Pass in two call back funtions, aka online and offline handlers.

Declaring the two handlers separately

// Online handler...
const online = () => {
// Offline handler...
const offline = () => {

Call the connectivity method on pwa, adding the two parameters

pwa.Connectivity(online, offline);

6. Fullscreen

Open app in fullscreen on a click event

Call the fullscreen method


7. Notifications

Show notifications. Pass a data object

Add notification data

const data = {
  title: 'Hello Notification!',
  options: {
    body: 'Progressive Web App Hello Notification!',
    icon: '../images/icons/icon-192x192.png',
    tag: 'pwa',

Call the notification method, pass in data object, for e.g

// Call the notification method...

8. Install

Add custom install button, provide a "button element" as the parameter

Call the install method


9. Badging

Add badging for app icons

Badging makes it easy to subtly notify the user that there is some new activity that might require their attention, or indicate a small amount of information, such as an unread count.

Set the badge

Returns an object, which is either a success or an error type

// Set the badge
const unreadCount = 24;
Clear the badge
// Clear the badge

10. Screen Wake Lock API

The Screen Wake Lock API provides a way to prevent devices from dimming or locking the screen when an application needs to keep running.

Call the install method, returns a promise value

11. Visibility

Check if user is viewing a page. Pause/play video or games e.t.c

Define page visibilty handler
// Do something....
const isVisible = () => {
If visbility api is not supported, define the handler
// Do something....
const notAvailable = () => {
Call the visibility method with the two arguments
pwa.Visibility(isVisible, notAvailable);

12. Web Payments

Allows users select their preferred way of paying for things, and make that information available to a merchant.

Call Payment method with three arguments

const paymentResponse = pwa.Payment(pay, paydata, validatePayment);

Example : compute total amount to pay

// Calculations...
const payment = {
  price: 1,
  discount: 1,
  get total() {
    return this.price + -;
  get tax() {
    return 0.14 * this.price;
// Destructure payment object...
const { price, tax, discount, total } = payment;

Set Payment methods

const paymentMethods = [
    supportedMethods: ['basic-card'],
    data: {
      supportedNetworks: ['visa', 'mastercard'],

Set Payment details

const paymentDetails = {
  total: {
    label: "Total Amount",
    amount: {
      currency: "KSH",
      value: total

Set other items to display

displayItems: [
      label: "Discount",
      amount: {
        currency: "KSH",
        value: discount
      label: "Taxes, 14% V.A.T",
      amount: {
        currency: "KSH",
        value: tax

Requesting additional info

const options = {
  requestPayerName: true,
  requestPayerEmail: true,

Create paydata object

const paydata = {

Validate payment

const validatePayment = paymentResponse => {
  // Destructure to get payment responses
  const { details, shippingAddress, shippingOption } = paymentResponse;
  // Destructure to get card details...
  const {
  } = details;
  // Destructure to get billing address...
  const {
  } = details.billingAddress;
  // Validate...
  let condition;
  if (condition) {
    // Return sucess
    return paymentResponse.complete("success");
  } else {
    // Return failure
    return paymentResponse.complete("failure");

Call Payment method, returns a payment response

const paymentResponse = pwa.Payment(pay, paydata, validatePayment);


npm i pwafire

DownloadsWeekly Downloads






Unpacked Size

38.7 kB

Total Files


Last publish


  • avatar