This repository is no longer updated. To access the current version, refer to the kendo-angular
repository.
This repository demonstrates a PWA application 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-pwa.git
. - Enter the project directory by running
cd kendo-angular-pwa
. - Install the node modules by running
npm install
. - Install a web server by running
npm install -g http-server
.
- We need to build the application in production mode so that we have the service worker available by running
ng build --prod
. - Enter the newly created dist folder by running
cd dist
. - Run the server in a disabled cache mode by runnig
http-server -c-1
.
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:
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:
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:
Add the app to the home screen:
Now, we will see the app's icon on our desktop and in the browser's dashboard: