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

<br>

*From the MDN docs:*
> The web app manifest provides information about a web application in a JSON text file; this is necessary for the web app to be downloaded and presented to the user, similar to a native app (e.g., be installed on the home screen of a device to provide users with quicker access and a richer experience).

<br>

## Register the web manifest
Typically, the manifest file is stored at the root of our web application. It can be named **manifest.json** or **anythingYouWant.webmanifest** (as long as it has .webmanifest at the end) and serve it with the media type `application/manifest+json`.

To associate a manifest to a web application, we use the `<link>` tag in the `<head>` section of an HTML document (usually index.html):

<br>

*From the MDN docs:*
> The web app manifest provides information about a web application in a JSON text file; this is necessary for the web app to be downloaded and presented to the user, similar to a native app (e.g., be installed on the home screen of a device to provide users with quicker access and a richer experience).

<br>

# Register the web manifest
Typically, the manifest file is stored at the root of our web application. It can be named **manifest.json** or **anythingYouWant.webmanifest** (as long as it has .webmanifest at the end) and serve it with the media type `application/manifest+json`.

To associate a manifest to a web application, we use the `<link>` tag in the `<head>` section of an HTML document (usually index.html):

The web manifest provides metadata to *instruct* the browser about how the PWA should be rendered and displayed on a user's device. This is the first step to install a PWA on a device. 

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

Web App Manifest

Register the web manifest