Angular - PWA - Demo - simple App - work offline - from browser service workers

 Building A Simple PWA App Step by Step Using Angular

============================================

Let's assume that you are familiar with Angular.

1.Create a new project with the following command. Here I named it pwa-example.

ng new pwa-example

2. Go to the project folder, then run the application.

cd pwa-example

ng serve -o

3. The browser will open, and by default, the application will run on port 4200.

4. Add the PWA function with the following command:

ng add @angular/pwa

5. After the process is complete, several new files will appear, such as ngsw-config.json, src/manifest.webmanifest, and assets/icons.

The ngsw file contains the service worker configuration in a customizable JSON format.

The manifest consists of how the PWA application will look when it's opened. There is a configuration for the application name and an application icon when it's installed by the user.

The assets/icons folder contains the default icons, which can be used directly for the PWA.

6. PWA only runs on https and localhost environments. In the example below, we will be using an http-server to run the app locally.

7. Run ng build --prod command. It will create files under dist/pwa-example folder.

8. Navigate to that folder using cd dist/pwa-example.

9. Run http-server command.

10. PWA is running on http://localhost:8080 by default. Open the Chrome developer tools, check the Application tab, and then Service Workers. If you see that the ngsw-worker.js is installed, then you have successfully created a simple PWA app.