How to Build a Progressive Web App


Tue 10 January 2017 By Lise Kemen

In my previous blog, I explained what a Progressive Web App (PWA) is. Today we will dive in deeper to understand what you need to do to build a great PWA.

Let’s take a quick look at what defines an application:

  • An application icon to have quick access on a device’s home screen
  • A splash screen to load things in background
  • A smooth, immersive and secure experience that loads fast
  • An online and offline experience with cached content
  • Push notifications
  • No browser search bar

These features are natively present in your browser. You can quickly check on your browser now which HTML5 APIs you can access.

Key Steps to Build a Progressive Web App

To benefit from all these APIs while taking into account the constraints of the mobile network world, technically we need to:

  • Define and build an application shell (or app shell)
  • Optimize content loading by managing cache through service workers
  • Define an application manifest to polish the app-like experience
  • Provide safe and secure browsing to the user

    PWA (Image courtesy below)
    Separate the application UI skeleton from the data to focus on speed. Illustration from Google. Image source

The app shell contains the minimal HTML, CSS, and key components of your application to display the basic user interface of a progressive web app. It fully separates the application UI from the data to focus on speed on the initial load. Once the app shell is defined and loaded as a first app skeleton, service workers enter the scene.

Service workers are worker scripts based on promises made to let you catch events and control how network requests are handled. They are independent of your app and are often described as proxies. These workers will cache your app shell, stay independent of the network state, and will also be there for managing background content updating and content caching. When offline, the user will browse the cached data while waiting for connectivity to retrieve the latest data from the server. The icing on the cake is that they will also manage the web push notifications.

The next step is to define your application manifest to control the way you engage users. The application manifest is a JSON file where you define the icon and name of your app for the user home screen, define the splash screen while resources are downloaded or restored from cache, set a theme color, specify the initial orientation of the page, and even remove the browser search bar to improve the native application feeling.

Your web application is almost ready. One last key point to ensure is that your PWA is safe and secure for your users. They need to be served from a secure origin by using HTTPS. Et voilà! You now have the key to build a great, safe, connectivity-independent, always up-to-date and memorable application.

It’s time to code now! I’ve gathered the best links to help you start building your own PWA.

Starter Kits
Your First Progressive Web App
Beginners guide to Progressive Web Apps
What web can do today?
https://pwa.rocks/

App Shell, AMP & Web Push Notifications
The App Shell Model
Accelerated Mobile Pages (AMP)
Web Push Notifications: Timely, Relevant, and Precise

Services Workers & HTTPS
https://serviceworke.rs/
Service Workers: an Introduction
Service Workers recipes
Why HTTPS
Preventing Mixed Content

Tools, Testing, and Debugging
Audit Web Apps with Lighthouse
Debug Progressive Web Apps
Progressive Web App Checklist
Progressive Web App Summit 2016 videos

Have fun and share your experience about PWA with us on Twitter!


Tagged: Nuxeo UI, Progressive Web App, How to