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>

# Setup

Workbox is an open-source project from Google, and it is currently the most widely used tool to develop PWAs.

It consists of a set of libraries and Node modules to abstract the complexity of service workers and caching strategies. This allows us to focus on the application business logic without worrying about the underlying PWA details.


Workbox gives developers more robust and granular control compared to PWA Builder, but, on the other side, it also expects a minimum of JavaScript and service workers know-how from the developer.

<br>

## Install via CDN
To get started, we first need to create a service worker to import the Workbox file `workbox-sw.js`.


importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');

if (workbox) {
  console.log(`Workbox is loaded!!`);
} else {
  console.log(`Workbox failed to load`);
}

The `importScripts()` method belongs to the `WorkerGlobalScope` interface and imports synchronously one or more scripts, comma-separated, into the worker's scope.

A global *workbox* object is created, and thanks to it, we can access all the packages individually (workbox.precaching or workbox.routing, for instance).

<br>

## Using a bundler
If we use a bundler in our project, we must first install the packages we want via npm, like `npm install workbox-precaching` and then import the modules in our project.

The bundler inlines the modules into the service worker file it generates. There are no global workbox objects, as with the CND approach.


Workbox is considered the state of the art for building PWAs. It is framework agnostic. That is, we can use it with any JavaScript framework or vanilla solutions.

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

Workbox

Setup

Install via CDN