[Music]
progressive web apps build websites that
deliver an experience indistinguishable
from native mobile apps when smartphones
first hit the scene back in 2008 they
brought with them all kinds of new
features that weren't available on the
web like offline mode push notifications
cameras geolocation and more internet
explorer powered the web back then and
web developers had no way to access most
in-device features in the 2020s though
the game has changed the web platform
has reached near feature parity with
native apps notice how the twitter pwa
can be installed just like a native app
it works without a connection it can
interact with the device camera and
receive push notifications and on top of
that the web offers much better
distribution than app stores and doesn't
take a 30 cut of your revenue not to
mention your app will work on ios
android and the web from a single code
base if you own a website turning it
into a progressive web app is easier
than you might think first open up the
lighthouse tool in chrome dev tools to
run an audit on your site it'll tell you
how well your site performs and what
needs to change to qualify as a pwa at a
bare minimum the site needs to load
quickly and be accessible on mobile most
sites already check this box the more
difficult requirement is making the app
work offline normally a website runs on
a single thread while the tab is open
however modern websites can now register
a service worker which is just a script
that runs in the background it can
perform caching background sync and
listen to push notifications among other
things the implementation is actually
very simple we just check if the browser
supports this feature then register a
javascript file as the worker once
registered you'll find it activated in
the application tab in chrome devtools
from there you can write your own code
in the worker file or use a library like
workbox to do everything for you most
importantly you'll want to cache the
urls in your app so they can be viewed
offline you can inspect the cache and
other background services here in the
application tab the final step is to
create a manifest.json file which
contains icons and other metadata about
the app once the requirements have been
met you'll unlock the pwa achievement
and lighthouse at which point your app
can be installed on most native devices
and can even be listed on google play or
the microsoft store this has been
progressive web apps in 100 seconds if
you want to learn more hang out for a
minute while we go beyond 100 seconds to
learn a bunch of cool things that you'll
definitely want to know about pwas first
of all make sure to like and subscribe
because it really helps out the short
videos what i want to do now is just
rattle off a bunch of cool things you
should know about when it comes to pwas
first you'll definitely want to get
familiar with the chrome lighthouse tool
it analyzes performance accessibility
seo and determines whether or not your
app is installable as a pwa you can run
this tool on any site you want and
should be available under the lighthouse
tab in chrome devtools even if you're
not building a pwa it can be useful to
run an audit on your site and while
we're here you'll also want to know
about the application tab which allows
you to analyze and debug information
related to your app every pwa has a
manifest file which defines metadata
about the app and you can view that here
such as the app name and icons but more
importantly it tells you whether or not
a service worker is up and running you
can also manually trigger events here to
test things like push notifications and
background sync your service worker will
likely cache pages and you can view the
cache from this tab as well now when you
hear me talk about service workers and
caching that may sound like a lot of
code that you have to write but that's
actually not the case most of these jobs
fall into very common use cases and can
be implemented with minimal code if you
use a library like workbox as the name
implies it's a collection of different
libraries to help you build pwas quickly
and reliably and it even has a cli tool
to automatically generate the files and
assets that you need if you're using a
front-end framework like react or
angular you can install it as an npm
package or you can import it directly
into your service worker over a cdn
using the import scripts function but an
awesome new feature in workbox is
recipes it allows you to implement
features very quickly often with just a
single line of code want to add offline
fallback to your app it's just a single
function call and the same goes for an
image cache google fonts cache and many
others workbox is awesome but there are
other libraries out there as well if you
use a framework like angular it has a
service worker module built into it and
when you use the create react app tool
it automatically generates a service
worker for you and speaking of
frameworks if you want to see how pwas
are implemented in a variety of
different frameworks check out the
hacker news pwa site it's a showcase of
different framework implementations and
how well they perform compared to each
other if you're learning to code a great
project is implementing your own version
of a hacker news pwa or if you want to
start with something easier let's go
ahead and build a pwa right now we only
need four files an index.html for our
main webpage a logo
a manifest.json to describe our app and
then a serviceworker.js file the html
needs to reference the manifest and load
the service worker we can reference the
manifest with a link tag just like we
would with a css file then we can add a
script above the closing body tag and if
the service worker is supported in this
browser or in its navigator then we'll
go ahead and register our service worker
file now if we open up the manifest.json
file we can add some information about
our app which is mostly self-explanatory
but notice this icons array it's looking
for icons or images of different sizes
that can be used as the home screen icon
for our app we could create all of them
manually but that would take forever a
better option is to use the pwa asset
generator we'll go ahead and run npx pwa
asset generator then point it to the
logo file in our project and tell it to
output the results in the icons
directory that creates a bunch of images
for us in no time and if you look at the
terminal output it'll even give you the
json that you need to paste into your
manifest.json file now we just need to
write a little bit of code in our
serviceworker.js file to enable caching
we'll import workbox from a cdn by
adding a link to the file inside of this
import scripts function that'll give us
access to workbox then we can use the
routing module to register a route that
matches all the image files in our
project then once we've matched all the
files we need to decide on a caching
strategy in this case we'll use cache
first which means the pwa will attempt
to read from the cache instead of going
over the network if there's something
available in the cache
that's great for files that don't change
often like images but if you have
something that does change often you
might want to use a network for a
strategy which will use the network if
the app is connected to the internet or
if it's offline it will fall back to the
cache
now let's go ahead and serve the app by
running npx serve and then open the
browser to localhost 5000 once there hit
ctrl shift j to open up the chrome dev
tools let's start by going to the
application tab and making sure that we
have all the icons appearing in our
manifest that looks good now let's check
out the service worker and make sure
that it's up and running that looks good
as well now we can go to the lighthouse
tab and run an audit on the app as you
can see we get a score of 100 on pretty
much every metric and we get the pwa
achievement badge meaning this app is
installable on most mobile devices if
you already have a website that's
optimized for mobile it's incredibly
easy to turn it into a pwa from that
point you might consider adding an
install button to your site in different
locations to prompt the user to install
the app and there's a number of
different ux strategies to do that
successfully now that you know how to
build a pwa from scratch i want to leave
you with a few other resources that you
might use to go further first of all i'm
working on a new video called 7 things
you didn't know the web could do it'll
cover advanced implementations of
lesser-known browser apis like bluetooth
device motion idle detection and a bunch
of others i expect to have that out
early next week so stay tuned another
awesome resource is web.dev this
contains basically everything you would
ever want to know about pwas as well as
new and upcoming browser apis if you
want to make your app available on other
platforms beyond the web you might want
to do some research on trusted web
activities or twas which allow you to
market your app on the google play store
alongside android apps and you can also
market pwas in the microsoft store so
check out the official documentation for
that i'm gonna go ahead and wrap things
up there if this video helped you please
like and subscribe thanks for watching
and i will see you in the next one