KendoAngularPwa

This repository demonstrates a PWA application based on the official Angular implementation of a service worker.

Get Started

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

Running the Application

1. We need to build the application in production mode so that we have the service worker available by running ng build --prod.
2. Enter the newly created dist folder by running cd dist.
3. Run the server in a disabled cache mode by runnig http-server -c-1.

Further help

Creating a new project via ng new my-project --service-worker will create a default config file of the service worker - ngsw-config.json. We can further modify this file. For example we can specify which local assets and data received from http requets, hitting particular domains, to be cached. For more details about the available configuration settings of the ngsw-config.json file check the following article:

Service Worker Configuration

We can also create a manifest.json file that is used to tell the device running the application how to display it on its home screen. For more details sbout setting up and configuring the manifest.json file check the following article:

The Web App Manifest

Once the application is up and running in prod mode, we can check its functionality by inspecting the Application tab of the browser's console:

We can then check the "Offline" option in order to check the offline functionality of the app:

We can inspect the cached local assets:

And the cached remote assets:

Add the app to the home screen:

Confirm:

Now, we will see the app's icon on our desktop and in the browser's dashboard: