This Kendo UI for Angular sample project demonstrates how to use Kendo UI for Angular components with Progressive Web Applications (PWA) and is based on the official Angular implementation of a service worker.

1. Clone this repository by using your favorite Git client or by executing git clone https://github.com/telerik/kendo-angular.git.
2. Enter the project directory by running cd examples/projects/integration-pwa.
3. Install the node modules by running npm install.

A copy of the application is deployed at https://telerik.github.io/kendo-angular/integration-pwa/.

1. Build the application in production mode to be able to access the service worker.
2. Access the service worker by running ng build integration-pwa --configuration production.
3. Enter the newly created dist folder by running cd dist/integration-pwa.
4. Run the server in a disabled cache mode by running npx http-server -c -1.

Creating a new project with ng new my-project --service-worker will create a default ngsw-config.json configuration file of the service worker. You can further modify this file. For example, you can specify which local assets and data that are received from the http requests which hit particular domains will be cached. For more information on the available configuration settings of the ngsw-config.json file, refer to the article on Service Worker configuration.

You can also create a manifest.json file that is used to tell the device which is running the application how to display it on its home screen. For more information on setting up and configuring the manifest.json file, refer to The Web App Manifest article.

Once the application is up and running in production mode:

1. Check its functionality by inspecting the Application tab of the browser console.

   

2. Check the Offline option so you can check the offline functionality of the application.

   

3. Inspect the cached local assets.

   

4. Inspect the cached remote assets.

   

5. Add the application to the home screen.

   

6. Confirm.

   

As a result, you will see the application icon on your desktop and in the browser dashboard.