Getting Started with Progressive Web Apps
Course info
Course info
Description
Progressive Web Apps consist of a new palette of technologies such as the web app manifest, home-screen install support, service workers and the app shell. These bridge the gap even more between native and web apps offering new capabilities to web developers to create amazing desktop and mobile experiences. In this course, Getting Started with Progressive Web Apps, you'll learn how to develop car deals website using some of these new APIs and features that will transform it from a simple web page into a progressive web app. First, you'll explore the App Shell and figure out how it works. Next, you'll learn about client-side storage and service workers. Finally, you'll discover how to work with installable web apps. By the end of this course, you'll know what progressive web apps are and you'll have a full scope of the tools that you have at your disposal.
About the author
Bill is a Microsoft MVP, Google Developer Expert, a Senior Software Engineer at Software Competitiveness International, and the creator of Dotnetweekly. He has over 7 years of experience in building Web Applications and is excited to learn and teach technologies as they develop/mature in the ever-changing world of the web.
More from the author
Section Introduction Transcripts
Course Overview
Hi, everyone, my name is Bill Stavroulakis, and welcome to my course on Getting Started with Progressive Web Apps. I'm a Microsoft MVP, Google Developer Expert, and software developer at SoftCom. Do you wonder how AliExpress increased their conversion rate by 104% and how Flipkart tripled the time users spend on their site? With progressive web apps, we can bridge the gap even more between native and web apps. You, as a web developer, will have more tools to create amazing desktop and mobile experiences. In this course, we're going to develop a car deals website using some of these new APIs and features that will transform it from a simple webpage into a progressive web app. Some of the major topics that we will cover include the app shell, client-side storage, service workers, and installable web apps. By the end of this course, you'll know what are progressive web apps and have a full scope of the tools that you have in your disposal. Before beginning this course, you should be familiar with HTML, CSS, JavaScript, and AJAX requests. I hope you'll join me on this journey to learn progressive web apps with the Getting Started with Progressive Web Apps course at Pluralsight.
Course Introduction
Hi, this is Bill Stavroulakis and welcome to this course on Getting Started with Progressive Web Apps. Never before did we have the opportunity to make web apps really offline first, installable on our devices, and use some native features, such as push notifications, even when our webpage is closed. We'll develop a car deals website using some of these new APIs and features, that will transform it from a simple webpage into a progressive web app.
Web App Setup and Structure
In this module, we'll go over the technologies and tools needed to set up and run our demo project. Also, we'll get accustomed with the concept of the App-shell.
Client-side Storage
In this module, we'll go over the various client-side storage techniques. This step is necessary to get to know the different methods we have in our disposal to cache data and files. This way, we can improve performance and add states to our app.
Offline Support and Service Workers
This is the most important module of this course, and the cornerstone of a progressive Web app. Our application may have the app shell set, and simple client storage system in place for its data, however, it is not truly offline. In this module we'll go over the Service Worker spec and see how we can finally use the network as an enhancement, then being totally in control over it.
Installable Web Apps
Our web application is in an interesting state. It has a app show and it works both online and offline. Now, we would like to have the ability to load the installation banner, pin our application to the home screen of our mobile or desktop device with its own custom icon, a splash screen when a user opens it, launch it in full screen with no URL bar, and set the device orientation to make the experience as seamless as possible.