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

pwafire

1.10.21 • Public • Published

Install pwafire via NPM

npm i pwafire --save

Get pwafire over CDN as an E6 Module

import pwafire from 'https://unpkg.com/pwafire/esm/index.js';
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
pwa.copyText(text);

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

Copy png images to clipboard

Call the copyImage method on pwa

pwa.copyImage(imgURL);

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: 'https://pwafire.org',
};

Call the share method on pwa

pwa.Share(data);

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

pwa.Fullscreen();

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...
pwa.Notification(data);

8. Install

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

Call the install method

pwa.Install(button);

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;
pwa.setBadge(unreadCount);
Clear the badge
// Clear the badge
pwa.clearBadge();

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
pwa.WakeLock();

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 + this.tax - this.discount;
  },
  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 = {
  paymentMethods,
  paymentDetails,
  options,
};

Validate payment

const validatePayment = paymentResponse => {
  // Destructure to get payment responses
  const { details, shippingAddress, shippingOption } = paymentResponse;
 
  // Destructure to get card details...
  const {
    cardNumber,
    cardSecurityCode,
    cardholderName,
    expiryMonth,
    expiryYear 
  } = details;
 
  // Destructure to get billing address...
  const {
    addressLine,
    city,
    country,
    dependentLocality,
    organization,
    phone,
    postalCode,
    recipient,
    re.gion,
    sortingCode 
  } = 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);

Install

npm i pwafire

DownloadsWeekly Downloads

71

Version

1.10.21

License

MIT

Unpacked Size

38.7 kB

Total Files

5

Last publish

Collaborators

  • avatar