This year we put ourselves forward to do a talk at Codegarden (the annual conference for Umbraco developers). Our talk was titled "Umbraco beyond the web" and in a nutshell it presented the idea that if we think of Umbraco as a pure CMS (i.e. a "Content Management System") then we're not constrained to just using it for building and managing websites.  It has uses beyond this and if we leverage the things that it was designed to do well, then it proves to be a great tool for applications across the technological landscape.

When preparing for the talk we kept coming back to the idea of Umbraco being a fantastic "publishing" tool.  We have a user interface that we can tailor for any purpose, it is fast , scalable, secure and we can publish ("transform") our content to be distributed to platforms as diverse as social media platforms, wearable devices and emergency paging mechanisms (to name but a few).

We built a great demo to illustrate this but it didn't make the cut for Codegarden (we still managed to sneak in a little Easter Egg for the audience. More info on this later…). So this blog is really just a platform to highlight our findings - that Umbraco is fantastic for publishing to different channels, it's incredibly easy to do and even easier if we leverage SAAS tools to take care of the heavy lifting for us.

The Concept

We've developed and use an application internally at Mayfly that allows an administrator to send push notifications to a member of the team from within our intranet (Umbraco) for emergency purposes and out of hours support requests. Umbraco's flexible UI, built-in templating mechanism and publishing functionality provides the perfect platform for this.  We wanted to do a similar thing for our demo at Codegarden - essentially send a push notification to each member of the audience containing a (secret) link that contained an "Easter Egg" - a freebie giveaway that only members of the audience had access to. 

As such our demo would illustrate that we can easily model a content type that represents the content (push notification) that we would like to distribute to our users (audience).

The Solution

There's a ton of push notification applications around that we can integrate with.  For the purpose of the demo though this posed a few challenges - for this to work we'd need every audience participant to either sign-up to a push notification service or download an app. This was clearly too burdensome a task. 

To accomplish this we instead looked to modern browser techniques.  Chrome, Safari and Firefox currently support the Notifications Api which essentially allows us to deliver a push notification through the browser to a user that has previously accepted to do so. We can deliver notifications at any time and the user isn't required to be using the page that was originally used to "deploy" the notification service.  This means that we are able to subscribe users to the service merely by them visiting a page and having them accept to receive notifications in the future. This was the perfect mechanism for delivering the notifications as part of our demo.

We didn't want to resort to complex integrations to illustrate Umbraco's use as a publishing platform; instead we wanted the demo to be as simple to understand as possible. To achieve this we looked to the "cloud" (it's an overused term I know, but the "internet" just doesn't cut it anymore). We looked at SAAS (Software as a Service) based applications to provide the "link" between Umbraco and the user. Though this is probably an unnecessary step (we could obviously just send the notifications using custom code from within the context of an Umbraco application), we still wanted to illustrate Umbraco's purpose as a publishing platform  - and by this we mean a system through which we can publish content in a standard format and have it delivered to different clients / consumers / platforms (a direct integration between Umbraco and the browser would sidestep this).

We achieved this through a combination of 2 SAAS applications:


Roost provides the wrapper to the push notification service.  It provides a web based REST API through which we can deliver notifications to given subscribers. There's a ton of documentation available and integration is simple (by including a set of files within your website root and adding a JavaScript reference to the page). Through Roost we get a ton of stats available, we can unsubscribe users at the click of a button and we don't need to worry about browser compatibility as they continuously update their API.  Again, we could integrate with Roost directly but this doesn't fit with our publishing model.  For this all to fit together we needed another tool to be the gateway to the Roost API.  A tool that could potentially be the gateway to ANY API.  A tool that would allow us to publish content in a consistent output / format from Umbraco and "translate" this to our target endpoints / integrations.  This is where Zapier comes in.


Mayfly Flow Diagram 2

Both the Roost and Zapier user interfaces are incredibly easy to use and it's possible to get up and running incredibly quickly (from start to finish the demo took about 2 hours to put together, which included the installation and configuration of Umbraco). 

Outputting RSS from Umbraco is a simple task and one that every Umbraco developer must have completed at one point in their career (if you haven't there are prebuilt templates and views in Umbraco specifically for this purpose).  The "magic" however happens at Zapier.

You start by "mapping" your APIs and functions together:

Zapier Map

We then need to tell Zapier the location of our RSS feed (Zapier will poll this url at given intervals dictated by your subscription) and tell it what it needs to know in order for it to understand that new content has been added.  In our example we chose "Anything is different" which means that if the feed changes in any way then there is probably a new item for it to push.

Zapier Map Event

Finally we need to create the content for the push notification by mapping the fields from within our RSS feed.

Mapier Map Properties

And that's pretty much it!  Activate the "zap", publish some content, install Roost on your website and you're ready to start sending push notifications directly to your users with minimal coding, minimal integration risk and all the while using Umbraco purely as a publishing platform for content - essentially what it was designed to do and is very good at!