►
Description
Learn the best way to implement Workbox Cache Strategies and bundling up the JavaScript for Progressiveness.
Learn or get tipped on when and how to add these Cache Strategies and the type of resources to think of for each strategy. It's important to note that being too Cachy is costly when building progressive web apps.
And finally as an add-on, I'll show you how to best add more progressive web app features and implementing each with its own JavaScript so that you reduce the number and/or size of JavaScript scripts loaded on the first page load.
This talk was recorded at the Jozi.JS meetup group on 31 January 2019.
https://www.meetup.com/Jozi-JS/events/257737169/
Disclaimer: The opinions in this talk are those of the individual and do not necessarily represent those of this channel, the meetup group, or it’s sponsors.
A
Also
host
me
translate
your
onion
right.
We
just
having
that
you
have
a
nine
yeah
answer,
I'm
happy
to
be
here
today,
remotely
from
Kenya
and
I'm,
going
to
speak
about
workbox
progressive
about
to
receive.
So
today
we're
just
going
to
look
at
one
amazing
feature
for
progressive
a
box,
and
that
is
the
offline
feature.
I
think
this
is
the
most
important
thing
and
I've
seen
a
lot
of
death
focusing
so
much
on
these
and,
at
the
end
of
the
day,
end
up.
A
A
I
have
this
little
open
source
project,
so
basically
the
dev
site
that
focuses
on
the
skill
little
tidbits
on
villain,
progressive
web
apps
in
how
to
do
it
and
lots
of
open
source
code
is
available
for
you
to
add
these
exciting
features
to
your
progressive
web
app.
So
you
can
check
it
out
later.
Yeah
really
go
out
so
I
also
like
to
teach
people
how
to
write
chord
most
of
the
time
and
also
yeah.
This
is
one
of
my
best
life
principle.
A
Truth
I,
look
forward
to
coding
till
I
die
was
awesome,
so
I
always
to
get
here.
Okay
cool,
so
it
looks
like
I
was
saying,
potentially
run
some
performance
test
on
some
progressive
web
apps
I
come
across
with
and
one
of
the
performance
tests.
I
look
towards
is
the
cashier,
the
cashier
process
or
the
offline,
but
because
you
look
at
these
kind
of
web
app
works
so
well,
but
then
everything
is
offline.
So
you
end
up
using
the
user's
resources,
whether
knowingly
or
unknowingly
and
I.
A
A
That's
why
I
as
a
Dave,
I,
just
focus
on
doing
progressive
about
using
mark
box
and
Bach
box
is
basically
a
JavaScript
library
for
progressive
about
some
mobile
stuff.
So
it
has
everything
Park
together
for
you
to
build
production,
ready
to
crazy
web
apps,
yeah
and
scalar
you,
our
entire
video
native
of
my
journey,
so
today
to
insist,
just
going
to
look
at
the
offline
part
of
progressive
web
apps
and
how
to
cash
a
best,
and
that
means
you're
going
to
look
at
three
things.
A
So
we
have
when
you're
taking
about
offline
fast,
while
building
with
work
box,
we
are
looking
at
retouching,
then
we
have
work
box
in
caching
and
then
you
have
what
box
strategies
so
for
protection
basically
means
you
cash,
a
content
ahead
of
the
serviceworker
being
used.
So
that
means
when
a
user
visits
your
site
or
your
pw
for
the
first
time
they
already
can
gets
out
and
gets
out
with
the
resources
that
already
cashed
during
the
development
or
deployment
or
during
the
development
process
and
stuff.
A
So
after
that,
we
also
have
what
you
call
what
box
Akashi
so
that
entirely
works
with
what
looks
like
bury
itself.
So
that
means
on
fast
load
check
what
is
to
be
cut
down,
load
it
and
remove
duplicates
I'll,
be
showing
these
using
the
chrome,
dev
tools,
and
we
get
to
understand
so
what?
What?
What
box
of
caching
means
that,
when
I
use
the
visit
suicide
of
the
first
one?
So
remember,
we
already
pre
cached
the
resources
that
we
need
for
our
first
load.
A
So
what
box
will
definitely
look
or
learn
the
resources
from
the
eternal
and
make
them
a
cache
and
then,
if,
for
example,
I
use?
This
is
the
second
time
and
we
had
a
little
update
on
the
resources
that
you
see,
SNS
and
stuff.
Then
the
what
box
percussion
helps.
You
know
to
check
to
update
the
existing
one.
A
That
is
all
and
then
yeah
solve
it
later
and
I'll
be
saying
that,
so
you
need
to
learn
so
much
all
that,
and
then
we
have
the
magic
that
I'm
going
to
talk
about
so
much
it's
what
or
strategies.
So
what
box
that
ages
helps
you
to
entirely
decide
what
you
are
going
to
cache,
how
they're
going
to
cache
how
long
those
resources
are
going
to
be
cached
and
in
what
priority
are
you
going
to
catch
these
particular
resources?
So
you
don't
mean
to
say
it.
I
think
I
can't
definitely
go
to
this
right
here.
A
A
A
So
we
will
use
just
Twitter
as
a
sample
app
to
show
you
how
you
could
implement
these
offline
strategies
when
you
think
about
offline
first
web
stuff.
So
we
have
four
strategies
that
you
can
use
to
actually
cache
your
resources
to
in
your
web
app
and
the
first
one
is
still
while
revalidate.
So
here,
I'm
just
show
you
here
so
doubles
are
picking
about
Rita.
A
For
that
so
Stella
we
will
revalidate
is
fairly
common
strategy,
we're
having
the
most
up
to
date.
Up
to
date,
resource
is
not
vital
for
your
web.
So
that
means
that
when
you're
looking
at
the
profile
picture
of
a
user
on
Twitter,
so
you
are
not
really
interested
in
the
latest
profile
picture.
So
you
could
use
this
strategy
to
actually.
A
Not
when
you
treat
a
lot
of
photos-
and
you
have
yes
sure
my
Twitter,
for
example,
so,
okay-
good,
so
you
you
have
all
these
media,
you
will
don't
need
to.
You
really
don't
need
to
actually
have
the
latest.
So
this
is
some
of
the
meetings,
maybe
you've
posted
or
tutor
some
time
back.
Most
of
the
time
when
you
go
to
tutor,
you
want
to
check
the
latest
so
maybe
for
Twitter.
As
an
example,
you
could
use
cash
a
fast
strategy
to
actually
solve
this
content,
which
is
media.
A
The
times
are
already
posted
and
stuff
and
yeah,
and
so
this
is
how
you
could
actually
use
the
cash
a
first
strategy
and
then
another
one.
We
have
the
network
fast,
so
the
network
fast
basically
means
that
the
network
fast
and
falling
back
to
network
without
sorry.
So
so
it's
best
for
equals
that
are
updated
frequently
by
default.
It
will
try
to
fetch
the
latest
request
from
the
network.
If
the
request
is
successful,
it's
pulled
and
it
pulls
the
responds
in
the
cachet.
A
So
using
2000
example,
we'll
look
at
latest
tweets
alright,
so
we
had
to
it
that
you
are
treated
while
you
are
offline
and
God
cast.
Maybe
then
Twitter
Apple
the
PW
we'll
try
to
get
that
from
the
cached
or
I'm.
Sorry,
just
confuse
that.
So
if
you
are
checking
for
the
latest
tweet,
what
the
web
app
the
picker
blue
will
do
is
check
the
network
fast
for
the
latest
tweets
alright.
A
So
if
you,
if
this
nothing
or
there's
no
leakage
tweet
on
your
timeline,
then
it
means
all
the
way
about
to
go
back
to
the
cashier
and
check
if
we
had
any
cached
little
streets
for
you
to
look
at
and
then
another
important
and
last
of
the
meetings
network,
only
so
network
only
is
I
think
is
so
straights.
Therefore
that
means
that
the
only
self
contained
from
the
network,
so
you
define
which
resources
within
your
service
worker
should
be
only
sound
from
the
network
and
an
example
in
the
settings.
A
For
example,
you
want
a
user
to
change
their
the
username,
so
that
means
we
have
some
authentication
process
to
take
place
and
stuff.
So
that
means
then
you
have
to
be
very
mapping
or
flying
step
again.
This
kind
of
an
app
means
that
you
need
to
provide
these
resources
and
stichting
into
the
rhetoric,
only
strategy
when
thinking
about
the
PWI
working
offline
in
gusty
to
that
and
stuff
yeah,
so
not
basically
the
foster
business
that
we
have
with
workbook.
A
So
so
these
lock
box
offline
strategies
and
nabel's
you
to
basically
define
or
have
the
power
to
dictate
to
your
Peter
Blair
what
to
cash
and
then
what
to
cast
to
cash
fast,
how
to
cash
it
and
how
to
sound
from
the
internet
or
from
the
cachet.
So
I
think
with
that.
I'll
just
need
to
show
you
a
simple
application
of
how
that
works.
A
So
you,
if
you
built
a
progressive
ever
before,
always
know
that
you
have
to
register
t5
is
like
so,
if
you,
if
you've,
never
built
a
pyramid
before
don't
worry,
I
would
like
you
to
just
focus
on
to
focus
on
how
I'm
going
to
explain
how
to
eat
the
mantle
on
how
each
strategy
that
is,
the
walk
strategy
as
a
strategy
works
Austin,
so
I'm
gonna.
If
this,
so
this
app
has,
is
a
starter
upon
being
progressive
web
apps
with
blackboard
itself.
So
I
am
going
to
check
this.
A
I
hope
you
can
actually
see
that
all
right.
This
is
my
stop.
This
water
and
actually
the
service
worker
is
where
you
got
all
these
magical
features.
All
these
native
power
features
to
your
web.
So
in
here
you
can
see
some
some
exciting
areas
here
all
right,
but
then
let
me
just
keep
that
for
now
and
just
explain
the
caching
strategy
fast
then
I'll
come
and
explain
easily,
because
Prakash
a-all,
right,
ok,
cool.
A
So
with
what
box
you'll
have
an
empty
Service
Worker
to
J's
file,
so
in
if
you
import
the
library
itself,
so
you
could
actually
just
do
this
copy
this,
because
with
workbooks
and
just
get
input
URL
to
your
serviceworker.
So
when
we
pour
this,
then
you
have
all
those
library
and
all
the
support
features.
That's
what
post,
having
been
ready
to
be
used
to
do
out
now.
I
was
talking
about
the
kashif
strategies,
so
now
I'll
actually
give
out
the
URL
to
this
collab.
So
it
just
follow
it
later.
A
So
you
need
to
worry
so
much
now
here.
This
is
Network
fast
strategy
and
network
fast
Italy
is
so
straightforward.
It
means
get
the
resources
fast
from
the
network
before
check
it
back
into
the
discussion
and
when
you
look
at
my
comments
here
so
so
you
cached
images,
for
example,
in
an
others
folder.
A
So
if
they're
using
any
talk
fast
caching
strategy,
they
should
come
fast
as
visible.
So
actually
I
forgot
to
point
out
that
so
absolutely
implementing
these
strategies
to
various
uses
in
your
web
app.
We
have
to
make
sure
that
all
the
network
strategies
implementation
come
fast
before
any
other
kind
of
subtly
so
that
it
can
work
yeah.
A
So
that's
some
of
the
important
thing
or
two,
not
not
when
you
look
at
code
here,
I
have
an
others
folder
here
so
and
this
from
the
comments
so
cachet
images
so
I
have
an
others
folder
in
the
images
folder.
So
these
images
that
are
in
others,
for
example,
if
it
is
an
event,
I,
have
a
speaker's
images.
All
right,
so
I
could
have
an
image
for
Lolich
in
here.
A
Okay,
it's
gotten
a
little
kid
when
I,
okay,
I'll
show
you
later,
okay
cool,
so
in
the
images
folder
I
have
another
folder
called
others,
and
it
contains
images,
and
these
images
are
on
a
second
page
that
I
will
show
you
here,
so
I
don't
want
them
to
get
offline
before
I
use
that
visit
or
actually
this
is
the
next
page,
so
so
with
that.
I
also
want
to
always
get
the
latest
image
possible.
I
was
just
using
images,
an
example.
A
This
will
be
any
Java
JavaScript
file,
video
or
any
other
kind
of
shows
that
you
want
a
user
to
Mac
offline
or
any
other
crazy
stuff.
So
when
you
come
here,
what
this
just
means
is
this
harsh
cache
anything
that
is
an
image
so
in
that
folder,
so
that
is
SVG,
PNG,
gif
jpg,
all
those
kinds
of
images,
and
then,
when
the
user
visit
that
second
page,
that
I
want
to
get
some
images
from
the
internet
fast
cut
and
a
catchy
name
called
images,
cached
and
stuff
away.
We
have
this
plug-in
of
these
plugins.
A
All
right,
so
I
was
talking
about
precursor.
So
Prakash
is
the
recessive
that
I
wanted
to
get
a
flight
on
fast
load
of
the
page.
But
I'll
explain
this
one
after
explaining
the
box
strategy,
so
I'm
just
going
to
I'm
just
going
to
go
to
the
next
page,
which
is
the
latest
page
now
from
here.
You
can
see
some
amazing
cache
storage
lives
here
to
have
the
latest
cache
image
here.
So
it
means
it
means
we
have
the
image
cache.
A
lot
of
my
body
have
different
image.
A
So
when
you
come
to
the
application,
I
have
an
images
cash.
So
this
image
cache
carries
images
that
are
served
from
the
network
fast,
alright,
and
one
of
that
is
made
is
the
latest
SVG,
which
is
the
one
Lauren
right
here,
so
this
image
will
always
be
blocked
for
from
the
internet
before
going
back
to
the
cache.
So,
for
example,
if
I
updated
this
image,
something
else
what
the
web
app
will
do
just
check
to
check.
If
you
have
the
latest
version
of
it
in
the
network
fast
from
the
network.
A
A
This
is
so
that
this
is
how
you
actually
implements
the
metric
falsetto,
gee
I.
Don't
think
what
you
have
another
strategy
is
we
have
a
latest
this
folder
here
we
have
a
lettuce
folder
directly
or
subdirectory,
so
you
can
cash
resources
from
a
specific
directory
and
here
I'm
using
this
kind
of
strategy
so
stare
while
revalidate
right.
A
So
this
means
I'll,
actually
check
I'll,
actually
will
actually
check
the
cache
as
it
checks
the
internet.
So
we
have.
The
latest
from
the
internet
then
bring
it,
and
if
there
is
nothing,
they
just
fall
back
to
the
cache.
So
that
is
basically
what
it
means
and
then,
when
because
I
see
I
visited
this
kind
of
I
visited
the
subdirectory.
You
can
see
that
we
have
a
latest
cache,
meaning
that
this
weapon
will
be
served
will
be
served
from
the
latest
cash.
So.
A
A
So,
in
this
view,
still
while
revalidate,
so
that
means,
for
example,
for
the
latest
directory,
but
the
user
visits
what
the
web
app
will
do
will
check
both
the
internet
and
the
de
castro.
So
what's
up.
First
is
what
gets
to
habits
way
and
I
suppose
that
it
be
looks.
I've
actually
admitted
the
the
same
thing
on
external
CSS
and
javascript
and
that,
for
example,
in
this
folder
here
I've
used
this.
A
So
what
this
means
is
that
cache
any
external
resource
that
is
not
already
cast
that
is
not
caught
up
in
my
custom
service
worker
or
anything
that
have
not
caught
up
in
the
Prakash
start,
the
Prakash
subscribers
have
written
or
to
treat
remained
offline
learning
start.
So
we
have
an
asset
cache,
so
I'll
just
got
sure
I'm
going
to
show
you
with
that
and
explain
something.
So
when
you
look
at
this
assets
cash,
it
contains
a
cache
resource
from
fire
store.
A
Cloud
Fastow's:
we
have
amusing
for
awesome,
so
it's
not
actually
on
my
local
project,
and
so
this
one
is
what
I'm
getting
from
the
CDN.
So
what
it
does,
it
will
cache
the
resource
and
keep
it.
So
if
you
have
anything
that
is
latest
the
date
for
exactly
how
to
zero
or
five
point,
two
one
release
of
web
fonts
from
Google
from
for
awesome.
What
did
we
do
in
these?
As
in
this
serviceworker?
Let
me
just
go
back.
A
Every
time,
every
time
I
load
a
page
that
loads,
a
font
awesome,
the
font
awesome
CDN,
import
I
will
always
look
at
the
Ethernet
and
I'll
always
look
at
the
cache.
So
if
there
is
no,
let's
just
release
the
end,
sogni
back,
the
cache
just
actually
fall
back
to
the
cache
and
so
this
quantity.
So
that
is
it
with
the
caching
resources.
A
A
You
still
find
that
the
page
is
still
working
offline,
all
right
on
the
lettuce
directly.
What
we
implemented
the
strategy
implemented
was
still
very
validated.
So
what
happened
here
after
leaves
the
app
tried
to
look
for
the
resource
from
the
network
and
then
the
resource
from
the
cache.
But
there
was
no
internet
connection.
So
what
happened?
It's
it
fell
back
to
the
cachet.
A
A
I'll,
try
to
go
back
here
and
I
really
hope.
I
can
explain
the
Prakash,
so
don't
you
actually
gonna
try
out
a
collab
letter
to
share
it
so
that
Prakash?
What
means
that
you
are
trying
to
cash
success
fast
before
event
on
the
visitor
actually
before
even
the
peg
is
actually
not
all
the
way,
but
it's
actually
knowledge
for
wizard
by
the
user,
so
you
can
actually
be
fine.
What
you
wanted!
You
want
to
get
offline
fast
in
this
shown
in
this
code
example.
A
Here
what
I
mean
here
is
everything
that
is
JavaScript
in
the
J's
folder
cache
or
the
CSS,
the
CSS
folder
in
cache,
all
the
SS
is
in
CSS
or
you
could
actually
online
stuff.
So
what
that'll
result
in
is
going
through
this.
So
that's
what
actually
we
are
seen
here
right.
So
what
I
said
should
be
cached
even
before
the
web?
App
is
actually
loaded
is
my
index
file.
A
A
When
we
prevented
Prakash,
these
are
the
resources
that
are
made
of
line
fast
on
the
first
state
visit
of
the
web.
So
if
you
actually
go
through
the
collab
itself
and
you'll
actually
be
able
to
get
to
the
somehow
that
this
only
is
actually
it
met
and
how
fund
it
so
with
that
I
think
I'm
done.
So
maybe
if
this
any
question
you
may
want.