hi, when you will be out of ideas, please build a circular slider similar to the one in the iPhone application "clock" tab "bedtime" i was looking on the internet for circular slider, but couldn't find one that was vanilla js , so i tried to build my own, but it seems pretty complex either with div or svg.
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 !
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
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'.
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!
Hello Gary. About caching endpoints what about dinamical endpoints. For example i have a list of products /products and I can request /products?s=some-text-to-filter this last one is related to a search form how can I configure wb in order to perform a search offline?
Nothing works anymore. I tried following the tutorial. import statements don't work in custom service-worker files and the docs don't mention apart from 'use a webpack'. How do I use a webpack? I searched everywhere on the Internet I can't get workbox working.
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.
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?
I'm confused. It seems the workbox is there to help the app cache things and work offline. But it's the manifest stuff that actually let's you make the app icon shortcut. If I didn't really care if my app was dead without internet, could I leave workbox/service worker out and just have the manifest?
Someone correct me if I'm wrong, but it would probably be beneficial to cache an "app shell" anyway so the app could at least open in its basic environment, and display a message telling the user the isn't a connection
I resolved this using DavidScales' answer found here: stackoverflow.com/questions/56364464/http-server-with-localhost3000-gives-err-invalid-redirect/57536943#57536943 "Point the browser to localhost:8080/index.html instead of just localhost:8080" In my case, I pointed the browser to "localhost:1336/index.html" and it popped right up. Whew!
Hi Gary, Thank you so much for sharing, I've downloaded some page templates from internet but actually i don't know how to install them in wordpress. (Zip files) May you guide me please?
I see what do you mean, but in my experience the access from vscode is quicker, and you can toggle it by ctrl + `, what is really nice. by the way i really love your tutorials. thenks
Hi Simon, I had to pass "self.__WB_MANIFEST" as follows for injection to work, just my comment workbox.precaching.precacheAndRoute([self.__WB_MANIFEST]);
Thanks. This was very clear. And thanks to latest chrome update I have a working app on my computer. Pointless users app from some dummy JSON on the interwebs, BUT A WORKING APP nevertheless :D
Hi Simon, Wassup , I really love the way you teach , it's amazing as I am new to PWA , I want to know how I can make a static and dynamic website into PWA. Because as you told in the video , it's all about getting data from API, If you any course or special classes about this , I love to purchase that course as well.
It could have been better. You're not explaining all the files you create. You look way too much on your cheatsheet, like you were basically rewriting all the tutorial.
SMASH THAT SUBSCRIBE BUTTON! - Here's what I think is one of my first designs ever.. late 90's: 😂😂😂 imgur.com/a/XoQmvFN
I see this becoming popular again in a year or two lol 😂
hi,
when you will be out of ideas, please build a circular slider similar to the one in the iPhone application "clock" tab "bedtime"
i was looking on the internet for circular slider, but couldn't find one that was vanilla js , so i tried to build my own, but it seems pretty complex either with div or svg.
Awesome 😂👌
Make a tutorial for that design 😂😂
WOW
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 !
I'm wearing contacts. ;)
I did the same. It's very challenging.
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
Partying while making a Google Workbox Tutorial! My Man!!!
I know right
Is there a way around engagement heuristics on android phones?
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'.
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!
background sync example ????
after traversy media you r the one whos video i liked vary much
True
Hello Gary. About caching endpoints what about dinamical endpoints. For example i have a list of products /products and I can request /products?s=some-text-to-filter this last one is related to a search form how can I configure wb in order to perform a search offline?
Nothing works anymore. I tried following the tutorial. import statements don't work in custom service-worker files and the docs don't mention apart from 'use a webpack'. How do I use a webpack? I searched everywhere on the Internet I can't get workbox working.
How to add fetch-eventlistener to google workbox. In order to get beforeinstallprompt for pwa A2HS
If anyone else has problems with workbox 5.* I found that
workbox.precaching.precacheAndRoute(self.__WB_MANIFEST)
works at 22:43
Thanks man
@@varadgauthankar you're welcome
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.
I would like to see how to implement workbox with push notifications, i like very much how you teach, thanks for sharing.
you are awesome brother. thanks i cant wait for your new premium course on pwa on coursetro
What about background-sync? Can you show us ajax request and fetching example? :))
Man your good at what you do. I'm a big fan..
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!
Can we secure the cache data in any way? Like Encryption of cache data? How risky is to save static content and api response data into cache memory?
You should create a beginner course about workbox making a real PWA app! It'd be awesome!
Wow: perfect! Very clear, very concise. Wow!
Hi Simon, Is it possible to remove website or Localhost link from the Desktop shortcut App icon that I have created using PWA. Please do reply.
Hi. Are those refresh needed for just development? Or do users need to refresh their page?
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?
Can I add webapp icon on Android home screen?
app-manifest.firebaseapp.com/
I'm confused. It seems the workbox is there to help the app cache things and work offline. But it's the manifest stuff that actually let's you make the app icon shortcut.
If I didn't really care if my app was dead without internet, could I leave workbox/service worker out and just have the manifest?
I think the answer is yes, but if you want it to act as an app then you should add service workers for a more app like experience.
Someone correct me if I'm wrong, but it would probably be beneficial to cache an "app shell" anyway so the app could at least open in its basic environment, and display a message telling the user the isn't a connection
Hi! i didn't get that notification for adding it to shelf or home... I wonder why, did I miss something?
Did you figure it out? I still don't have that add to homesreen link.
@@GameManiac96 but I'm getting a plus sign on my address bar from where I can add it to homepage
Chrome changes a lot and rapidly. Now when a site is PWA enabled, you get a + sign inside a circle.
It is very good from google , how can i add my app in google play store
(2021-01-06) browser 'Service Worker' features are still experimental unfortunately!
Can't open localhost:1336 - it says corrupted content error. Opening index.html looks good though.
I resolved this using DavidScales' answer found here: stackoverflow.com/questions/56364464/http-server-with-localhost3000-gives-err-invalid-redirect/57536943#57536943
"Point the browser to localhost:8080/index.html instead of just localhost:8080" In my case, I pointed the browser to "localhost:1336/index.html" and it popped right up. Whew!
service worker not getting added after adding the script at end of html document
Hi Gary, Thank you so much for sharing, I've downloaded some page templates from internet but actually i don't know how to install them in wordpress. (Zip files) May you guide me please?
It gives me an error: Cannot access 'li' before initialization. Anyway awesome tutorial, thank you!
vanilapwa.coursetro.com doesn't come up.
Thank you, very helpful.
Why are you not use the terminal from the vscode editor?
Mine is larger / easier to see and has a better aesthetic.
I see what do you mean, but in my experience the access from vscode is quicker, and you can toggle it by ctrl + `, what is really nice.
by the way i really love your tutorials. thenks
Hi Simon, I had to pass "self.__WB_MANIFEST" as follows for injection to work, just my comment workbox.precaching.precacheAndRoute([self.__WB_MANIFEST]);
yes same issue for me too
Thanks. This was very clear. And thanks to latest chrome update I have a working app on my computer. Pointless users app from some dummy JSON on the interwebs, BUT A WORKING APP nevertheless :D
Another wonderful tutorial .Thanks for this
Hi Simon, Wassup , I really love the way you teach , it's amazing as I am new to PWA , I want to know how I can make a static and dynamic website into PWA. Because as you told in the video , it's all about getting data from API, If you any course or special classes about this , I love to purchase that course as well.
Boi this was lit! No manual service worker generation now!
It was really helpful! Thank you.
课程真棒，人也帅气。
im unable to access through local host
although my server is running
Could you please do a PWA with firebase? :)
I'll look into it!
Awesome !!
Very good thx sharing.
great job
thanks bro
My first design was for the dailyui challenge. Link: twitter.com/blankRSD/status/1007265707002740736
It could have been better.
You're not explaining all the files you create.
You look way too much on your cheatsheet, like you were basically rewriting all the tutorial.
Great tutorial. But please don't say "crap" anymore
What good stuff? You're teaching people how to code malicious spam! Do you feel no shame?