Challenge Overview:

In this challenge, you will learn how to create a Progressive Web App (PWA) using Angular. A PWA is a type of application that uses modern web capabilities to deliver an app-like experience to users, including offline functionality, fast loading times, and improved engagement.

By completing this challenge, you'll set up a PWA using Angular, implement service workers for offline support, and optimize your app for performance.

Objective:

Set up Angular to create a Progressive Web App (PWA).
Implement Service Workers to enable offline functionality.
Use the Angular PWA toolkit to optimize your app for performance.
Create a simple, interactive PWA that works offline and is installable.

Step 1: Set Up Angular Project and Add PWA Support

Create a New Angular Project (If you don't have one):

If you don't already have an Angular project, start by creating one:
```
 ng new my-pwa-app
```
Choose the default settings and navigate to your project directory:
```
 cd my-pwa-app
```
Add Angular PWA Support:

Angular has a built-in package to make your app a PWA. You can add this functionality using the following command:
```
 ng add @angular/pwa
```
This will automatically configure your Angular project for PWA capabilities by adding the required files and configurations:
- A manifest.webmanifest file for the app's metadata (like name, icons, colors, etc.).
- A service-worker.js file for managing caching and offline functionality.
- Updates to the angular.json file for PWA support.
Verify that the PWA Files Are Added:

After adding the PWA support, check the following files are in your project:
- src/manifest.webmanifest
- src/service-worker.js
- Updates in the angular.json file to enable the PWA service worker.

Step 2: Customize the Web App Manifest

The manifest file allows you to define the metadata for your PWA, such as the app name, icons, theme colors, and display properties.

Open the src/manifest.webmanifest file and customize it:

Here's a sample manifest you can modify:

 {
   "name": "My Angular PWA",
   "short_name": "PWA",
   "description": "A simple Angular PWA",
   "start_url": ".",
   "display": "standalone",
   "background_color": "#ffffff",
   "theme_color": "#1976d2",
   "icons": [
     {
       "src": "assets/icons/icon-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
       "src": "assets/icons/icon-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
     }
   ]
 }

name: Full name of the app.
short_name: Shortened name of the app that can be used on the home screen.
start_url: URL to load when the app is launched from the home screen.
display: Defines the display mode (standalone is used for PWA apps to simulate a native app experience).
background_color and theme_color: These define the splash screen color and the color of the header in the browser.

Step 3: Implement Offline Support with Service Workers

Angular uses service workers to enable offline capabilities and caching. The service worker automatically caches resources and serves them when the app is offline.

Verify Service Worker is Enabled in angular.json:

Check the angular.json file for the following configurations under build and serve:

 "projects": {
   "my-pwa-app": {
     "architect": {
       "build": {
         "configurations": {
           "production": {
             "serviceWorker": true,
             "ngswConfigPath": "ngsw-config.json"
           }
         }
       }
     }
   }
 }

This enables the service worker in production mode.

Review service-worker.js:

Angular will automatically generate a service worker file (service-worker.js) for caching your application assets. This file is responsible for managing which resources are cached and served to users when they're offline.

Step 4: Add a Basic PWA UI

Now, let’s add a simple UI to make sure your PWA is interactive and works well offline.

Modify the app.component.ts file:

Update the component to display a message indicating that the app is a PWA and can work offline.

 import { Component } from '@angular/core';

 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
   title = 'my-pwa-app';
 }

Modify the app.component.html file:

Add a simple message and a button to demonstrate offline functionality.

 <div style="text-align:center">
   <h1>{{ title }}</h1>
   <p>Welcome to your Angular Progressive Web App!</p>
   <button mat-raised-button color="primary" (click)="toggleOffline()">
     Toggle Offline Mode
   </button>
 </div>

Enable Offline Mode Button Functionality:

Add a method in the app.component.ts file to demonstrate toggling offline mode:

 toggleOffline() {
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.controller?.postMessage('toggleOffline');
   }
 }

Step 5: Build and Test the PWA

Build the Application for Production:

To test the PWA features, build the app in production mode:
```
 ng build --prod
```
This will create a production build with all the necessary files for the PWA (including the service worker).
Test Your PWA Locally with HTTP Server:

To test the PWA locally, you can use http-server to serve your app. First, install http-server globally:
```
 npm install -g http-server
```
Then, navigate to the dist folder and start the server:
```
 cd dist/my-pwa-app
 http-server -p 8080
```
Visit http://localhost:8080 in your browser to test your app. Check the "Application" tab in Chrome DevTools to verify if the service worker is installed and the app is available offline.

Step 6: Make Your PWA Installable

Test PWA Installation:

If everything is set up correctly, you should see a prompt to install your app when you visit it in Chrome. This prompt allows users to install the app on their home screen, just like a native app.
Check Installability with Lighthouse:

Run a Lighthouse audit in Chrome DevTools to test the PWA performance, installability, and offline capabilities. This will help you verify if your PWA meets the necessary standards for installation and performance.

Bonus Challenges:

Implement Push Notifications: Learn how to add push notifications to your PWA to engage users even when they’re not actively using your app.
Implement Background Sync: Use service workers' background sync capabilities to sync user data when the app goes back online after being offline.
Enhance Performance with Lazy Loading: Optimize your PWA by using Angular's lazy loading feature to load only necessary modules when needed.

Conclusion

By completing this challenge, you will have learned how to:

Create a Progressive Web App (PWA) using Angular.
Implement service workers for offline support.
Optimize your app for performance and offline capabilities.
Make your app installable and give it a native-app-like experience.

Requirements to Submit:

An Angular application with PWA functionality enabled.
Implemented service workers for offline caching.
A simple UI demonstrating PWA features (offline mode, installable app, etc.).
Test your app using Chrome DevTools and Lighthouse for performance.

Good luck, and happy coding! 🚀

Day 26 Progressive Web App (PWA) Angular Challenge