1
00:00:00,780 --> 00:00:03,370
Progressive web apps require
a new way of thinking about

2
00:00:03,370 --> 00:00:05,160
the architecture of your web app.

3
00:00:05,160 --> 00:00:09,510
When building progressive web apps, it's
recommended to use an application shell or

4
00:00:09,510 --> 00:00:11,980
apps shell architecture to ensure fast and

5
00:00:11,980 --> 00:00:15,940
reliable performance, even on
a slow connection or while offline.

6
00:00:15,940 --> 00:00:19,920
Championed by Google, an app shell
architecture is a set of standards that

7
00:00:19,920 --> 00:00:23,770
focus on providing a fast loading
experience to users by rendering

8
00:00:23,770 --> 00:00:27,630
a shell of your application immediately
when a user visits the app,

9
00:00:27,630 --> 00:00:28,850
before other assets have loaded.

10
00:00:28,850 --> 00:00:32,955
Using this app shell model allows you to
give your progressive web apps similar

11
00:00:32,955 --> 00:00:36,766
properties of native apps,
like instant loading and regular updates.

12
00:00:36,766 --> 00:00:39,379
For instance,
when you first load Flipkart Lite,

13
00:00:39,379 --> 00:00:43,270
you immediately see the app shell
containing the header UI, navigation and

14
00:00:43,270 --> 00:00:45,666
loader, before any of
the server data loads.

15
00:00:45,666 --> 00:00:50,103
App shell architecture separates
the core application infrastructure and

16
00:00:50,103 --> 00:00:51,146
UI from the data.

17
00:00:51,146 --> 00:00:55,976
In other words, it separates the parts of
an app that change often, like the data,

18
00:00:55,976 --> 00:01:00,187
from the parts that don't often change,
like the UI and static assets.

19
00:01:00,187 --> 00:01:03,488
The application shell
itself is the minimal HTML,

20
00:01:03,488 --> 00:01:08,570
CSS and JavaScript required to power
the user interface of your app.

21
00:01:08,570 --> 00:01:12,560
The application shell should load fast,
be cached locally, and

22
00:01:12,560 --> 00:01:14,440
dynamically display content.

23
00:01:14,440 --> 00:01:18,580
And since all the UI and infrastructure
is cached using a service worker,

24
00:01:18,580 --> 00:01:22,850
on subsequent loads your app only needs
to retrieve just the necessary data

25
00:01:22,850 --> 00:01:25,550
instead of having to
reload the entire app.

26
00:01:25,550 --> 00:01:29,460
The app shell files are loaded just
once over the network on first visit

27
00:01:29,460 --> 00:01:32,830
then saved to the device which
results in super fast startup times.

28
00:01:34,020 --> 00:01:35,700
When designing your app shell,

29
00:01:35,700 --> 00:01:39,340
you'll first break the app design
down into its core components.

30
00:01:39,340 --> 00:01:43,280
The components that need to be seen on
screen immediately, like the header,

31
00:01:43,280 --> 00:01:45,690
title, and navigation, for example.

32
00:01:45,690 --> 00:01:49,060
As well as other UI components
that are key to the app,

33
00:01:49,060 --> 00:01:51,820
like a loading indicator and
the layout template for your content.

34
00:01:52,860 --> 00:01:56,970
Also any supporting resources needed for
the app shell, like images,

35
00:01:56,970 --> 00:01:58,870
JavaScript, and styles.

36
00:01:58,870 --> 00:02:04,380
You include those components in your apps
index.html file using regular HTML markup.

37
00:02:04,380 --> 00:02:07,870
And once you've built your app shell,
you'll need to cache the app shell using

38
00:02:07,870 --> 00:02:11,990
a service worker so that it's always
available quickly and reliably.

39
00:02:11,990 --> 00:02:16,130
Now if you're familiar with native app
development, the app shell is similar

40
00:02:16,130 --> 00:02:19,530
to the bundle of code you'd submit to
an app store when publishing an app.

41
00:02:19,530 --> 00:02:23,620
It contains just the core components
necessary to get the apps started

