Skip to content
This repository has been archived by the owner on Apr 15, 2019. It is now read-only.
/ kendo-angular-pwa Public archive

Kendo UI for Angular - Progressive Web Application example

Notifications You must be signed in to change notification settings

telerik/kendo-angular-pwa

Repository files navigation

This repository is no longer updated. To access the current version, refer to the kendo-angular repository.

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: Service Worker

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

We can inspect the cached local assets: Local assets

And the cached remote assets: Remote assets

Add the app to the home screen: Add to home screen

Confirm: Confirm

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

About

Kendo UI for Angular - Progressive Web Application example

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •