Get a 100 PWA score on Lighthouse with Angular. In this episode, I will teach you how to configure your app to be 100% compliant with the progressive web app checklist provided by Google, making your app installable on compatible devices. 

Full Lesson Code: https://angularfirebase.com/lessons/installable-angular-progressive-web-app/
Demo App: https://firestarter-96e46.firebaseapp.com/
Lighthouse: https://developers.google.com/web/tools/lighthouse/
SW-Precache: https://www.npmjs.com/package/sw-precache-webpack-plugin
2024-02-04T08:08:52.946Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
981a574a-1c0a-4433-9f1c-2be5629c2d8d
4d207b514e7c25f0db7df5f6b08df57008146da173326e4601a93045d09ae711
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
A progressive web app or PWA will make a traditional web application behave more like a native mobile app.
In this episode, we're going to take an Angular 4 application and make it 100% compliant with Google's PWA spec.
To do this, we're going to create an app manifest with a bunch of mobile icons.
We're gonna cache our app offline with a service worker, and we're going to serve it over a secure HTTPS connection.
When that's all said and done, we'll be able to run our app through the Lighthouse Chrome plugin, which is maintained by Google, which will tell us whether or not we're meeting all the PWA requirements as well as give us some feedback on performance and best practices.
Not only will this provide a better user experience, but it will also bring up this add to home screen banner on Android devices or any other program that supports progressive web apps.
Currently, it's not supported in iOS Safari or Microsoft Edge, but they are moving in that direction, so they probably will be or did in the future.
Another cool feature we're not going to talk about in this video is push notifications, but I do have another video covering that topic, so make sure to check that out as well.
The first step is to install the Lighthouse plugin for Chrome.
You can get it in the Chrome store, and it's what we're going to use to generate the actual audit on the site.
The next step is to create the manifest dot JSON file in the source directory of your project.
The purpose of this file is to tell browsers exactly how to handle your web app.
For example, your app should have a name and some theme colors, and you'll also wanna tell it whether or not to display in portrait or landscape.
Then we need to generate some icons.
There's plenty of places on the Internet where you can have this all done automatically with just a single base logo.
You need to have a variety of icons to handle different mobile devices and operating systems.
After you generate the icons, drop them into your assets folder in Angular and then add them to the manifest.
Each icon will need to have its own source, size, and type specified.
That's it for the manifest.
There's plenty of other things we could add here, but this is the bare minimum that we need for now.
The next thing we need to do is link our manifest in the index dot HTML as well as provide some other meta tags.
We have a variety of meta tags here that are basically all telling different browsers that our site is mobile app capable.
Then the only other thing we need to do is link to the manifest that we just created.
We also need to register it in the Angular CLI, so we can do that by adding it to the assets array to ensure it's in our production build.
That's it for the first part of the process.
Now we need to start building a service worker that will cache the page for offline capabilities.
This diagram shows the basic process.
The service worker will cache the assets on the user's device, and if the Internet is out, then it will serve up whatever's in the cache to give the user some interactivity when there's no connection.
You can actually test this out now on our live Firestarter demo app.
First visit the app with an active connection, and then turn off the Internet connection and refresh the page.
The website on the left has no offline cache, so it just gets the standard error, while Firestarter on the right has an offline cache with the service worker, so it gets a full web page displayed anyway.
To implement this feature, we can actually pick up right where we left off in the index dot HTML.
We'll go down to the closing body tag, and we're going to write a script that will register the service worker.
It's extremely simple.
It just checks if the navigator has a service worker, and if so, it calls service worker dot register followed by the service worker name.
Currently, the service worker dot JS file doesn't exist, but we're going to use a package called sw precache to build it automatically in the next step.
SW precache is a popular open source library developed by Google that we're going to use to write the service worker code for us automatically.
First, we install the webpack version of the library to our development environment using npm, then create a new file called precacheconfig.js in the root of your project.
Inside the file, we first import sw precache, and then we'll set our configuration variables.
I'd like to point out that the navigate fallback whitelist It's necessary if you're using Firebase OAuth, so don't forget to include it if you are.
Sw precache is going to create the service worker right after our production build is created in the dist folder.
In this example, we're going to cache all JavaScript and CSS assets, but you can customize this any way you want based on your own app configuration.
To use this script, we're going to create a custom command in the package dot JSON file.
We create a command called pwa for progressive web app.
It first runs NG build production and then it runs sw precache in the disk folder where that production build lives and uses the configuration that we just supplied.
Then from the command line, we can just run npm run PWA.
As you can see, it does our normal production build with ahead of time compilation, and then after that's done, it generates the service worker.
Now let's actually go into the disk folder and take a look at the service worker.
We have an array of a bunch of cached assets that will be served when the app is offline.
Then we have a bunch of event listeners in this file that will handle the management of the cache for the user as well as trigger that install banner on compatible devices.
The only thing left to do is deploy the app.
It's required that your app be served over an HTTPS connection with an SSL certificate.
If you're deploying with Firebase, this is configured automatically.
But any other hosting over HTTPS should work.
If you are using Firebase, just run Firebase deploy only hosting, and then we can validate everything with the Lighthouse plug in.
You use the plug in by just clicking it and running generate report.
It's It's really that easy.
At this point our app is scoring 100 on the PWA score which means it's installable on compatible devices, but every app's different so you may have other issues you have to address beyond this.
If you get stuck anywhere make sure to join our Slack team and we'll be more than happy to help you out.
If this video helps you, please like and subscribe.
And if you wanna support the channel, consider becoming a pro member at angularfirebase.com.
You'll get a free copy of my book as well as 1 on 1 project consulting.
Thanks for watching and I'll see you next time.

Speaker 0: A progressive web app or PWA will make a traditional web application behave more like a native mobile app. In this episode, we're going to take an Angular 4 application and make it 100% compliant with Google's PWA spec. To do this, we're going to create an app manifest with a bunch of mobile icons. We're gonna cache our app offline with a service worker, and we're going to serve it over a secure HTTPS connection. When that's all said and done, we'll be able to run our app through the Lighthouse Chrome plugin, which is maintained by Google, which will tell us whether or not we're meeting all the PWA requirements as well as give us some feedback on performance and best practices.

Not only will this provide a better user experience, but it will also bring up this add to home screen banner on Android devices or any other program that supports progressive web apps. Currently, it's not supported in iOS Safari or Microsoft Edge, but they are moving in that direction, so they probably will be or did in the future. Another cool feature we're not going to talk about in this video is push notifications, but I do have another video covering that topic, so make sure to check that out as well. The first step is to install the Lighthouse plugin for Chrome. You can get it in the Chrome store, and it's what we're going to use to generate the actual audit on the site.

The next step is to create the manifest dot JSON file in the source directory of your project. The purpose of this file is to tell browsers exactly how to handle your web app. For example, your app should have a name and some theme colors, and you'll also wanna tell it whether or not to display in portrait or landscape. Then we need to generate some icons. There's plenty of places on the Internet where you can have this all done automatically with just a single base logo.

You need to have a variety of icons to handle different mobile devices and operating systems. After you generate the icons, drop them into your assets folder in Angular and then add them to the manifest. Each icon will need to have its own source, size, and type specified. That's it for the manifest. There's plenty of other things we could add here, but this is the bare minimum that we need for now.

The next thing we need to do is link our manifest in the index dot HTML as well as provide some other meta tags. We have a variety of meta tags here that are basically all telling different browsers that our site is mobile app capable. Then the only other thing we need to do is link to the manifest that we just created. We also need to register it in the Angular CLI, so we can do that by adding it to the assets array to ensure it's in our production build. That's it for the first part of the process.

Now we need to start building a service worker that will cache the page for offline capabilities. This diagram shows the basic process. The service worker will cache the assets on the user's device, and if the Internet is out, then it will serve up whatever's in the cache to give the user some interactivity when there's no connection. You can actually test this out now on our live Firestarter demo app. First visit the app with an active connection, and then turn off the Internet connection and refresh the page.

The website on the left has no offline cache, so it just gets the standard error, while Firestarter on the right has an offline cache with the service worker, so it gets a full web page displayed anyway. To implement this feature, we can actually pick up right where we left off in the index dot HTML. We'll go down to the closing body tag, and we're going to write a script that will register the service worker. It's extremely simple. It just checks if the navigator has a service worker, and if so, it calls service worker dot register followed by the service worker name.

Currently, the service worker dot JS file doesn't exist, but we're going to use a package called sw precache to build it automatically in the next step. SW precache is a popular open source library developed by Google that we're going to use to write the service worker code for us automatically. First, we install the webpack version of the library to our development environment using npm, then create a new file called precacheconfig.js in the root of your project. Inside the file, we first import sw precache, and then we'll set our configuration variables. I'd like to point out that the navigate fallback whitelist It's necessary if you're using Firebase OAuth, so don't forget to include it if you are.

Sw precache is going to create the service worker right after our production build is created in the dist folder. In this example, we're going to cache all JavaScript and CSS assets, but you can customize this any way you want based on your own app configuration. To use this script, we're going to create a custom command in the package dot JSON file. We create a command called pwa for progressive web app. It first runs NG build production and then it runs sw precache in the disk folder where that production build lives and uses the configuration that we just supplied.

Then from the command line, we can just run npm run PWA. As you can see, it does our normal production build with ahead of time compilation, and then after that's done, it generates the service worker. Now let's actually go into the disk folder and take a look at the service worker. We have an array of a bunch of cached assets that will be served when the app is offline. Then we have a bunch of event listeners in this file that will handle the management of the cache for the user as well as trigger that install banner on compatible devices.

The only thing left to do is deploy the app. It's required that your app be served over an HTTPS connection with an SSL certificate. If you're deploying with Firebase, this is configured automatically. But any other hosting over HTTPS should work. If you are using Firebase, just run Firebase deploy only hosting, and then we can validate everything with the Lighthouse plug in.

