Using the Suite with Progressive Web Applications
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.
- Clone this repository by using your favorite Git client or by executing
git clone https://github.com/telerik/kendo-angular.git.
- Enter the project directory by running
- Install the node modules by running
Running the Application
A copy of the application is deployed at https://telerik.github.io/kendo-angular/integration-pwa/.
- Build the application in production mode to be able to access the service worker.
- Access the service worker by running
ng build integration-pwa --prod.
- Enter the newly created
distfolder by running
- 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:
Check its functionality by inspecting the Application tab of the browser console.
Check the Offline option so you can check the offline functionality of the application.
Inspect the cached local assets.
Inspect the cached remote assets.
Add the application to the home screen.
As a result, you will see the application icon on your desktop and in the browser dashboard.