Learn how to build progressive web apps by understanding and implementing their building blocks.

Progressive Web Apps- Future of Web Apps(2).png

data.tar.gz

liveapp

new_spa

Web development is challenging, but progressive web applications provide a significant advantage over traditional web applications by enabling capabilities such as installation to the device, offline access, and push notifications.

You’ll start by learning about PWAs and understanding the core tenets of a PWA. Next, you’ll learn to implement features like offline support, intercepting network requests, and app installation banners using service worker APIs. You’ll then progress to caching strategies for improved performance, IndexedDB for storing data locally, and background syncing for unstable networks. Finally, you’ll cover responsive web design and native-device APIs to make your PWA feel and look like a native app.

After completing this course, you can build progressive apps with engaging and responsive experiences. You’ll also be prepared to optimize your existing web apps as PWAs, extending their reach and improving performance.

Building Progressive Web Applications

By using the `navigator.registerPeriodicSync()` method

By calling the `serviceWorker.registerPeriodicSync()` function

By utilizing the `registration.periodicSync.register()` method

By invoking the `navigator.serviceWorker.registerSyncTask()` function


How can a periodic sync task be registered in a service worker?

How can a periodic sync task be registered in a service worker?

Which event is triggered for the background sync tasks?

Which event is triggered for the background sync tasks?

Which option is used to customize the frequency of periodic sync events?

Which option is used to customize the frequency of periodic sync events?

Which event is triggered for periodic background sync tasks?

Which event is triggered for periodic background sync tasks?

Applications that require low-latency syncing

Applications with large uploads/downloads

Applications that need to sync offline changes when back online

Which type of application is *not* an ideal candidate for using background sync?

Which type of application is not an ideal candidate for using background sync?

To identify the type of resource being synced

What is the purpose of the `tag` property when registering a `sync` event?

What is the purpose of the <code>tag</code> property when registering a <code>sync</code> event?

Test your understanding of the concepts used in BackgroundSync API.

Introduction

Understanding the App Manifest

The Service Workers

Caching Using Service Workers

Cache Strategies

Offline Image Viewer

IndexedDB

Note-Taking App

Creating App-like UI & UX

Offline Experience with Background Sync API

Web Push Notifications (Notification API, Push API)

Native Device Features

The Photo-Sharing App

Wrapping Up

Quiz on Background Sync APIs