Building Performant Progressive Web Apps from Scratch

Understanding how to build progressive web apps from scratch and without front-end frameworks will let you take advantage of the new capabilities of the web platform.
Course info
Rating
(20)
Level
Intermediate
Updated
May 3, 2019
Duration
1h 34m
Table of contents
Description
Course info
Rating
(20)
Level
Intermediate
Updated
May 3, 2019
Duration
1h 34m
Description

In the ever-growing developer landscape, being able to build progressive apps from scratch is an essential skill. In this course, Building Performant Progressive Web Apps from Scratch, you will gain foundational knowledge of progressive web apps. First, you will learn about service workers. Next, you will discover the Web App manifest. Finally, you will explore how to optimize the performance of your web app. When you’re finished with this course, you will have the skills and knowledge of progressive web apps needed to build your own.

About the author
About the author

Jad is a Google Developer Expert, Microsoft Most Valuable Professional and Freelance Web Consultant based in Amsterdam.

Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone. My name is Jad Joubran, and welcome to my course, Building Performant Progressive Web Apps from Scratch. I am a Google developer expert, Microsoft MVP, and a self-employed web consultant based in Amsterdam. Progressive web apps let you deliver engaging user experiences to your users while using web technologies. In this course, we are going to build a progressive web app without any front-end framework. Some of the major topics that we will cover include getting started with service workers, using Workbox to generate a service worker, integrating with the operating system with the web app Manifest, and optimizing the performance of your app. By the end of this course, you'll know how to turn your own web app into a progressive web app while focusing on performance for a better user experience. Before beginning the course, you should be familiar with the basics of HTML, JavaScript, and CSS. I hope you'll join me on this journey to learn progressive web apps with the Building Performant Progressive Webs from Scratch course at Pluralsight.

Caching Dynamic Content
In this module, we're going to learn how to cache dynamic content. So we're going to start by seeing the difference between precache and dynamic content, and then we're going to learn about Workbox dynamic routing, and then see all the different caching strategies, and then see how we can optimize the storage in cases where we may run out of storage. So what is the difference between precache and dynamic content? An example of a precached asset is the app shell. These are cached beforehand, which means at build time, we know what we want to cache, and we deploy this. And when the user visits our page, they will have all of these precached assets saved in their cache. This is static. It doesn't update dynamically, whereas the major example of dynamic content are API are calls, so for example, your app is fetching data from an API. This is dynamic. We cannot precache it. It's not static. And this will be cached on demand, which means only when the user does this fetch request we will cache it. So this obviously depends on user actions. One user might go to the Settings page, whereas another user might go to the Flights page, so then we will only cache the API request that has fired.