Discover how to build Progressive Web Apps with offline support, push notifications, responsive design, and native-like experiences. Gain insights into service workers, caching strategies, and app optimization.

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

Designing websites that are only accessible to users with disabilities

Designing websites that can adapt to different screen sizes and devices

Designing websites that are optimized for search engines

Absolute units are based on the viewport's size, while relative units are based on the element's size.


Absolute units are fixed, while relative units are flexible and adjust based on the font size of the element's parent.


Absolute units are used for text, while relative units are used for layout.

There is no difference between absolute and relative units.


What is the difference between absolute and relative units in CSS?

<p>What is the difference between absolute and relative units in CSS?</p>


This code hides the navigation bar on screens wider than 768 pixels.

This code changes the background color of the navigation bar on screens narrower than 768 pixels.

This code hides the navigation bar on screens narrower than 768 pixels.

This code changes the font size of the navigation bar on screens wider than 768 pixels.

Explain the following code:
```css
@media only screen and (max-width: 768px) {
  .navbar {
    display: none;
  }
}
```

<p>Explain the following code:</p>
<pre><code class="language-css">@media only screen and (max-width: 768px) {
  .navbar {
    display: none;
  }
}
</code></pre>


Which option has the highest color contrast?

<p>Which option has the highest color contrast?</p>


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 and 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 Responsive Design