Progressive Web App Fundamentals

There's a set of technologies, which when used together, supercharge web apps so they can compete with native apps. This course will introduce each of them, and teach you to convert existing apps into Progressive Web Apps - and to engage users.
Course info
Rating
(48)
Level
Intermediate
Updated
May 8, 2017
Duration
2h 56m
Table of contents
Description
Course info
Rating
(48)
Level
Intermediate
Updated
May 8, 2017
Duration
2h 56m
Description

The web is one of the most powerful and ubiquitous application delivery platform in the world. And yet, in recent years it's become an underdog, overshadowed by native applications brokered through costly app stores. In this course, Progressive Web App Fundamentals, you'll learn the fundamentals of Progressive Web Apps. First, you'll discover how to create installable web apps with Application Manifests. Next, you'll explore how to send push notifications. Finally, you'll learn how to achieve background syncing and how to automate testing of Progressive Web Apps. Once you've finished this course, you'll know how to turn your standard web app into something that's installable, works offline, and can more deeply engage users via push notifications using nothing more than a browser and your existing web development tool set.

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
WebPageTest Deep Dive
Beginner
2h 41m
13 Nov 2015
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello everyone! My name is Nik Molnar, and welcome to my course, Progressive Web App Fundamentals. I'm a program manager at Microsoft and a long-time web developer and web enthusiast. And the web is the most powerful, ubiquitous application delivery platform in the world. And, yet, in recent years, it's become an underdog overshadowed by native applications brokered through costly app stores. But the introduction of a set of new technologies, which when used together super-charge existing web applications into powerful progressive web applications, have the web poised to steal back the spotlight it so rightfully deserves and to engage users more deeply than ever. In this course, we're going to learn the fundamentals of progressive web apps covering application manifests, push notifications, background syncing, as well as the best practices and recommendations you should follow to make a truly great app. By the end of this course, you'll now how to turn your standard existing web apps into something that's installable, works offline, and can more deeply engage users with push notifications using nothing more than a browser and your existing web development toolset. Before beginning this course, though, you should be familiar with JavaScript and service workers, which are covered fully in my Pluralsight course called Building Offline Web Apps with Service Worker. I hope you'll join me on this journey to learn how to super-charge the web with the Progressive Web App Fundamentals course at Pluralsight.

Background Syncing
In this module, we're going to explore how progressive web apps can do background syncing of any input data that a user may have had while they were offline. You've probably seen scenarios like this before with any communications-based mobile app you may be using. So, for example, when I'm offline, I can open up my email app and write an email. And even though I can't actually send it, when my phone is connected, it will automatically send without me having to reopen the app. But when are we offline? Well there're lots of places that offline can happen to us. One of the most common for me is when I'm in the air flying or even sometimes out on a boat. In large crowds at baseball games that I like to go to, the cell towers just get overwhelmed, and I don't have much of a connection. Inside of any buildings or down in basements, particularly big buildings or when you're in elevators, it's really hard to get a connection. Or even in situations where you think you have a connection, but what you really have is a phenomenon called Lie Fi, which is when your phone is telling you you have a connection, but that connection is so spotty, you can't actually get any packets out. Now there're lots of other scenarios besides background syncing to consider for building an app that works well offline. And if you want to learn about those scenarios and the prerequisite for background syncing, which is service workers, I recommend checking out my Building Offline Web Apps with Service Worker course available on Pluralsight now. So now that we know a little bit about when users are offline, let's figure how we can implement background sync.

Best Practices for Progressive Web Apps
In this module, the final one of the course, we're going to take a look at some of the best practices for creating great progressive web apps. Over on the Google developer site, they maintain the Progressive Web App Checklist. This is the list that we're going to be using to make sure we're following all of the best practices. And later in the module, I'm going to introduce you to a tool called Lighthouse, which will help us test some of the items on this list. The link for this page is included in the course notes, but you can see it here at the top of the screen. Not only does the list call out what you should be doing, it also lists how to test to make sure you're completing the objective appropriately, as well as how to fix your application to meet the objective when you don't. Let's go ahead and take a look at each of the items on the list.