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
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.
Key Resources to Build your Own PWA
App Shell, AMP & Web Push Notifications
The App Shell Model
Accelerated Mobile Pages (AMP)
Web Push Notifications: Timely, Relevant, and Precise
Have fun and share your experience about PWA with us on Twitter!