Skip to content
Branch: master
Find file History
tsvetomir and dtopalov CI build for example projects (#2364)
* chore: add shippable config

* chore: use node 10

* refactor: update lint rules, autofix

* chore: use npm ci

* chore: lint standalone examples

* chore: refactor lint script

* chore: fix linting errors

* chore: build examples

* chore: troubleshoot npm ci

* refactor: build script

* chore: ignore only post-install scripts
Latest commit 20b05da Jul 3, 2019

README.md

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.

Getting Started

  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.

Running the Application

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 --prod.
  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.

Further Help

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.

    Service Worker

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

    Offline

  3. Inspect the cached local assets.

    Local assets

  4. Inspect the cached remote assets.

    Remote assets

  5. Add the application to the home screen.

    Add to home screen

  6. Confirm.

    Confirm

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

Browser dashboard

You can’t perform that action at this time.