cap-angular-schematic-webpush

This repository is a basic Schematic implementation that serves as a starting point to create and publish Schematics to NPM.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

• Have an Angular app install npm 6.13.7

nmp install 

• Node 10.6 to the current.

Installation

To run the schematic, execute the following command.

ng add cap-angular-schematic-webpush 

The schematic will be configurated after you answer the following questions.

• What is the API Url for Web Push End Points? : < http://domain:port >
• What is the Vapid PublicKey? : < string >
• What is the Vapid PrivateKey?: < string > ​ The Schematic will do the next:

• Create a express server if not exist and ad the configuration and routes to use for add subscriptions and send notifictions to subscribers.
• Create a Angular service to send the subcription to the server and register on providers on app.module.ts.
• Add a example buttons to add the subscription event and for send notifications to subscribers.
• Add to app.component.ts the logic for update the service worker, subscribe to web push notifications and for execute the events of the example buttons for subscribe and send notifications to subscribers.
• Install web-push and if not exits a body-parser package.
• Add to environments the Vapid Public Key for Web Push.

Touched files:

app
    |-- package.json
    |-- server.js
    |-- app.component.ts
    |-- app.module.ts
    |-- environments/environment.ts
    |-- environments/environment.prod.ts
    |-- shared/
        |-- web-push.service.ts

How To show the Allow Notifications Dialog

If by accident we click "Deny" in the Allow Notifications dialog after hitting subscribe, In order to trigger again the Allow Notifications popup, we need first to clear localhost from this list - chrome://settings/content/notifications

Generating VAPID keys

In order to generate a public/private VAPID key pair, we first need to install the web-push library globally:

npm install web-push -g

We can then generate a VAPID key pair with this command:

web-push generate-vapid-keys --json

And here is a sample output of this command:

json
{
    "publicKey": "BF1BhDhSW89yKw6pWbLlzcDpCR3I3ViSCEiS_z0q_RP9-ablo5Up8HDIEP1-GauARtU7MxB6Yl_7FI8UvczPmaQ",
    "privateKey": "6XaIXj1cbSoaCpxSbOA-xYWHSISVSMCPUcSvEcczxkg"
}

On Heroku

Once in the Heroku app the web-push package is installed, we must open the Heroku console and execute the next command: "web-push generate-vapid-keys --json"

After that:

• On Heroku config app create Settings -> Config Vars "publicKey" and "privateKey".
• Replace the publickKey in te environments files of the Angular app and deploy again.

Usage

angular 8

Built With

Schematic

Version

1.0.30

Authors

Software Allies - Software Allies ​

Contributor

César Alonso Magaña Gavilanes -cesaralonso

License

MIT © Software Allies