Gain insights into Progressive Web Apps. Delve into service workers, caching strategies, and their advantages. Learn about real-world Angular projects and deploying PWAs using Firebase. Optimize your web solutions efficiently.

angular.tar.gz

appId

authDomain

projectId

appKey

Angular-copy

Angular

Angular-deploy

Offline_page

Angular-prod-build

Progressive Web Applications are the state of modern web solutions. With the proper strategies, it is possible to drastically improve the overall performance and providing data even without a network connection. 
In an increasingly mobile-first world, optimising the time to load web pages can be our business's success. 

We will start by describing what PWAs are and their advantages over native and plain web applications. We then go deeper analysing fundamental concepts like service workers, caching strategies and when to use them in different scenarios. 

Aside from generic, framework-agnostic code samples, there will be an entire "hands-on" section dedicated to Angular, where we will create a complete, real-world PWA project from scratch.

Finally, we will learn how to deploy our PWAs to the cloud with different providers, describing in detail the approach with the Firebase platform. Thus, concluding our journey in the PWAs world.

Optimize your web projects with Progressive Web Apps

## Demo code

The widget below contains all the code portions needed for building an Angular PWA. 

This simple demo covers all the important topics we studied in the previous lessons:

- **Offering a responsive layout:** The cards are side by side on large screens but on top of each other on mobile devices.

- **Caching static assets:** .js, .html, icons

- **Caching GET calls:** according to different caching strategies (*Performance and Freshness*).

 

The cards in the demo gather their content from two different APIs:

- https://icanhazdadjoke.com/api (using the performance caching strategy)

- https://api.thecatapi.com/v1/images/search (using the freshness caching strategy)

When we have this application running on our machine, we can refresh the browser to see that the daily joke text is static and loads very quickly, while the cat photo is replaced each time, unless a timeout occurs. In case of a timeout, the latest cached photo will be provided, if available. This behavior is aligned to the caching strategies chosen for each endpoint, as we designated previously. 
The application should look like the image below:

# Demo code

The widget below contains all the code portions needed for building an Angular PWA. 

This simple demo covers all the important topics we studied in the previous lessons:

- **Offering a responsive layout:** The cards are side by side on large screens but on top of each other on mobile devices.

- **Caching static assets:** .js, .html, icons

- **Caching GET calls:** according to different caching strategies (*Performance and Freshness*).

 

The cards in the demo gather their content from two different APIs:

- https://icanhazdadjoke.com/api (using the performance caching strategy)

- https://api.thecatapi.com/v1/images/search (using the freshness caching strategy)

When we have this application running on our machine, we can refresh the browser to see that the daily joke text is static and loads very quickly, while the cat photo is replaced each time, unless a timeout occurs. In case of a timeout, the latest cached photo will be provided, if available. This behavior is aligned to the caching strategies chosen for each endpoint, as we designated previously. 
The application should look like the image below:

At this point, you have all the knowledge needed to analyze and understand an entire PWA project implemented with Angular. Let's run it!

Introduction

The Progressive Approach

Install a PWA on a Device

Service Workers

Caching Strategies

PWA Tools and Libraries

Angular PWA

Deploying our PWA

Wrap up

Angular PWA Demo

Demo code