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

# How it works

The **network-with-cache-fallback strategy**, also known as the network-first strategy, is a technique for handling requests in a service worker. Implement it using the following steps:

* Listen to requests in the service worker's `fetch` event.
* Send the request to the network.
* Return it to the requester if the network response is received successfully.
* Search for the request in the cache and return the response if available—if the network request fails. 

The slides below illustrate the steps to implement this strategy.



# Advantages

This strategy takes advantage of both the network and cache, utilizing the cache only when necessary, such as when there is no network access.

It also means that online users get the most up-to-date content, but offline users get an older cached version. However, we can update the cache entry if the network request succeeds.

# Disadvantages

The response might be slow online, even if the resource is available in the cache.

## Issues: A network timeout
A potential issue with this strategy is that the network failure does not happen instantly. This makes it difficult to simulate network behavior because the network can be set to either on or off. If we set the network off, the request will fail instantly.

A poor internet connection, where the request times out after 60 seconds, can result in a poor user experience because they have to wait 60 seconds before the cache is used as a backup.


# Implementation and testing


Implementing this strategy involves using the `fetch` method to make the network request and using the cache as a fallback in case of errors. The code in the `sw.js` file below demonstrates the implementation.

To test this implementation, follow these steps:
* Run the application and open it in another tab. 
* Ensure that the new service worker is installed. 

The app should work fine with an available internet connection. The bare app shell should still load offline as the request falls back to the static cache.


Understand how the network-with-cache fallback strategy combines using assets stored in the cache and making network requests.

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

The Network-with-Cache-Fallback Strategy

How it works

Advantages