Creating a Progressive Web App with a Headless CMS — Part 1

Part 1 | Part 2 | Part 3

Think of all the developers you have met.

Now, limit the list to the ones that like programming for every platform / browser / display.

Next, trim it down to ones that love to maintain app codebases for multiple ecosystems.

I’m guessing you’re down to a pretty short list of people at this point.

The fact of the matter is that it’s a tough job to make something look (and perform) great for every user on every device, without wanting to table-flip a few desks along the way. And it’s not a new problem. Ever since there was the great browser war of the early 2000’s, developers have been fighting every pixel of their design to make sure things loaded properly. Add to that the rise of mobile platforms, and the fight became comically one-sided. A futile war to wage, but one every programmer has been enlisted to join.

Enter Progressive Web Apps (or PWAs “as they are known around my condo”). The brainchild of some very smart Google developers back in 2015, PWAs are designed to deliver an app-like experience to every user, regardless of their platform. Through responsive design and background processes, PWAs allow you to load your UI quickly, then populate your content asynchronously for a seamless, secure experience. And they can do it all without an install on the device.

With PWAs so focused on loading content smoothly, powering them with a solid content delivery platform is essential. The answer? A headless CMS. These scalable, API-driven services allow you to manage your data in a sleek UI, while cranking out beautifully-curated content to your apps. It’s a win/win for everyone!

Not convinced? Let me show you how in this first article of a multi-part series.

What is a PWA? (Asking for a friend…)

Those are actually phones I’ve collected over the past 10 years.

A Progressive Web App (PWA) is a streamlined web application that delivers responsive content in a native-app experience. Designed to look great in a browser or on a phone, PWAs are all about giving the user the best experience possible. Built on top of web technologies and libraries, these applications can be quickly coded using standard HTML and JavaScript skills, allowing current web developers to code them easily. By taking advantage of some modern browser capabilities, mobile users can receive background updates, push notifications, and a slew of other device capabilities. No network? No problem! PWAs can use cached data to ensure fast loading, even when you’re in your underground bunker eating canned peaches with no reception. In short, PWAs are about combining the best of web and mobile, into a single, optimized experience.

Read more about Progressive Web Apps

How can a Headless CMS help?

While PWAs are certainly the star of the show, they’d still be working smoky Las Vegas lounges if wasn’t for some great content. The guy-behind-guy, content delivery is key to making sure the app runs smoothly. This means being able to update information quickly, deliver it lightning-fast, and ensure developers have a robust platform to work with. Headless CMSs are perfect for the job by using all the fantastical aspects of the cloud, coupled with powerful, technology-agnostic APIs.

With these CMSs, developers are free to code their applications any way they need, and always know their content will be ready to display. Because PWAs are based on working with or without connectivity, tLastly, CMSs offer scalability and the freedom to code in whatever language it says on your business card.

In our demo, we chose to use Kentico Cloud for our headless CMS. This platform provides a scalable and flexible solution for delivering content to any device or channel.

Read more about Kentico Cloud

Architecting the app

Having a good plan isn’t just smart, it’s essential. If the first guy to ever make a pizza started with the sauce on the bottom, think of the struggles we’d have to deal with as a civilization. For PWAs, this means knowing what you are going to build, and how you’re going to leverage the technology. You need to decide what parts of the UI you’re going to load first, how you’re going to load your content, and when and where you’re caching information. Because PWAs should give mobile users an app-tastic joyride, you need to think about how you will implement push notifications, updates, and other phone-centric experiences.

To begin, break down your application into logical sections. From a design standpoint, identify your header and footer areas. These are what you’re going to load first. Think about how you’re going to use your service worker(s) to fetch your content and when. If you’re going down the headless CMS path, check out what SDKs your vendor has. These will greatly simplify your development and let you focus more on your UI.

For our demo, we started with a travel app, named Pack and Go. The app is designed to tell you all sorts of interesting information about places around you. For the design, we went with a simple header with a refresh button, matching many mobile apps already on your phone. The content would be the points of interests (POI) information, including the name, description, pictures, and coordinates.

Here’s a basic outline of the app functionality.

As a base, we used the Google PWA tutorial. It provided a simple interface and functionality, perfect for us to start building our new app.

Google PWA Tutorial

Creating the content

With the app functionality figured out, you want to start thinking about the content. You may already have yours in an existing site, database, or just floating around in your head. Your next step is to get it into your CMS. Don’t worry, they should have a content management API to help you script the process. But you won’t want to just drop it into the new system. Because headless content management systems are all about omni-channel delivery, you’ll need to spend some time mapping out your content models and structure. You may have some content that is perfect for the web, while other information that is better suited for smart phones and wearables. Mapping your data correctly will be key to getting the most out of the platform.

For our site, we started with a simple structure for our POIs. A few text and number fields, along with some assets were all that was needed to launch our initial PWA. In later blogs, we’ll build on this model to power our app.

POI Content Model

After creating the content model, we added several locations around the Boston area (with my family being from Pittsburgh, not my first choice of sample content). CMS’s allow you to manage content easily, so we leveraged the workflow capabilities to publish some of the POIs, while we continued to work on others.

Lots of interesting Boston POIs in content Inventory

Next time

Well, we’re over 1,000 words at this point and still haven’t shown any code! I’m going to wrap up Part 1 here to get ready for Part 2. In the next article, I’ll be diving deep into the code and show you how to integrate your headless CMS, code your PWA to load data, and ensure everything runs smoothly on your devices. See you next time!

Part 1 | Part 2 | Part 3