1
00:00:00,180 --> 00:00:02,470
Hello and welcome to this video.

2
00:00:02,490 --> 00:00:09,780
In this video, we are going to be taking a look at some of the key components of progressive web apps.

3
00:00:09,810 --> 00:00:16,560
There are several component pieces to make a progressive web app.

4
00:00:17,070 --> 00:00:20,790
So I'm going to list some of the key components.

5
00:00:21,300 --> 00:00:23,520
The first is the manifest.

6
00:00:24,120 --> 00:00:30,960
The money first basically is one of the building blocks of progressive web application.

7
00:00:31,530 --> 00:00:40,080
And this basically is a Jason file that includes method data of the applications.

8
00:00:40,080 --> 00:00:49,140
So it contains some key information about the application, such as the name of the application, the

9
00:00:49,140 --> 00:00:49,920
icon.

10
00:00:49,920 --> 00:00:53,130
The application uses the launch.

11
00:00:53,250 --> 00:01:03,330
You are that the link you can use to access the app, the app configuration data, a background color

12
00:01:03,750 --> 00:01:10,800
and all that and essential information that the app requires is actually stored in the Manifest file.

13
00:01:11,010 --> 00:01:14,910
The next vital component is the service worker.

14
00:01:15,030 --> 00:01:24,360
This component basically makes the progressive web app feels like a mobile app in a progressive web

15
00:01:24,360 --> 00:01:25,140
application.

16
00:01:25,590 --> 00:01:36,180
When the website loads, they basically download and cache certain contents or data on a device locally.

17
00:01:36,270 --> 00:01:43,350
With the help of the service workers, a service worker is basically a JavaScript file.

18
00:01:43,920 --> 00:01:54,180
A service worker has a lifecycle with three stages their registration, the installation and the activation.

19
00:01:54,330 --> 00:02:04,200
So when a user enters a progressive web app for the first time, the service worker downloads and catches

20
00:02:04,350 --> 00:02:08,730
the view along with the content in the background.

21
00:02:09,330 --> 00:02:14,760
As a result, the site appears to load very quickly to the user.

22
00:02:15,270 --> 00:02:25,260
The next time he or she visits the application, the service worker is also responsible for push notifications.

23
00:02:25,410 --> 00:02:33,030
The next component of a progressive web application is an icon, so a progressive web application requires

24
00:02:33,030 --> 00:02:44,190
an icon that should be ideally 144 by 144 in size, and the format is usually a P and G format.

25
00:02:44,610 --> 00:02:51,840
This is basically the icon that appears on the home screen or in the app's tree.

26
00:02:52,350 --> 00:03:02,730
And this makes the app distinguishable so a user can basically tap on the icon to launch the app.

27
00:03:02,880 --> 00:03:08,670
The next vital component of progressive web application is security.

28
00:03:08,700 --> 00:03:17,730
Using Hasti TPS through a progressive web app is served through a secure ATP connection.

29
00:03:18,450 --> 00:03:26,160
This is the only way you can access and use the progressive web application.