Building Progressive Web Apps with the App Shell Model

Current browser features make it easy to achieve eight of the nine attributes that make a web page a progressive web app. In this course, you will learn how to achieve that elusive ninth attribute by learning how to leverage the app shell model.
Course info
Level
Intermediate
Updated
Mar 23, 2018
Duration
1h 45m
Table of contents
Description
Course info
Level
Intermediate
Updated
Mar 23, 2018
Duration
1h 45m
Description

At the core of building app-like Progressive Web Apps is a thorough knowledge of the app shell model. In this course, Building Progressive Web Apps with the App Shell Model, you will learn how to leverage the app shell model in your own web apps. First, you will discover what the app shell model is and why it’s desirable. Next, you will explore building app shells with server-side rendered HTML. Finally, you will learn how to build app shells with client-side rendered HTML. When you are finished with this course, you will have a foundational knowledge of how to leverage the app shell model that will help you as you move forward to building app-like experiences.

About the author
About the author

Nik Molnar is a Microsoft MVP and co-founder of Glimpse, an open source diagnostics and debugging tool.

More from the author
Progressive Web App Fundamentals
Intermediate
2h 56m
8 May 2017
WebPageTest Deep Dive
Beginner
2h 41m
13 Nov 2015
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi, everyone. My name is Nik Molnar and welcome to my course, Building Progressive Web Apps with the App Shell Model. I'm a program manager at Microsoft and a long-time web developer and web enthusiast. New and exciting browser features make it relatively easy to achieve eight of the nine attributes of what makes a web page a progressive web app. Those attributes include the app being responsive, always fresh, re-engageable, for it to work offline, to be safe, installable, discoverable, and linkable. The ____ attribute, a web page's ability to have app-like interactions is hard to define let alone implement and achieve and that's where the App Shell Model steps in to fill in the gap. An app shell separates an application's interface from its content, which allows for dependable and instantaneous loading of the user interface and provides the native app-like experience we're seeking. In this course we're going to learn the basic concepts of the app shell model and then dive into several techniques to implement them using both server-side and client-side approaches. By the end of this course you'll be able to create truly app-like experiences in your progressive web apps, no matter how they've been built before, all while increasing the rendering time of your application, reducing the storage footprint of your offline experience, and providing the ability to richly transition between UI states. Before beginning this course you should be familiar with what progressive web apps are and the technologies that drive them, but if you aren't, don't worry. I cover them fully in two of my other Pluralsight courses called, Building Offline Web Apps with Service Worker, and Progressive Web App Fundamentals. I hope you'll join me on this journey to learn how to improve the app-like experience of your web application with the Building Progressive Web Apps with the App Shell Model course at Pluralsight.