Building Progressive Web Applications

Paths

Building Progressive Web Applications

Authors: Maximiliano Firtman, Bill Stavroulakis, Alex Mackey, Yaser Mehraban, Harit Himanshu, Kamran Ayub, Deeksha Sharma

A progressive web application, often called a PWA, is a type of application built using common web technologies including HTML, CSS, and JavaScript. It is intended to work on any... Read more

What You Will Learn

  • PWA foundations
  • Develop a service worker
  • Measure and increase web performance
  • Plan the PWA distribution model
  • Set up a framework CLI for PWAs
  • Test and debug PWAs
  • Use native platform features

Pre-requisites

  • HTML

Building Progressive Web Applications

In this path you will gain an overview of what PWA’s are and why they might be a good choice for your next app. You will then learn how to build and design a PWA while diving into service workers and performance. After learning how to publish a PWA you will learn about common testing and debugging tools to keep your up running efficiently and up to date.

Progressive Web Apps: The Big Picture

by Maximiliano Firtman

Jul 11, 2019 / 1h 40m

1h 40m

Start Course
Description

Understanding the progressive web apps platform, including its advantages, challenges, and differences with other app development approaches, can be confusing. Creating a good user experience for installation and usage is key for success, and to achieve that you need to understand a lot of concepts before starting the project. In this course, Progressive Web Apps: The Big Picture, you will gain the ability to understand the PWA platform before starting your next project. First, you will learn the differences compared to other app development approaches. Next, you will discover the main components, including the service worker, and how to get the installed app experience on desktop, Android, iOS, and iPadOS. Finally, you will explore how to start a PWA project and how to distribute the app from the browser or stores, including end-user and enterprise deployments. When you are finished with this course, you will have the skills and knowledge of progressive web apps needed to start a project for a new app or to upgrade your current apps.

Table of contents
  1. Course Overview
  2. Understanding Progressive Web Apps
  3. Creating an App Experience for Mobile and Desktop
  4. Programming the PWA with Web Tools
  5. Distributing the App to Your Users
  6. What's the Path to PWAs?

Getting Started with Progressive Web Apps

by Bill Stavroulakis

Nov 30, 2016 / 2h 11m

2h 11m

Start Course
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.

Table of contents
  1. Course Overview
  2. Course Introduction
  3. Web App Setup and Structure
  4. Client-side Storage
  5. Offline Support and Service Workers
  6. Installable Web Apps

Designing Progressive Web Apps

by Maximiliano Firtman

Jun 8, 2020 / 2h 3m

2h 3m

Start Course
Description

When you design web content, you are used to be contained within a browser, but not anymore with a PWA. In this course, Designing Progressive Web Apps, you'll gain the skills to properly design an app experience for iOS, Android, and desktop operating systems. First, you will explore the Web App Manifest and the creation of icons and splash screens that will define how your installed app will look like. Next, you will understand why designing without a browser user interface needs some attention, including some CSS tricks to provide a more native experience. Finally, you will learn how to make a mobile and desktop-optimized design, such as new ideas for your Responsive Web Design techniques, media queries and dark mode. When you're finished with this course, you'll have the skills and knowledge of Progressive Web Apps needed to design the best customized, usable, and accessible user experience for your users on Android, iOS, iPadOS, and all the available desktop operating systems.

Table of contents
  1. Course Overview
  2. Creating the Progressive Web App
  3. Defining Icons and Splash screens
  4. Designing Mobile and Desktop User Experiences
  5. Making an App-friendly Stylesheet
  6. Preparing meta data for distribution

Advanced Progressive Web Apps

by Maximiliano Firtman

Sep 1, 2020 / 2h 17m

2h 17m

Start Course
Description

Creating a good Progressive Web App is not just about the user interface, but also about understanding the platform, what's possible, and how to make a proper integration with the operating system. In this course, Advanced Progressive Web Apps, you’ll learn to integrate your app with mobile and desktop operating systems at different levels. First, you’ll explore the app installation flow and how to improve it. Next, you’ll discover how to enhance the experience by understanding the app's lifecycle, how to execute code in the background, and how to manage the updates and new versions of your app. Finally, you’ll learn how to integrate with the operating system, including communication with other apps and the usage of hardware and sensors available. When you’re finished with this course, you’ll have the skills and knowledge of APIs, design patterns, and techniques needed to create a Progressive Web App with better integration with the platform where it's installed.

Table of contents
  1. Course Overview
  2. Installing the Application
  3. Managing App's Lifecycle
  4. Updating the Application
  5. Integrating with Hardware and Platforms

Service Workers: Deep Dive

by Alex Mackey

May 8, 2020 / 3h 6m

3h 6m

Start Course
Description

Service Workers are a great addition to a web developer’s toolbox - enabling offline scenarios, performance enhancements, scenarios such as Push Notifications, and more! However, with this additional functionality comes complexity and also a few traps to watch out for.

In this course, Service Workers: Deep Dive, you’ll learn everything you need to know to make the most of Service Workers and avoid various pitfalls.

First, you’ll understand the origins of Service Workers, take a deep look at the Service Worker life cycle, and learn about the Cache API and various Caching strategies you can use.

Next, you’ll see various options to communicate with a Service Worker, and also explore Background Sync and Push Notification APIs, which are powered by Service Workers.

Finally, you’ll review Service Worker build and deployment considerations, testing, and third-party libraries such as Workbox.

