Hey guys, I'm Venkat and in this video, we'll discuss what is a progressive web application,
commonly called PWA in short. As the name implies a progressive web application
is also a web application, the only difference is a progressive web application uses modern
browser APIs and capabilities to behave like a desktop or a native mobile app. In short,
a progressive web application has the best of both worlds - web app world and native app world.
So, what makes a web app a progressive web app? Well, although a progressive
web app is a web application, it behaves like a desktop or a native mobile application. So,
for a web app to be a progressive web app, it must have the following capabilities. Load instantly
like a native mobile app independent of network or internet speed. Capable of working offline. Just
like a native app even when there is no internet connectivity and offline, the app should load,
start and all those features that doesn't require a network connection must continue to work.
Support for push notifications. Just like a native mobile or desktop app should be able to receive
push notifications from a backend server even while the user isn't using the app. Automatic
self updates. When an update is available the application should be able to automatically update
in the background. The update shouldn't fail even if the connection to the server is poor or broken,
the app should be able to update itself when the connection is restored. App launch options. Just
like a native mobile app we should be able to start the app by clicking on the app icon. Like a
desktop app, we should also be able to launch from the operating system start menu or by clicking on
a shortcut icon from the desktop or home screen. Own app window. The app should be able to run in
its own app window not just a browser widow. Now, why is it called a progressive web application?
Well, just like any other web application, an end user might first discover and use your application
within a web browser, later the user progresses to installing it on their device and start using
the features like push notifications, launching the app by using its icon instead of manually
typing the web address in the browser, self updates etc. Hence the term progressive web app.
Now, when you intend to develop a new application, one of the first questions that comes to your mind
is what type of app you want to build - Native app, Web app, Hybrid app or a Progressive web app?
Well, let's quickly compare the pros and cons of each type of app. Native app, as the name implies
a native app is native to a given platform. For example, to develop native iOS apps,
we use Swift or Objective-C. Similarly Java for Android apps and Dot Net for Windows Phone apps.
Native apps have several benefits. They offer the fastest, most reliable and responsive experience
to users. It is also very easy to access device hardware like camera and microphone for example.
User interface and user experience of a native app can be easily matched to the underlying platform
conventions which obviously makes your users feel at home. There are disadvantages as well. Multiple
code bases. The main disadvantage of a native app is, it is native to the platform for which it is
built, meaning an Android app will not run on iOS and vice versa. This means, for every platform you
want to support, you have to create a new app targeting that platform. This nicely leads us
onto the next disadvantage. More time, cost and effort. Developing and maintaining multiple code
bases involve a lot of time, effort and money. In most cases developers specialize in one platform
iOS or Android for example. So, this means if you want to support three different platforms,
you may need three different teams which obviously adds to the time, cost and effort. Next Web App,
compared to a native app a web app is usually quicker and easier to build. We access and use
a web app using a web browser. This means it can be accessed and used on any device and any
operating system that has a web browser. However, if your web app is a non-responsive web app,
you may or may not have the same user experience on different devices and browsers. You may not be
able to use it at all on some devices. Also, web app doesn't have the same rich functionality as
native apps, for example, push notifications, being able to run in its own app window, rich
user experience etc. A hybrid app is basically a web app that is wrapped with a native shell
and then compiled into native iOS, Android or other mobile platforms. For building hybrid apps,
there are many technologies like PhoneGap, React Native, Ionic etc. With a hybrid app we have one
codebase which is tweaked a bit to support both web and mobile platforms. Since there is only
one code base to manage, the cost is substantially less than a native app for each platform. However,
hybrid app development can get extremely complex especially if you want to take
advantage of the unique capabilities of different platforms like iOS and Android for example. Also,
the user interface of a hybrid app doesn't have the same rich experience, look and feel
of a native app. Finally, Progressive Web App. Until progressive web apps came into existence,
web apps lacked the functionality of native apps like the ability to send push notifications, work
offline etc. A progressive web app works in a web browser. It also works on all mobile platforms as
a standalone app just like any other native app. It also works as an application in its own window
outside of a web browser on a desktop computer. For example on a windows desktop just like how
Notepad or Microsoft Paint run in their own windows, a progressive web app can also run in its
own window outside of a web browser. A progressive web app can run on any device that supports web,
be it smart TVs, wearable technologies like smart watches, game consoles, tablets etc.
All this is possible with just one code base. With a progressive web app we want to take the best
of both worlds - web apps and native apps. For example, the following are some of the features
we want from web apps. Use existing themes and skill set. Building a progressive web application
is not that different from building a standard web application. We use the same standards and
tools - HTML, CSS and frameworks like Angular, React, Blazor etc. So, there is no need to look
for additional specialized developers or acquire new skills. In just a bit, we'll see how easy it
is to build a progressive web application using Blazor. Easy to discover and share. Search engine
optimization and web search allows us to discover web applications very easily. If you found a web
application useful and want to share it with your family or friends, you just share the
URL of the web application, because all anyone needs to access a web application is its URL.
Easy to deploy and maintain. To publish and make your web application available for the public,
all you need to do is deploy to your web server and you're done. Unlike a native app, there's no
need to create a publisher account or request a review of the app and wait for the approval.
It's also very easy to maintain a web app, make a change, publish that change to the web server
and you're done. Unlike a native app, there's no need to wait for approval from the app store
and for your users to update the app on the device. When the users access your web app,
they are automatically accessing the updated app from the server. Now, some of the features we
want from native apps. Load instantly like a native mobile app independent of network
or internet speed, capable of working offline, support for push notifications,
own app window, that is the app should be able to run in its own app window not just a browser
window. How to create a progressive web app? Well, progressive web app is a design pattern
introduced by Google in 2015 and since then most companies have embraced it, so we can use
any of the web development frameworks like Angular or React or Blazor to create a progressive web
app. It's very easy than you think, to create a progressive web app with Visual Studio and Blazor
framework. On my machine, Visual Studio 2019 is up and running. Let's create a new project.
Select Blazor WebAssembly app template and then click "Next".
Provide a meaningful name for the project, a location where you want this project to be created
and name for the solution and then click "Next". As of this recording,
the latest Dot Net framework is .NET 5.0 which is already selected in the target framework dropdown
list. This is the screen where we tell Blazor, we want to create a progressive web application
and to do that, all we need to do is, check this check box and then click "Create".
There we go, we have our progressive web app created. Notice, when I expand
this folder "wwwroot" we see these two files
"manifest.json" "serviceworker.js", these two files are specific to a progressive web app.
Blazor has automatically included these files and the presence of these files
make our web app a progressive web app. For example, to customize the windows title,
color scheme, icon or other details, change the settings in manifest.json file. We'll discuss the
details of what these files are and the aspects of a progressive web app they control in our
upcoming videos. Now, let me run and quickly test this app on my local development machine.
Our app is up and running. This is a progressive web app. How can I say? Well, with the presence of
this icon next to the address bar. Notice, when I hover the mouse over, we see the tooltip "Install
MyProgressiveWebAppDemo" and when I click on this icon, we see a pop-up with "Install" button. When
I click the "Install" button, notice our app is automatically installed and it is now running
in its own window not the browser window. It works just like how it works in the browser.
When I click on these three dots we see the app info, that is the URL of our app, copy the URL,
open this app in a browser if you want to and even uninstall this app. When we installed the app,
it automatically included this shortcut icon for the app on the desktop. When we click it,
notice we have the app up and running in its own window. I have a windows 10 machine. In the start
menu, you can see, we now have an icon for our progressive web app and this is very similar
to these other icons. When I click on this icon, again we have our app up and running in its own
window. At the moment, our web app is hosted and running on my local development machine.
Let me stop the web server, for that, in the taskbar look for IIS Express and stop the site.
At this point, if we reload this page, our website doesn't work, why? because the web server
is down. Now, let's see what's going to happen if we launch our app by clicking on our app icon
in the start menu? Well, it says loading, but nothing happens beyond that. With progressive
apps we have offline access, but why is the offline access not working at the moment?
Well, this is because, offline support is only enabled for published apps. If you're wondering,
why is the offline feature not enabled during development? Well, you do not want the offline
feature to interfere and make your app development difficult and confusing. This is the reason
offline access is deliberately disabled while the app is still in development. Now, let me uninstall
this local development version of the app. We can say, this is the local development version
by looking at the URL here and to uninstall select this option "Uninstall". You get a prompt,
you also want to clear data, so check this checkbox and then click on "Remove"
There we go, our app is uninstalled and the shortcut icon is also removed. Take a look
at the URL, I have the same progressive web app already deployed in azure. Now, let's install this
published version of the app. Again, for that click on this icon here. We get a prompt. So,
let's click on "Install". Our app is installed and now it's running in its own window. When I
click on these three dots, we can say this is our published app by looking at the URL. Now,
let's quickly test this app to make sure everything works as expected. Counter works,
Fetch data also works. Now, let me close the app, turn off the internet connection
and then relaunch our app and see what's going to happen. Notice, our app still works as expected.
Let me turn the internet on. Now, we want to install a browser extension called "Lighthouse"
and the easiest way to do that is to search the internet with this search string "lighthouse
for google chrome". Click on the first link and then "Add to chrome"
So, what is this Google Lighthouse? Well, as you already know it's a free browser extension.
It provides powerful insights to help improve your website. You can also use it
to improve your progressive web apps. Now, let's check the quality of our progressive
website that is deployed in azure. For that, first navigate to your website and then click
on this icon right here which says extensions. We want to give access to "Lighthouse" so click on it
and then "Generate Report". It's running some tests now. It's going to take a few seconds.
Our report is ready. We can use this lighthouse extension not just to check the aspects of
progressive web app. You can also use it to check the other aspects like Performance, Accessibility,
Best Practices and Search Engine Optimization. Let's click on this Progressive Web App icon.
Except these two - Does not set a theme color for the address bar, manifest doesn't have a maskable
icon, all the other aspects of a progressive web app are green. These two issues are easy to fix.
At the moment we are on Dell.com website. This is not a progressive website. How can I say that?
Well, in the address bar we don't have that "Install" icon and if we take a look at the
Lighthouse report, notice when I hover the mouse over this progressive web app icon,
Installable - 0 out of 1, meaning this app is not installable and look at the PWA Optimized score,
it is 3 out of 8, meaning most aspects of PWA are red. Another example, twitter.com is a progressive
web app. How can we say? Well, again by looking at the URL. Notice, we have "Install" icon,
when we click that we get a prompt and when I click "Install", the app is installed. We now have
Twitter in its own window without the address bar and if we take a look at the Lighthouse report,
notice we have a check mark against PWA and Installable - 1 out of 1. PWA Optimized 8 out
of 8. Building a brand new progressive web app or even converting your existing web app to a
progressive web app is much much easier than you think. We'll discuss how to create a progressive
web app from scratch in our upcoming videos. That's it in this video. Thank you for listening.