Build a Simple PWA based on Basic JavaScript using Google's Workbox

Today's Show & Tell: Link us to your very first design in the comments!
-- Sticking with the topic of PWA's, I decided to simplify things and stay away from frameworks/libraries like Angular, React and Vue. Instead, we will create a straight-forward vanilla-js (basic javascript) app and make it a PWA with the help of Google's Workbox CLI. This should help simplify the process of understanding and working with Progressive Web Apps.

Github repo for this project:

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS weekly!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[mubarekabdi]

51, 100 hours on Computer and you're not wearing glasses. It took me days to create PWA with vanilla js and without workbox This is so time saving, thank you !

[oleersoy]

Partying while making a Google Workbox Tutorial! My Man!!!

[codechaosmobile]

Excellent video. Going to go through it again much slower tomorrow. Got to love it when when you were missing something and suddenly it presents itself and now things make sense.

And doing it the pure vanilla way is icing on the cake

[UncleNabs]

If anyone else has problems with workbox 5.* I found that

works at 22:43

[databaseprovider]

after traversy media you r the one whos video i liked vary much

[etng]

i did all the above manually without Workbox... It takes days to understand PWA codes and research, including manually sizing Manifest icons.. You just did in 30min!

[andresmontoya]

You should create a beginner course about workbox making a real PWA app! It'd be awesome!

[wrushu]

Getting below error. workbox 4.3.1.
Error: That is not a valid source service worker file. Please try again with a file containing 'self.__WB_MANIFEST'.

[jamesbond]

Man your good at what you do. I'm a big fan..

[tabaicanking]

you are awesome brother. thanks i cant wait for your new premium course on pwa on coursetro

[joelrodriguez]

I would like to see how to implement workbox with push notifications, i like very much how you teach, thanks for sharing.

[VladimirBrasil]

Wow: perfect! Very clear, very concise. Wow!

[solid]

Is there a way around engagement heuristics on android phones?

[sarkoreto]

What about background-sync? Can you show us ajax request and fetching example? :))

[lukaszglowacz]

Great tutorial. One remark: it seems that in some cases Workbox 5.x causes problems. For me reverting to 4.3.1 did the trick. Thanks!

[edustreamimg]

Hello Gary. About caching endpoints what about dinamical endpoints. For example i have a list of products <domain>/products and I can request this last one is related to a search form how can I configure wb in order to perform a search offline?

[alberts]

Doesent work, because of new version of workbox (date:22th May 20)? All the files generate by WB look totaly diffent from video. After WB content is not cached, tried to download repo and after WB setup same result, site not cashing.

[aungkoung]

Hi. Are those refresh needed for just development? Or do users need to refresh their page?

[ManlyStump]

OK I've followed along with this perfectly and everything is working except when I hit "Add to homescreen" on the App Manifest tab nothing happens! :( Any idea why that might be?

[fariduzzamaansari]

Boi this was lit! No manual service worker generation now!