When you’re finished with this course, you’ll have a deep understanding of Service Workers ensuring that you can make the most of this exciting functionality.

Table of contents
  1. Course Overview
  2. Service Worker Recap: Why, How, and Tooling
  3. Understanding the Service Worker Lifecycle: Installation, Errors, and Updating
  4. Understanding Cache and Fetch APIs
  5. Communicating with Service Workers, Background Sync, Notification and Push APIs
  6. Making Service Worker Development Easier: Builds, Testing, and Third-party Libraries

Web Performance for Progressive Web Apps

by Yaser Mehraban

Sep 1, 2020 / 1h 52m

1h 52m

Start Course
Description

Developing web applications is complex, but regardless of the choices you make, one thing that’s important (and particularly for PWAs) is performance. In this course, Web Performance for Progressive Web Apps, you'll learn how to measure, spot, and fix performance issues in PWAs. First, you’ll explore how to measure the performance of a web application using different tools.

Next you'll discover some techniques to use on the server side code which will result in a better speed and performance. Then, you’ll discover how to be reactive about web performance instead of waiting for someone to complain.

When you’re comfortable with those techniques, you'll go one step further and will become familiar with why performance is so important for PWAs. Finally, you’ll learn how to plan for improvements and apply changes step by step and measure the performance after each step to make sure you’re on the right path.

When you’re finished with this course, you’ll have the skills and knowledge needed to create well performing progressive web applications.

Table of contents
  1. Course Overview
  2. What Is Web Performance Optimization?
  3. How to Measure Web Performance
  4. Perceived Performance
  5. Server Side Optimizations
  6. Reactive Web Performance Techniques
  7. Client Side Performance Optimization

Deep Dive into Web Push Notifications

by Harit Himanshu

May 21, 2020 / 1h 24m

1h 24m

Start Course
Description

Web Push Notifications are all about delivering timely and engaging content to where your users are. By not having to ask for email or phone numbers and yet be able to deliver the content at the user's will is extremely powerful. This has led to a widespread adoption of push notifications. In this course, Deep Dive into Web Push Notifications, you will first learn the fundamentals of notifications. Then, you will gain the conceptual understanding behind creating notifications on the web. Next, you will gain understanding behind sending messages from the servers to clients. This will involve learning the security aspects such as VAPID protocol. Finally, you will learn to implement some of the best practices recommended by Google when delivering push notifications to your users. Throughout this course, you will learn the material using visual content and by following along with a project from scratch. When you're finished with this course, you'll have skills and knowledge of Web Push Notifications to integrate into a new or an existing project.

Table of contents
  1. Course Overview
  2. Project Setup
  3. Understanding Web Push Notifications
  4. Creating the Client-side Notification
  5. Creating the Server to Push Messages
  6. Following the Best Practices

Coming Soon

Publishing Progressive Web Apps

Coming Soon

by Maximiliano Firtman

Testing Progressive Web Apps

by Kamran Ayub

Aug 21, 2020 / 1h 38m

1h 38m

Start Course
Description

Progressive Web Apps (PWAs) take advantage of powerful APIs like notifications and service workers to bring native-like features to the browser. In this course, Testing Progressive Web Apps, you’ll learn how to effectively plan for and test these more advanced web APIs using automation tools and cloud-based services. First, you’ll explore how to develop effective test plans. Next, you’ll discover how to use automation tools to test PWA features and set up continuous testing. Finally, you’ll learn how to leverage cloud-based services to test your app across a wide array of platforms and devices. When you’re finished with this course, you’ll have the skills and knowledge of testing Progressive Web Apps needed to ensure your users have a consistent and stable experience.

Table of contents
  1. Course Overview
  2. Creating a Test Plan
  3. Implementing Automated Tests
  4. Testing Responsive Designs
  5. Testing Installability
  6. Testing Service Worker Caching and Offline Support
  7. Testing Notifications and Permissions
  8. Testing Keyboard Navigation
  9. Setting Up Continuous Automated Testing
  10. Using Cloud-based Testing Services

Debugging Progressive Web Apps

by Deeksha Sharma

Jun 3, 2020 / 1h 25m

1h 25m

Start Course
Description

Learn about the tools and techniques to debugging a progressive web application. In this course, Debugging Progressive Web Apps, you will gain the ability to debug, inspect, and fix issues in offline first apps. First, you will explore built-in audit tools to inspect PWA in the browser. Next, you will discover how to intercept and add to home screen using both local and production servers and how to trigger automatic browser promotion. Finally, you will debug and implement cache first strategy as well as, uncover and test service worker issues on installed PWA. When you are finished with this course, you will have the skills and knowledge of debugging strategies needed to develop, test, and ship progressive web apps that your end users love to use.

Table of contents
  1. Course Overview
  2. Project Set up and Code Walkthrough
  3. Module Audit and Debug App Installability
  4. Inspect Service Workers
  5. Inspect and Debug for PWA Optimizations
Offer Code *
Email * First name * Last name *
Company
Title
Phone
Country *

* Required field

Opt in for the latest promotions and events. You may unsubscribe at any time. Privacy Policy

By providing my phone number to Pluralsight and toggling this feature on, I agree and acknowledge that Pluralsight may use that number to contact me for marketing purposes, including using autodialed or pre-recorded calls and text messages. I understand that consent is not required as a condition of purchase from Pluralsight.

By activating this benefit, you agree to abide by Pluralsight's terms of use and privacy policy.

I agree, activate benefit