42
00:02:23,620 --> 00:02:26,760
which means it usually
doesn't contain the data.

43
00:02:26,760 --> 00:02:30,620
Using the application shell model combined
with the core technologies of progressive

44
00:02:30,620 --> 00:02:35,370
web apps lead to huge wins in both
performance and user experience.

45
00:02:35,370 --> 00:02:39,300
And keep in mind that the principles and
technologies covered in these videos

46
00:02:39,300 --> 00:02:44,220
can equally enhance apps built with plain
JavaScript, React, Polymer, Angular or

47
00:02:44,220 --> 00:02:48,330
any other framework or library you choose
for building your progressive web apps.

48
00:02:48,330 --> 00:02:52,013
To learn more about application shell
architecture and how to cache an app

49
00:02:52,013 --> 00:02:56,180
shell with a service worker, check out
the links posted in the teacher's notes.

50
00:02:56,180 --> 00:02:59,677
So when should you build a progressive
web app over a native app?

51
00:02:59,677 --> 00:03:02,277
Well there are a few factors
you'll have to consider.

52
00:03:02,277 --> 00:03:07,510
First, identify your users and
the most important user actions.

53
00:03:07,510 --> 00:03:10,670
Even though progressive web
apps work in all browsers,

54
00:03:10,670 --> 00:03:14,430
to deliver the full app like experience,
users will need to be using browsers

55
00:03:14,430 --> 00:03:18,360
that support modern web technologies,
which isn't always the case.

56
00:03:18,360 --> 00:03:22,080
If certain browser features that lack
cross-browser support are required for

57
00:03:22,080 --> 00:03:25,490
important user actions, a native app
might be the better option because it

58
00:03:25,490 --> 00:03:28,170
will guarantee the same experience for
users.

59
00:03:28,170 --> 00:03:30,580
Now, the skill set for iOS and

60
00:03:30,580 --> 00:03:34,430
Android development is very different
than that of a web developer.

61
00:03:34,430 --> 00:03:38,010
So you'll also take into account whether
you and your team have the resources and

62
00:03:38,010 --> 00:03:43,130
skills needed to build a progressive
web app using modern web technologies.

63
00:03:43,130 --> 00:03:47,680
Building and maintaining native apps for
multiple platforms can be expensive and

64
00:03:47,680 --> 00:03:50,410
they only benefit those
users who install them.

65
00:03:50,410 --> 00:03:53,280
Plus standing out among
the millions of apps available in

66
00:03:53,280 --> 00:03:55,790
app stores these days is a tall order.

67
00:03:55,790 --> 00:03:58,750
Progressive web apps work on
any device with a browser, so

68
00:03:58,750 --> 00:04:00,880
choosing to build one could reduce costs.

69
00:04:00,880 --> 00:04:03,770
You'll build a single app
that works on any platform.

70
00:04:03,770 --> 00:04:07,310
Now for companies with massive user
bases like Instagram, Twitter,

71
00:04:07,310 --> 00:04:11,340
or Uber, that expect loads of users
to return to their apps frequently,

72
00:04:11,340 --> 00:04:13,150
a native app is still the way to go.

73
00:04:13,150 --> 00:04:17,280
Google has been publishing informative
case studies from companies adopting and

74
00:04:17,280 --> 00:04:19,760
benefiting from converting
to progressive web apps.

75
00:04:19,760 --> 00:04:22,240
And the results are very encouraging.

76
00:04:22,240 --> 00:04:26,200
And since Google is leading the charge
in the progressive web app movement,

77
00:04:26,200 --> 00:04:30,020
they've put together a progressive web app
checklist which breaks down all the things

78
00:04:30,020 --> 00:04:34,040
you'll need to create the best possible
progressive web app experience.

79
00:04:34,040 --> 00:04:37,910
They've even built an amazing testing
tool called Lighthouse that automatically

80
00:04:37,910 --> 00:04:41,590
verifies whether or not your app meets
all the progressive web app requirements.

81
00:04:41,590 --> 00:04:43,860
You'll find the links to all of
these in the teacher's notes.