I think I just built ITV's first Progressive Web App

A couple of months ago ITV got in touch saying they needed a microsite for Robozuna, a kids TV show that will air on CITV and Netlflix later this year. Having seen the image heavy design, this felt the perfect opportunity to get to grips with Progressive Web Apps.

robozuna

Why Bother?

As you'll see it's a single page site, with not a lot of content, so why bother with a PWA? In time we might make use of Push Notifications and other cool features, but the primary issue was speed. The textured backgrounds and a full width illustration there's a lot of static assets to load. With CRA all the images are cached so that on subsequent visit the page loads fast, almost instantaneously in fact regardless of network connectivity. Updates are downloaded in the background.

The Stack

Backend

The backend of the site is powered by Cockpit. I've never used this before but having looked for a simple self-hosted, headless CMS written in PHP this seemed a good option. The CMS holds news articles and a few snippets of text but not much else.

Front End

To build the front end we used Create React App. If you're new to CRA, it does lots of good stuff, but crucially it allows you to build React Apps with zero configuration (Webpack and Babel really aren't my thing, so this is music to my ears). The production build of CRA is a fully functional, offline-first Progressive Web App.

(While other high-tech solutions are available, we used Squash to quickly compress all the images used on the site)

Screen-Shot-2018-09-07-at-10.34.13

The Challenges

While imported images are automatically added to the cache, background images declared in CSS aren't. The easiest way to get around this is to import those images straight into your React Components, so instead of


// BlueBackground.jsx

import "./App.css";

class BlueBackground extends Component {
    render() {
            return (
                <div
                    className="DivWithBlueBackground"
                >
                    {children}
                </div>
           )
    }
}

// App.css

.DivWithBlueBackground {
    background: url(../bluepattern.jpg);
}

To get bluepattern.png in the service worker cache you need to do something like:


// BlueBackground.jsx

import "./App.css";

import bg from "./bluepattern.jpg";

class BlueBackground extends Component {
    render() {
            return (
                <div
                    style={{
                        backgroundImage: `url(${bg})`
                    }}
                >
                    {children}
                </div>
           )
    }
}

Maybe there's a better way, but this did the trick!

Next Steps

If you view the site offline (or on first render in fact), the news section is empty. News is only fetched once the page is loaded. Ideally I'd like to do this call in the service worker and cache the results (including the image), unfortunately CRA doesn't offer much customisation of the service worker out of the box, so that'll need to wait until a rainy winter's day (note to self follow these instructions to customise the service worker with CRA).

In Summary...

Create React App is a super cool and easy way in to progressive web app. It offers lots of quick wins, with minimal configuration. Find a small project and give it a whirl...

Show Comments