An example of push notifications and service workers
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
views
.env.example
.gitignore
README.md
index.js
package.json

README.md

Push notifications with Service Worker

This repo is an example of push notifications in the browser based on getting notified of new tweets to a chosen hashtag.

This currently works in Chrome version 42 and above and requires Node.js to run.

Preparing the application

Clone this repo and install the dependencies.

$ git clone https://github.com/philnash/the-web-is-getting-pushy.git
$ cd the-web-is-getting-pushy
$ npm install

Copy the .env.example file to .env.

$ cp .env.example .env

Fill in your credentials in .env.

To do this, you will need a Twitter application and a Google Project.

Twitter

Create an application (it only needs read capabilities) and generate an access token too. Then copy the consumer key, consumer secret, access token and access token secret to the .env file.

Google

Log in to the Google Developers Console and create a project. Once the project is created, go to the APIs menu item, under APIs & auth, search for "messaging" and enable "Google Cloud Messaging for Chrome". Then go to the Credentials menu item and find the API key. Copy that into the .env file too.

You will also need the project number. To find this go to the project overview and the project number is at the top of the screen. Copy that and enter it as the gcm_sender_id in public/manifest.json.

Hashtag

Choose a hashtag to follow, something reasonably popular will give you a good number of notifications to test with. Enter the hashtag in .env.

Run the application

Run the app by typing on the command line:

$ npm start

The application should be running at http://localhost:3000/. Click the button to give your permission to receive notifications and wait for them to start.