Web push, from me, to you. Da-da-da-da-da-da-da-daaaaa...
JavaScript CSS HTML
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bin
client
routes
.gitignore
README.md
app.js
gulpfile.js
package.json

README.md

Connected FT

A 20% time project to explore connecting unique devices to FT user accounts.

Rationale

Engaged customers are more valuable to the FT than customers that come and go. As such, much of our thinking revolves around 'How can we make the FT engaging enough to keep people coming back'. To this end, we try to surface content that we think each individual user will find most valuable at the times we think they're most likely to consume it.

This is a good approach, but I think that we could enhance this offering by enabling customers to feed their own habit. 'Connected FT' enables two things:

  • A user can identify their individual devices to the FT (in a non-permanant way) and tie them to their account.
  • Users can send FT content seemlessly from any FT.com offering to any device of their choosing.

This functionality is enabled through the Web Push APIs.

Typically, push notifications are used by services to alert users of something that has happened while they were away from said service. This functionality, once exposed to the use, can also be used to allow individuals to send content to themselves to best suit their immediate or near-future needs.

Building

  1. Clone this repo.
  2. cd into the directory
  3. npm install
  4. npm run start

Running

  1. Follow the build steps above
  2. npm run start

A server with the app to register individual devices will now be running at port 4567. This can be changed by adding a .env file to the project directory with PORT=[DESIRED_PORT_NUMBER] as an entry.

So far, push notifications have been observed to work on the following browsers/devices:

- macOS (10.10.5)
	- Chrome (57.0.2987.133)
	- Firefox (53.0.2)
- Android (OnePlus 2, OxygenOS 3.5.6, Android 6.0.1)
	- Chrome (58.0.3029.83)
	- Firefox (53.0.2)
	- Samsung Internet Browser (5.4.00-70)

API

There are three routes that ft.com services can interact with:

  1. /devices
  2. /timeline
  3. /notifications

The "Connected FT" progressive web app interacts with these endpoints, and is served from /. The code resides in the client folder, but is compiled, copied, and served from the public folder when the server is started.

/devices

This paths on this endpoint are used for registering devices with the Connected FT service, which are then associated with an FT.com account, and for getting a list of existing devices already associated with an account.

These endpoints require a valid FTSession cookie in each request in order to complete successfully. Failure to do so will result in a 401;

[ POST ] /devices/register

Accepts JSON passed in the body of the request.

Parameters:

// Example:
{
	"name" : "Sean's Phone", // A string to name the device...
	"subscription" : "https://android.googleapis.com/gcm/send/...", // A subscription URL generated by the device
	"type" : "phone" // The type of device being registered. Can be "phone", "tablet", or "computer"
}
// Response:
{
	"status": "ok",
	"deviceid" : "74c3cd1e-8171-4edf-a43c-2456967f910f"
}

The deviceid can now be used to trigger a push notification with the /notifications/trigger/:UUID endpoint.

If a device already exists that has the same type as the device being registered, it will be overwritten by the new device. This means that the UUID for the previously created device of that type will still exist, but will now pertain to the newly registered device. This means it is possible to have a maximum of 3 devices registered with Connected FT

- A phone
- A tablet
- A desktop computer

[ GET ] /devices/list

Returns a list of all devices linked to an FT.com user ID. The user ID is determined by the FTSession cookie which must be included in the request. It is not possible to get a list of devices for a user other than yourself with this API.

This interface is intended for use by other FT.com products which may want to trigger a notification for a user's device.

// Example:
// https://ftlabs-connected.ft.com/devices/list

// Response
{
	"devices" : [
		{
			"deviceid": "b671922a-ba10-464a-8bb4-5bb9a429a702",
			"name": "My Tablet",
			"type": "tablet"
		},
		{
			"deviceid": "c0fd6372-aeee-43a3-b5bf-4fd1957833cb",
			"name": "My Phone",
			"type": "phone"
		},
		{
			"deviceid": "1e493ff6-6db0-4bda-be53-20d9c33b0316",
			"name": "My Laptop",
			"type": "computer"
		},
	]
}

/timeline

Returns a list of items sent to the users devices. This request needs to include the FTSession cookie in the request in order to be valid.

[ GET ] /me

// Example:
// https://ftlabs-connected.ft.com/devices/list

// Response
{
	"items": [
		{
			"byline": "PM seeks to quell criticism over security as confident Tories target Labour heartlands",
			"imagesrc": "https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fcom.ft.imagepublish.prod-us.s3.amazonaws.com%2F49465b48-4adf-11e7-a3f4-c742b9791d43?source=next&fit=scale-down&width=700",
			"headline": "Theresa May ramps up anti-terror rhetoric in final election push",
			"uuid": "9963e04f-d658-4ebf-96a1-8575079f4b31",
			"senttime": 1496832977,
			"url": "https://ft.com/content/e2089f40-4abb-11e7-a3f4-c742b9791d43"
		},
		{
			"byline": "PM seeks to quell criticism over security as confident Tories target Labour heartlands",
			"imagesrc": "https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fcom.ft.imagepublish.prod-us.s3.amazonaws.com%2F49465b48-4adf-11e7-a3f4-c742b9791d43?source=next&fit=scale-down&width=700",
			"headline": "Theresa May ramps up anti-terror rhetoric in final election push",
			"uuid": "9963e04f-d658-4ebf-96a1-8575079f4b31",
			"senttime": 1496832977,
			"url": "https://ft.com/content/e2089f40-4abb-11e7-a3f4-c742b9791d43"
		}
	]
}

/notifications

[ POST ] /trigger/:DEVICE_ID

This endpoint will trigger a push notification for a device with the given DEVICE_ID. Device IDs can be retrieved for a user with the /devices/list endpoint.

This endpoint accepts JSON, and should have the following properties for 'Connected FT' to display the content properly.

This endpoint can be triggered by anybody, but they must pass a valid device ID (which are only accessible from the authenticated /devices endpoints), otherwise nothing will happen.

// https://ftlabs-connected.ft.com/notifications/trigger/c7b1e232-4825-43ab-96a4-065cf87ca8ad

{
	"headline" : "Conservatives hire Jim Messina for general election",
	"byline" : "Data expert ran Barack Obama’s 2012 presidential campaign",
	"imagesrc" : "https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fcom.ft.imagepublish.prod.s3.amazonaws.com%2Fe5d0372c-28e3-11e7-9ec8-168383da43b7?source=next&fit=scale-down&width=700",
	"url" : "https://www.ft.com/content/006e4a74-28df-11e7-bc4b-5528796fe35c"
}
// Response
{
	"status": "ok",
	"message": "Notification triggered for c7b1e232-4825-43ab-96a4-065cf87ca8ad"
}

This will result in a notification like the following (through Chrome on an Android device) screenshot_20170516-163201a

If the Connected FT PWA is open at the time, it will present in the app like so:

screenshot_20170516-163507a