Using in Progressive Web Applications

The Kendo UI for Angular components are fully compatible with Angular Service Workers and enable you to create Progressive Web Applications.

Overview

Progressive Web Applications (PWAs) help you create applications for web and mobile platforms that can work offline and can be accessed outside the browser on supported mobile devices.

PWAs blur the line between web and traditional native applications and leverage a number of key technologies:

• Service Workers—Allow the application to take control of the network and to function offline.
• Application Manifest—Allows the user to pin the application to the Home screen.

The Progressive Web App Checklist lists all important requirements for Progressive web applications.

Evaluating PWAs

Google's Lighthouse tool generates a report which focuses on five major fields—performance, Progressive Web Application, accessibility, best practices, and search engine optimization (SEO). These indicators demonstrate the strengths and weaknesses of the application and allow for determining areas for improvement.

Sample Project

This sample project is based on the Angular Service Worker support for CLI projects. For a working example on PWAs with a Lighthouse score of 90+, refer to the kendo-angular-pwa repository on GitHub.

1. Create a template CLI project with a default ngsw-config.json configuration file for the service worker by running ng new my-project --service-worker. You can further modify ngsw-config.json by applying a custom service worker configuration.
2. (Optional) Create a manifest.json file. manifest.json instructs the application device how to display the application on its home screen. For more information on setting up and configuring manifest.json, refer to the article about the web app manifest.

Suggested Links

• Getting Started with Progressive Web Apps
• Getting Started with Angular Service Worker
• Getting Started with Kendo UI for Angular
• All Things Angular Telerik Blog Page