You use the plug in by just clicking it and running generate report. It's It's really that easy. At this point our app is scoring 100 on the PWA score which means it's installable on compatible devices, but every app's different so you may have other issues you have to address beyond this. If you get stuck anywhere make sure to join our Slack team and we'll be more than happy to help you out. If this video helps you, please like and subscribe.

And if you wanna support the channel, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project consulting. Thanks for watching and I'll see you next time.
A progressive web app or PWA will make a traditional web application behave more like a native mobile app. In this episode, we're going to take an Angular 4 application and make it 100% compliant with Google's PWA spec.
To do this, we're going to create an app manifest with a bunch of mobile icons. We're gonna cache our app offline with a service worker, and we're going to serve it over a secure HTTPS connection. When that's all said and done, we'll be able to run our app through the Lighthouse Chrome plugin, which is maintained by Google, which will tell us whether or not we're meeting all the PWA requirements as well as give us some feedback on performance and best practices.
infrastructure
Not only will this provide a better user experience, but it will also bring up this add to home screen banner on Android devices or any other program that supports progressive web apps.
Currently, it's not supported in iOS Safari or Microsoft Edge, but they are moving in that direction, so they probably will be or did in the future. Another cool feature we're not going to talk about in this video is push notifications, but I do have another video covering that topic, so make sure to check that out as well.
youtube
The first step is to install the Lighthouse plugin for Chrome. You can get it in the Chrome store, and it's what we're going to use to generate the actual audit on the site. The next step is to create the manifest dot JSON file in the source directory of your project. The purpose of this file is to tell browsers exactly how to handle your web app. For example, your app should have a name and some theme colors, and you'll also wanna tell it whether or not to display in portrait or landscape. Then we need to generate some icons. There's plenty of places on the Internet where you can have this all done automatically with just a single base logo. You need to have a variety of icons to handle different mobile devices and operating systems. After you generate the icons, drop them into your assets folder in Angular and then add them to the manifest. Each icon will need to have its own source, size, and type specified. That's it for the manifest. There's plenty of other things we could add here, but this is the bare minimum that we need for now. The next thing we need to do is link our manifest in the index dot HTML as well as provide some other meta tags. We have a variety of meta tags here that are basically all telling different browsers that our site is mobile app capable. Then the only other thing we need to do is link to the manifest that we just created. We also need to register it in the Angular CLI, so we can do that by adding it to the assets array to ensure it's in our production build. That's it for the first part of the process. Now we need to start building a service worker that will cache the page for offline capabilities.
This diagram shows the basic process. The service worker will cache the assets on the user's device, and if the Internet is out, then it will serve up whatever's in the cache to give the user some interactivity when there's no connection. You can actually test this out now on our live Firestarter demo app.
internet
First visit the app with an active connection, and then turn off the Internet connection and refresh the page. The website on the left has no offline cache, so it just gets the standard error, while Firestarter on the right has an offline cache with the service worker, so it gets a full web page displayed anyway. To implement this feature, we can actually pick up right where we left off in the index dot HTML. We'll go down to the closing body tag, and we're going to write a script that will register the service worker. It's extremely simple. It just checks if the navigator has a service worker, and if so, it calls service worker dot register followed by the service worker name. Currently, the service worker dot JS file doesn't exist, but we're going to use a package called sw precache to build it automatically in the next step. SW precache is a popular open source library developed by Google that we're going to use to write the service worker code for us automatically.
First, we install the webpack version of the library to our development environment using npm, then create a new file called precacheconfig.js in the root of your project. Inside the file, we first import sw precache, and then we'll set our configuration variables. I'd like to point out that the navigate fallback whitelist It's necessary if you're using Firebase OAuth, so don't forget to include it if you are.
software development
Sw precache is going to create the service worker right after our production build is created in the dist folder. In this example, we're going to cache all JavaScript and CSS assets, but you can customize this any way you want based on your own app configuration. To use this script, we're going to create a custom command in the package dot JSON file. We create a command called pwa for progressive web app.
It first runs NG build production and then it runs sw precache in the disk folder where that production build lives and uses the configuration that we just supplied. Then from the command line, we can just run npm run PWA. As you can see, it does our normal production build with ahead of time compilation, and then after that's done, it generates the service worker.
production
Now let's actually go into the disk folder and take a look at the service worker. We have an array of a bunch of cached assets that will be served when the app is offline. Then we have a bunch of event listeners in this file that will handle the management of the cache for the user as well as trigger that install banner on compatible devices. The only thing left to do is deploy the app. It's required that your app be served over an HTTPS connection with an SSL certificate. If you're deploying with Firebase, this is configured automatically. But any other hosting over HTTPS should work. If you are using Firebase, just run Firebase deploy only hosting, and then we can validate everything with the Lighthouse plug in.
You use the plug in by just clicking it and running generate report. It's It's really that easy. At this point our app is scoring 100 on the PWA score which means it's installable on compatible devices, but every app's different so you may have other issues you have to address beyond this. If you get stuck anywhere make sure to join our Slack team and we'll be more than happy to help you out. If this video helps you, please like and subscribe. And if you wanna support the channel, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project consulting.
youtube
software development
software
Thanks for watching and I'll see you next time.
A progressive web app or PWA will make a traditional web application behave more like a native mobile app. In this episode, we're going to take an Angular 4 application and make it 100% compliant with Google's PWA spec. To do this, we're going to create an app manifest with a bunch of mobile icons. We're gonna cache our app offline with a service worker, and we're going to serve it over a secure HTTPS connection. When that's all said and done, we'll be able to run our app through the Lighthouse Chrome plugin, which is maintained by Google, which will tell us whether or not we're meeting all the PWA requirements as well as give us some feedback on performance and best practices. Not only will this provide a better user experience, but it will also bring up this add to home screen banner on Android devices or any other program that supports progressive web apps. Currently, it's not supported in iOS Safari or Microsoft Edge, but they are moving in that direction, so they probably will be or did in the future. Another cool feature we're not going to talk about in this video is push notifications, but I do have another video covering that topic, so make sure to check that out as well. The first step is to install the Lighthouse plugin for Chrome. You can get it in the Chrome store, and it's what we're going to use to generate the actual audit on the site. The next step is to create the manifest dot JSON file in the source directory of your project. The purpose of this file is to tell browsers exactly how to handle your web app. For example, your app should have a name and some theme colors, and you'll also wanna tell it whether or not to display in portrait or landscape. Then we need to generate some icons. There's plenty of places on the Internet where you can have this all done automatically with just a single base logo. You need to have a variety of icons to handle different mobile devices and operating systems. After you generate the icons, drop them into your assets folder in Angular and then add them to the manifest. Each icon will need to have its own source, size, and type specified. That's it for the manifest. There's plenty of other things we could add here, but this is the bare minimum that we need for now. The next thing we need to do is link our manifest in the index dot HTML as well as provide some other meta tags. We have a variety of meta tags here that are basically all telling different browsers that our site is mobile app capable. Then the only other thing we need to do is link to the manifest that we just created. We also need to register it in the Angular CLI, so we can do that by adding it to the assets array to ensure it's in our production build. That's it for the first part of the process. Now we need to start building a service worker that will cache the page for offline capabilities. This diagram shows the basic process. The service worker will cache the assets on the user's device, and if the Internet is out, then it will serve up whatever's in the cache to give the user some interactivity when there's no connection. You can actually test this out now on our live Firestarter demo app. First visit the app with an active connection, and then turn off the Internet connection and refresh the page. The website on the left has no offline cache, so it just gets the standard error, while Firestarter on the right has an offline cache with the service worker, so it gets a full web page displayed anyway. To implement this feature, we can actually pick up right where we left off in the index dot HTML. We'll go down to the closing body tag, and we're going to write a script that will register the service worker. It's extremely simple. It just checks if the navigator has a service worker, and if so, it calls service worker dot register followed by the service worker name. Currently, the service worker dot JS file doesn't exist, but we're going to use a package called sw precache to build it automatically in the next step. SW precache is a popular open source library developed by Google that we're going to use to write the service worker code for us automatically. First, we install the webpack version of the library to our development environment using npm, then create a new file called precacheconfig.js in the root of your project. Inside the file, we first import sw precache, and then we'll set our configuration variables. I'd like to point out that the navigate fallback whitelist It's necessary if you're using Firebase OAuth, so don't forget to include it if you are. Sw precache is going to create the service worker right after our production build is created in the dist folder. In this example, we're going to cache all JavaScript and CSS assets, but you can customize this any way you want based on your own app configuration. To use this script, we're going to create a custom command in the package dot JSON file. We create a command called pwa for progressive web app. It first runs NG build production and then it runs sw precache in the disk folder where that production build lives and uses the configuration that we just supplied. Then from the command line, we can just run npm run PWA. As you can see, it does our normal production build with ahead of time compilation, and then after that's done, it generates the service worker. Now let's actually go into the disk folder and take a look at the service worker. We have an array of a bunch of cached assets that will be served when the app is offline. Then we have a bunch of event listeners in this file that will handle the management of the cache for the user as well as trigger that install banner on compatible devices. The only thing left to do is deploy the app. It's required that your app be served over an HTTPS connection with an SSL certificate. If you're deploying with Firebase, this is configured automatically. But any other hosting over HTTPS should work. If you are using Firebase, just run Firebase deploy only hosting, and then we can validate everything with the Lighthouse plug in. You use the plug in by just clicking it and running generate report. It's It's really that easy. At this point our app is scoring 100 on the PWA score which means it's installable on compatible devices, but every app's different so you may have other issues you have to address beyond this. If you get stuck anywhere make sure to join our Slack team and we'll be more than happy to help you out. If this video helps you, please like and subscribe. And if you wanna support the channel, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project consulting. Thanks for watching and I'll see you next time.
A
a
progressive
progressive
web
web
app
app
or
or
PWA
pwa
will
will
make
make
a
a
traditional
traditional
web
web
application
application
behave
behave
more
more
like
like
a
a
native
native
mobile
mobile
app.
app
In
in
this
this
episode,
episode
we're
we're
going
going
to
to
take
take
an
an
Angular
angular
4
4
application
application
and
and
make
make
it
it
100%
100%
compliant
compliant
with
with
Google's
google's
PWA
pwa
spec.
spec
To
to
do
do
this,
this
we're
we're
going
going
to
to
create
create
an
an
app
app
manifest
manifest
with
with
a
a
bunch
bunch
of
of
mobile
mobile
icons.
icons
We're
we're
gonna
gonna
cache
cache
our
our
app
app
offline
offline
with
with
a
a
service
service
worker,
worker
and
and
we're
we're
going
going
to
to
serve
serve
it
it
over
over
a
a
secure
secure
HTTPS
https
connection.
connection
When
when
that's
that's
all
all
said
said
and
and
done,
done
we'll
we'll
be
be
able
able
to
to
run
run
our
our
app
app
through
through
the
the
Lighthouse
lighthouse
Chrome
chrome
plugin,
plugin
which
which
is
is
maintained
maintained
by
by
Google,
google
which
which
will
will
tell
tell
us
us
whether
whether
or
or
not
not
we're
we're
meeting
meeting
all
all
the
the
PWA
pwa
requirements
requirements
as
as
well
well
as
as
give
give
us
us
some
some
feedback
feedback
on
on
performance
performance
and
and
best
best
practices.
practices
Not
not
only
only
will
will
this
this
provide
provide
a
a
better
better
user
user
experience,
experience
but
but
it
it
will
will
also
also
bring
bring
up
up
this
this
add
add
to
to
home
home
screen
screen
banner
banner
on
on
Android
android
devices
devices
or
or
any
any
other
other
program
program
that
that
supports
supports
progressive
progressive
web
web
apps.
apps
Currently,
currently
it's
it's
not
not
supported
supported
in
in
iOS
ios
Safari
safari
or
or
Microsoft
microsoft
Edge,
edge
but
but
they
they
are
are
moving
moving
in
in
that
that
direction,
direction
so
so
they
they
probably
probably
will
will
be
be
or
or
did
did
in
in
the
the
future.
future
Another
another
cool
cool
feature
feature
we're
we're
not
not
going
going
to
to
talk
talk
about
about
in
in
this
this
video
video
is
is
push
push
notifications,
notifications
but
but
I
i
do
do
have
have
another
another
video
video
covering
covering
that
that
topic,
topic
so
so
make
make
sure
sure
to
to
check
check
that
that
out
out
as
as
well.
well
The
the
first
first
step
step
is
is
to
to
install
install
the
the
Lighthouse
lighthouse
plugin
plugin
for
for
Chrome.
chrome
You
you
can
can
get
get
it
it
in
in
the
the
Chrome
chrome
store,
store
and
and
it's
it's
what
what
we're
we're
going
going
to
to
use
use
to
to
generate
generate
the
the
actual
actual
audit
audit
on
on
the
the
site.
site
The
the
next
next
step
step
is
is
to
to
create
create
the
the
manifest
manifest
dot
dot
JSON
json
file
file
in
in
the
the
source
source
directory
directory
of
of
your
your
project.
project
The
the
purpose
purpose
of
of
this
this
file
file
is
is
to
to
tell
tell
browsers
browsers
exactly
exactly
how
how
to
to
handle
handle
your
your
web
web
app.
app
For
for
example,
example
your
your
app
app
should
should
have
have
a
a
name
name
and
and
some
some
theme
theme
colors,
colors
and
and
you'll
you'll
also
also
wanna
wanna
tell
tell
it
it
whether
whether
or
or
not
not
to
to
display
display
in
in
portrait
portrait
or
or
landscape.
landscape
Then
then
we
we
need
need
to
to
generate
generate
some
some
icons.
icons
There's
there's
plenty
plenty
of
of
places
places
on
on
the
the
Internet
internet
where
where
you
you
can
can
have
have
this
this
all
all
done
done
automatically
automatically
with
with
just
just
a
a
single
single
base
base
logo.
logo
You
you
need
need
to
to
have
have
a
a
variety
variety
of
of
icons
icons
to
to
handle
handle
different
different
mobile
mobile
devices
devices
and
and
operating
operating
systems.
systems
After
after
you
you
generate
generate
the
the
icons,
icons
drop
drop
them
them
into
into
your
your
assets
assets
folder
folder
in
in
Angular
angular
and
and
then
then
add
add
them
them
to
to
the
the
manifest.
manifest
Each
each
icon
icon
will
will
need
need
to
to
have
have
its
its
own
own
source,
source
size,
size
and
and
type
type
specified.
specified
That's
that's
it
it
for
for
the
the
manifest.
manifest
There's
there's
plenty
plenty
of
of
other
other
things
things
we
we
could
could
add
add
here,
here
but
but
this
this
is
is
the
the
bare
bare
minimum
minimum
that
that
we
we
need
need
for
for
now.
now
The
the
next
next
thing
thing
we
we
need
need
to
to
do
do
is
is
link
link
our
our
manifest
manifest
in
in
the
the
index
index
dot
dot
HTML
html
as
as
well
well
as
as
provide
provide
some
some
other
other
meta
meta
tags.
tags
We
we
have
have
a
a
variety
variety
of
of
meta
meta
tags
tags
here
here
that
that
are
are
basically
basically
all
all
telling
telling
different
different
browsers
browsers
that
that
our
our
site
site
is
is
mobile
mobile
app
app
capable.
capable
Then
then
the
the
only
only
other
other
thing
thing
we
we
need
need
to
to
do
do
is
is
link
link
to
to
the
the
manifest
manifest
that
that
we
we
just
just
created.
created
We
we
also
also
need
need
to
to
register
register
it
it
in
in
the
the
Angular
angular
CLI,
cli
so
so
we
we
can
can
do
do
that
that
by
by
adding
adding
it
it
to
to
the
the
assets
assets
array
array
to
to
ensure
ensure
it's
it's
in
in
our
our
production
production
build.
build
That's
that's
it
it
for
for
the
the
first
first
part
part
of
of
the
the
process.
process
Now
now
we
we
need
need
to
to
start
start
building
building
a
a
service
service
worker
worker
that
that
will
will
cache
cache
the
the
page
page
for
for
offline
offline
capabilities.
capabilities
This
this
diagram
diagram
shows
shows
the
the
basic
basic
process.
process
The
the
service
service
worker
worker
will
will
cache
cache
the
the
assets
assets
on
on
the
the
user's
user's
device,
device
and
and
if
if
the
the
Internet
internet
is
is
out,
out
then
then
it
it
will
will
serve
serve
up
up
whatever's
whatever's
in
in
the
the
cache
cache
to
to
give
give
the
the
user
user
some
some
interactivity
interactivity
when
when
there's
there's
no
no
connection.
connection
You
you
can
can
actually
actually
test
test
this
this
out
out
now
now
on
on
our
our
live
live
Firestarter
firestarter
demo
demo
app.
app
First
first
visit
visit
the
the
app
app
with
with
an
an
active
active
connection,
connection
and
and
then
then
turn
turn
off
off
the
the
Internet
internet
connection
connection
and
and
refresh
refresh
the
the
page.
page
The
the
website
website
on
on
the
the
left
left
has
has
no
no
offline
offline
cache,
cache
so
so
it
it
just
just
gets
gets
the
the
standard
standard
error,
error
while
while
Firestarter
firestarter
on
on
the
the
right
right
has
has
an
an
offline
offline
cache
cache
with
with
the
the
service
service
worker,
worker
so
so
it
it
gets
gets
a
a
full
full
web
web
page
page
displayed
displayed
anyway.
anyway
To
to
implement
implement
this
this
feature,
feature
we
we
can
can
actually
actually
pick
pick
up
up
right
right
where
where
we
we
left
left
off
off
in
in
the
the
index
index
dot
dot
HTML.
html
We'll
we'll
go
go
down
down
to
to
the
the
closing
closing
body
body
tag,
tag
and
and
we're
we're
going
going
to
to
write
write
a
a
script
script
that
that
will
will
register
register
the
the
service
service
worker.
worker
It's
it's
extremely
extremely
simple.
simple
It
it
just
just
checks
checks
if
if
the
the
navigator
navigator
has
has
a
a
service
service
worker,
worker
and
and
if
if
so,
so
it
it
calls
calls
service
service
worker
worker
dot
dot
register
register
followed
followed
by
by
the
the
service
service
worker
worker
name.
name
Currently,
currently
the
the
service
service
worker
worker
dot
dot
JS
js
file
file
doesn't
doesn't
exist,
exist
but
but
we're
we're
going
going
to
to
use
use
a
a
package
package
called
called
sw
sw
precache
precache
to
to
build
build
it
it
automatically
automatically
in
in
the
the
next
next
step.
step
SW
sw
precache
precache
is
is
a
a
popular
popular
open
open
source
source
library
library
developed
developed
by
by
Google
google
that
that
we're
we're
going
going
to
to
use
use
to
to
write
write
the
the
service
service
worker
worker
code
code
for
for
us
us
automatically.
automatically
First,
first
we
we
install
install
the
the
webpack
webpack
version
version
of
of
the
the
library
library
to
to
our
our
development
development
environment
environment
using
using
npm,
npm
then
then
create
create
a
a
new
new
file
file
called
called
precacheconfig.js
precacheconfig.js
in
in
the
the
root
root
of
of
your
your
project.
project
Inside
inside
the
the
file,
file
we
we
first
first
import
import
sw
sw
precache,
precache
and
and
then
then
we'll
we'll
set
set
our
our
configuration
configuration
variables.
variables
I'd
i'd
like
like
to
to
point
point
out
out
that
that
the
the
navigate
navigate
fallback
fallback
whitelist
whitelist
It's
it's
necessary
necessary
if
if
you're
you're
using
using
Firebase
firebase
OAuth,
oauth
so
so
don't
don't
forget
forget
to
to
include
include
it
it
if
if
you
you
are.
are
Sw
sw
precache
precache
is
is
going
going
to
to
create
create
the
the
service
service
worker
worker
right
right
after
after
our
our
production
production
build
build
is
is
created
created
in
in
the
the
dist
dist
folder.
folder
In
in
this
this
example,
example
we're
we're
going
going
to
to
cache
cache
all
all
JavaScript
javascript
and
and
CSS
css
assets,
assets
but
but
you
you
can
can
customize
customize
this
this
any
any
way
way
you
you
want
want
based
based
on
on
your
your
own
own
app
app
configuration.
configuration
To
to
use
use
this
this
script,
script
we're
we're
going
going
to
to
create
create
a
a
custom
custom
command
command
in
in
the
the
package
package
dot
dot
JSON
json
file.
file
We
we
create
create
a
a
command
command
called
called
pwa
pwa
for
for
progressive
progressive
web
web
app.
app
It
it
first
first
runs
runs
NG
ng
build
build
production
production
and
and
then
then
it
it
runs
runs
sw
sw
precache
precache
in
in
the
the
disk
disk
folder
folder
where
where
that
that
production
production
build
build
lives
lives
and
and
uses
uses
the
the
configuration
configuration
that
that
we
we
just
just
supplied.
supplied
Then
then
from
from
the
the
command
command
line,
line
we
we
can
can
just
just
run
run
npm
npm
run
run
PWA.
pwa
As
as
you
you
can
can
see,
see
it
it
does
does
our
our
normal
normal
production
production
build
build
with
with
ahead
ahead
of
of
time
time
compilation,
compilation
and
and
then
then
after
after
that's
that's
done,
done
it
it
generates
generates
the
the
service
service
worker.
worker
Now
now
let's
let's
actually
actually
go
go
into
into
the
the
disk
disk
folder
folder
and
and
take
take
a
a
look
look
at
at
the
the
service
service
worker.
worker
We
we
have
have
an
an
array
array
of
of
a
a
bunch
bunch
of
of
cached
cached
assets
assets
that
that
will
will
be
be
served
served
when
when
the
the
app
app
is
is
offline.
offline
Then
then
we
we
have
have
a
a
bunch
bunch
of
of
event
event
listeners
listeners
in
in
this
this
file
file
that
that
will
will
handle
handle
the
the
management
management
of
of
the
the
cache
cache
for
for
the
the
user
user
as
as
well
well
as
as
trigger
trigger
that
that
install
install
banner
banner
on
on
compatible
compatible
devices.
devices
The
the
only
only
thing
thing
left
left
to
to
do
do
is
is
deploy
deploy
the
the
app.
app
It's
it's
required
required
that
that
your
your
app
app
be
be
served
served
over
over
an
an
HTTPS
https
connection
connection
with
with
an
an
SSL
ssl
certificate.
certificate
If
if
you're
you're
deploying
deploying
with
with
Firebase,
firebase
this
this
is
is
configured
configured
automatically.
automatically
But
but
any
any
other
other
hosting
hosting
over
over
HTTPS
https
should
should
work.
work
If
if
you
you
are
are
using
using
Firebase,
firebase
just
just
run
run
Firebase
firebase
deploy
deploy
only
only
hosting,
hosting
and
and
then
then
we
we
can
can
validate
validate
everything
everything
with
with
the
the
Lighthouse
lighthouse
plug
plug
in.
in
You
you
use
use
the
the
plug
plug
in
in
by
by
just
just
clicking
clicking
it
it
and
and
running
running
generate
generate
report.
report
It's
it's
It's
it's
really
really
that
that
easy.
easy
At
at
this
this
point
point
our
our
app
app
is
is
scoring
scoring
100
100
on
on
the
the
PWA
pwa
score
score
which
which
means
means
it's
it's
installable
installable
on
on
compatible
compatible
devices,
devices
but
but
every
every
app's
app's
different
different
so
so
you
you
may
may
have
have
other
other
issues
issues
you
you
have
have
to
to
address
address
beyond
beyond
this.
this
If
if
you
you
get
get
stuck
stuck
anywhere
anywhere
make
make
sure
sure
to
to
join
join
our
our
Slack
slack
team
team
and
and
we'll
we'll
be
be
more
more
than
than
happy
happy
to
to
help
help
you
you
out.
out
If
if
this
this
video
video
helps
helps
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
support
support
the
the
channel,
channel
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
a
a
free
free
copy
copy
of
of
my
my
book
book
as
as
well
well
as
as
1
1
on
on
1
1
project
project
consulting.
consulting
Thanks
thanks
for
for
watching
watching
and
and
I'll
i'll
see
see
you
you
next
next
time.
time
success
The speaker explains how to create a progressive web app that is 100% compliant with Google's PWA spec, including installing the Lighthouse plugin and creating a manifest. They also discuss the process of generating icons and setting up a service worker, including setting up a network connection and registering it in Angular. The speaker provides a demo of a service worker and explains how to use it in the future.
Progressive Web Apps with Angular
A progressive web app or PWA will make a traditional web application behave more like a native mobile app. In this episode, we're going to take an Angular 4 application and make it 100% compliant with Google's PWA spec. To do this, we're going to create an app manifest with a bunch of mobile icons. We're gonna cache our app offline with a service worker, and we're going to serve it over a secure HTTPS connection. When that's all said and done, we'll be able to run our app through the Lighthouse Chrome plugin, which is maintained by Google, which will tell us whether or not we're meeting all the PWA requirements as well as give us some feedback on performance and best practices. Not only will this provide a better user experience, but it will also bring up this add to home screen banner on Android devices or any other program that supports progressive web apps. Currently, it's not supported in iOS Safari or Microsoft Edge, but they are moving in that direction, so they probably will be or did in the future. Another cool feature we're not going to talk about in this video is push notifications, but I do have another video covering that topic, so make sure to check that out as well. The first step is to install the Lighthouse plugin for Chrome. You can get it in the Chrome store, and it's what we're going to use to generate the actual audit on the site. The next step is to create the manifest dot JSON file in the source directory of your project. The purpose of this file is to tell browsers exactly how to handle your web app. For example, your app should have a name and some theme colors, and you'll also wanna tell it whether or not to display in portrait or landscape. Then we need to generate some icons. There's plenty of places on the Internet where you can have this all done automatically with just a single base logo. You need to have a variety of icons to handle different mobile devices and operating systems. After you generate the icons, drop them into your assets folder in Angular and then add them to the manifest. Each icon will need to have its own source, size, and type specified. That's it for the manifest. There's plenty of other things we could add here, but this is the bare minimum that we need for now. The next thing we need to do is link our manifest in the index dot HTML as well as provide some other meta tags. We have a variety of meta tags here that are basically all telling different browsers that our site is mobile app capable. Then the only other thing we need to do is link to the manifest that we just created. We also need to register it in the Angular CLI, so we can do that by adding it to the assets array to ensure it's in our production build. That's it for the first part of the process. Now we need to start building a service worker that will cache the page for offline capabilities. This diagram shows the basic process. The service worker will cache the assets on the user's device, and if the Internet is out, then it will serve up whatever's in the cache to give the user some interactivity when there's no connection. You can actually test this out now on our live Firestarter demo app. First visit the app with an active connection, and then turn off the Internet connection and refresh the page. The website on the left has no offline cache, so it just gets the standard error, while Firestarter on the right has an offline cache with the service worker, so it gets a full web page displayed anyway. To implement this feature, we can actually pick up right where we left off in the index dot HTML. We'll go down to the closing body tag, and we're going to write a script that will register the service worker. It's extremely simple. It just checks if the navigator has a service worker, and if so, it calls service worker dot register followed by the service worker name. Currently, the service worker dot JS file doesn't exist, but we're going to use a package called sw precache to build it automatically in the next step. SW precache is a popular open source library developed by Google that we're going to use to write the service worker code for us automatically. First, we install the webpack version of the library to our development environment using npm, then create a new file called precacheconfig.js in the root of your project. Inside the file, we first import sw precache, and then we'll set our configuration variables. I'd like to point out that the navigate fallback whitelist It's necessary if you're using Firebase OAuth, so don't forget to include it if you are. Sw precache is going to create the service worker right after our production build is created in the dist folder. In this example, we're going to cache all JavaScript and CSS assets, but you can customize this any way you want based on your own app configuration. To use this script, we're going to create a custom command in the package dot JSON file. We create a command called pwa for progressive web app. It first runs NG build production and then it runs sw precache in the disk folder where that production build lives and uses the configuration that we just supplied. Then from the command line, we can just run npm run PWA. As you can see, it does our normal production build with ahead of time compilation, and then after that's done, it generates the service worker. Now let's actually go into the disk folder and take a look at the service worker. We have an array of a bunch of cached assets that will be served when the app is offline. Then we have a bunch of event listeners in this file that will handle the management of the cache for the user as well as trigger that install banner on compatible devices. The only thing left to do is deploy the app. It's required that your app be served over an HTTPS connection with an SSL certificate. If you're deploying with Firebase, this is configured automatically. But any other hosting over HTTPS should work. If you are using Firebase, just run Firebase deploy only hosting, and then we can validate everything with the Lighthouse plug in. You use the plug in by just clicking it and running generate report. It's It's really that easy. At this point our app is scoring 100 on the PWA score which means it's installable on compatible devices, but every app's different so you may have other issues you have to address beyond this. If you get stuck anywhere make sure to join our Slack team and we'll be more than happy to help you out. If this video helps you, please like and subscribe. And if you wanna support the channel, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project consulting. Thanks for watching and I'll see you next time.
The speaker explains how to create a progressive web app that is 100% compliant with Google's PWA spec, including installing the Lighthouse plugin and creating a manifest. They also discuss the process of generating icons and setting up a service worker, including setting up a network connection and registering it in Angular. The speaker provides a demo of a service worker and explains how to use it in the future.