BUILD A SINGLE PAGE APPLICATION WITH JAVASCRIPT 🔽 th-cam.com/video/6BozpmSjk-Y/w-d-xo.html 🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇 www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1
THANK YOU SO MUCH BRO! 🥹🥹🥹 I was struggling alot in PWA, but after watching your tutorial I could finally build it. Also, you explained everything very nicely, Thanks again!! 💙💙
I’m new coding. For every programming language I use to I have to instal some type of plugin or something into vscode. Like for JavaScript or .Json. And python
Very clear explanation. Went to clone the code to learn more, but the GitHub repo is bare. Just the shell of the project, but no code. Any possibility of uploading still? Tnx.
As a rule of thumb, I don't like and subscribe to spam like this. Try teaching us how to build a native app and stop promoting this malicious PWA nonsense.
Great tutorial and I love that you are not piling a bunch of frameworks on to do a simple example. However, I think it would be great if you had done a better intro on how you are hosting the page. Nothing wrong with doing some research, but I think some might abandon the tutorial when they find out they have to figure out how to install Apache, set it up, and begin using it, in order to even start the tutorial at the point where you were. Regardless, if someone does already have this background knowledge, useful tutorial!
@@dcode-software Frankly, my Indonesia hardcore programmer / partner develop a standard kit for me to learn and generate PWA within a minute. He has published to GitHub to share, It automatically convert to PWA. U all are awesome. We are fighting for our start up under my personal investment and looking for more start-up partner
Hi!! First of all, great video, it was a very nice introduction to PWAs. I have a doubt: Initially I was having problems with the manifest in the web browser cause I was deploying the index.html directly dragging it from file explorer, but then I discovered the Live Server extension for VSCode and I used it but the domain is the localhost address (127.0.0.1) and in your case you have a different name for the local address, how did you achieve that? Thank you very much!
Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode at e.respondWith.caches.match.then.response (sw.js:12)
25:32 - You say "cache first, if not there, then go to network". Any idea on how to make it "network first, if not there, then go to cache"? Because problem with former is that it takes quite a lot of effort (clearing data, multiple refreshes, etc) to push updated PWA to user's device. Edit - found the solution using ChatGPT. Basically test if (navigator.onLine) firstly inside the fetch event listener, if it is true then do e.respondWith(fetch(e.request)); else use the cache responding code you showed in video.
Good video. I have question. No matter how I change the content in all of the file, the "install" still display "dcode PWA example". Please advise how to change it. Thx.
Dcode is there a second tutorial where we build the app up a bit? Also, how do we make the splash and icons show when the app is opened as I see they aren't in my app or yours
I have a question what if i upload my application on production and then i decided to make changes on those file i did caches. Then how do i make my application service worker reload those static files?
I don't get 'index.html' to show up when offline. The cache says it is cached but when enabling 'offline' I get a 'Page not reachable'. I also get an error 'Uncaught (in promise) TypeError: Failed to fetch at sw.js:18:31' which is the line 'return response || fetch(e.request);'. Do you have any idea as to why that might be and how to solve it?
Hey, very cool and well explained. I've just came from spa video and I really like your style. Btw How do you change localhost name? youtube.local is something you customized, where? how? Anyway, many thanks for sharing.
Today, my growing interesting in beginning to code for android went through the roof when an app I had recently built and tried to test couldn't do its job because I lost internet connection, or rather, was put to offline mode when Google decided it was time for an upgrade. By the time the upgrade was finished and I tried to get the app to work again, I had no idea what had gone wrong. (it is a shopping list app that I use to store a list of finished groceries at home, and then retrieve the data for display and manipulation when I'm out shopping) After I got home, I started to figure things out, but, it really made me think that, even if the app worked as intended, what good would it be to me if I didn't have the internet connection that the app relies on to function?? Been skirting around this for about a while, so I might as well begin the process.
This is awesome, but my site won't install after hosting. Like during development the install option does come, but when I host the site, there's no install option
Thank you very much for this tutorial as i am about to create something like that (not for sale just for my needs). Do you plan to make more advanced tutorial for that?
Both methods-using the theme_color attribute in the manifest file and the theme-color meta tag in the HTML head-serve the same purpose of specifying the theme color. It's not necessary to have both in your project; having the color specified in either location should suffice.
Muito bom, poderia ter um videe de uma explicação completa usando por Exemplo React 19, React Router V7 como colocar eem PWA todos componentes de negocio etc.....
Can you update an responsive website to a web app or do you have to start from scratch? I have a booking system for my salon business where people pay online. They always ask for an app but it costs too much. If I could have convert it to a web app I could use it to do the same thing and cut costs on sms reminders, confirmations etc.
Great tutorial, very good explanation thank you ! Just one question more: Once the PWA is cached, if I add features or fix some bugs, how is possible to update it automatically or promt the user to update it ? Again thank you for your great job !
Followed all instructions. and I keep getting this error when I perform a Lighthouse audit " Does not register a service worker that controls page and start_url". HELP?
Something important I learned today. As long as this PWA is installed and running on localhost it will continue to tie up port 3000 or whatever port you ran it on, even when not open. I was trying to run a laravel project 2 weeks later and browserSync was showing me "Hello my name is Dom" . Took me a few minutes to figure out WTH was going on. I had to uninstall the PWA through start->settings->apps and features to free up port 3000.
Thank you so much for the solution. I used this tutorial for another app and today I kept getting an error from that file. I uninstalled the app and now everything is back to normal.
dcode i have a blog with php dynamicall from database can cache pages when user enter on website, i mean to cache all post pages and work on offline mode to be able to read it offline.
Ideally your data should probably be returned via the Fetch API (or at least AJAX) and then you may cache that result. A technique could be to store that result and display it to the user, and then once the network comes back online you retrieve a fresh copy of that data. I suggest you have a look at the Cache API for more info
Great video, thanks! I'd just like to point out that you're mispronouncing "cache". It's pronounced exactly like "cash", rhymes with "flash". The a is not pronounced like the a in "age" or "cage". Keep up the good work!
@@dcode-software no offence, but most other places (i.e. 90% of your views) will pronounce it cash - maybe just bite the bullet? Its really off-putting. Awesome video though... but I very nearly turned off every time you said cache.
How did you run the application? I used live server extension for visual studio code...but when I run the project it shows in the application tab, manifest.json not detected. What am I doing wrong?
BUILD A SINGLE PAGE APPLICATION WITH JAVASCRIPT 🔽
th-cam.com/video/6BozpmSjk-Y/w-d-xo.html
🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇
www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1
THANK YOU SO MUCH BRO! 🥹🥹🥹 I was struggling alot in PWA, but after watching your tutorial I could finally build it. Also, you explained everything very nicely, Thanks again!! 💙💙
This is the only guide that actually got me going - you did a great job of explaining things. Nice one!
Good tutorial. About half an hour, no frameworks, and just the minimum components to make things done. Thank you.
You're welcome. Happy to hear you enjoyed it!
It's nice that even your VS Code theme matches your logo and page.
If you enjoyed remember to Like and Subscribe for more projects and tutorials like this one 🙂
I’m new coding. For every programming language I use to I have to instal some type of plugin or something into vscode. Like for JavaScript or .Json. And python
@@jamarmartin884 no
Very clear explanation. Went to clone the code to learn more, but the GitHub repo is bare. Just the shell of the project, but no code. Any possibility of uploading still? Tnx.
As a rule of thumb, I don't like and subscribe to spam like this. Try teaching us how to build a native app and stop promoting this malicious PWA nonsense.
If you are following this project in 2022, add this to the icons array ("purpose": "maskable") it is needed for android phones of today
For the long time, my CI project its now working with PWA, thanks mate!
That was incredibly helpful. I was able to follow very easily and I appreciated how you explained every line of code you typed. Thanks!
Thanks dcode, this is the only tutorial that really explain how it's done
Great explanation, thank you. Would love to see you do more on PWA's :-)
Great tutorial and I love that you are not piling a bunch of frameworks on to do a simple example.
However, I think it would be great if you had done a better intro on how you are hosting the page. Nothing wrong with doing some research, but I think some might abandon the tutorial when they find out they have to figure out how to install Apache, set it up, and begin using it, in order to even start the tutorial at the point where you were.
Regardless, if someone does already have this background knowledge, useful tutorial!
Dcoe...what a good start and this is really opening me to another chapter. Thanks
Glad to hear it!
@@dcode-software Frankly, my Indonesia hardcore programmer / partner develop a standard kit for me to learn and generate PWA within a minute. He has published to GitHub to share, It automatically convert to PWA.
U all are awesome. We are fighting for our start up under my personal investment and looking for more start-up partner
@@hpkeong Hi, please can you share the GitHub link?
This guy is awesome. Know I am able to understand what pwa is. It's really fun thanks.
Thank you so much!!! The best video I have come across on PWA, simple and clear. :)
Awesome, glad you found it helpful
Thanks a ton ..With your guide video I was able to configure PWA for my site 😊
Awesome to hear!
Well done, the only explaination that made the job clear and easy.
Thank you for this! Clear explanation and you've got a very nice voice, sir! Instant subscriber here.
Thanks Mark!
This video is definitely in the holy grail of PWAs
Such a nice and clean explanation. Would love to see more stuff with PWA's ;)
Greetings
This is what I've been waiting for. Thanks Dcode!
No problem 😁
Thanks for the awesome video. Short but well explained. Subscribed.
Wow It was amazing thanks for complete Explanation 👌
Thanks you it works!! 🙏
Nice tutorial video sir. I hope more Advanced PWA video coming from you
Soon, hopefully :)
Excellent video!!!👏👏👏👏
Can you link to github with final code, just for reference?
thank you very much, really helped me make PWA
Very clear. Thank you. 👍🙏🙏
Subscribed , you are very helpful.
Thanks sir
You're welcome and thanks for subbing 🙂
A big thank you, good explanation and it works !
Thanks a ton, amazing tutorial! So cool to have my web app working offline! :D
No worries!
Thanks a lot Sir.. Much needed 💐
Excellent video, it was well explained! Thank you so much! 😄😄
You're the best Dom !
Good timing :) Thanks man
No worries mate!!
how do you get rid of the CORS error when your JSON file is on the same folder as the other ones?
have u found any solutions??
1] In vscode download live server extension
2]Then right click your html file and select preview server
Hi!! First of all, great video, it was a very nice introduction to PWAs. I have a doubt: Initially I was having problems with the manifest in the web browser cause I was deploying the index.html directly dragging it from file explorer, but then I discovered the Live Server extension for VSCode and I used it but the domain is the localhost address (127.0.0.1) and in your case you have a different name for the local address, how did you achieve that? Thank you very much!
Nice! Gotta try this tomorrow
Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode at e.respondWith.caches.match.then.response (sw.js:12)
Thanks for this great video!
Thanks a lot man! Great tutorial.
Thanks, great video!
which theme are you using for vs code?
Thank you, very helpful.
Awesome video!
amazing explain its works great for me :)
25:32 - You say "cache first, if not there, then go to network". Any idea on how to make it "network first, if not there, then go to cache"? Because problem with former is that it takes quite a lot of effort (clearing data, multiple refreshes, etc) to push updated PWA to user's device.
Edit - found the solution using ChatGPT. Basically test if (navigator.onLine) firstly inside the fetch event listener, if it is true then do e.respondWith(fetch(e.request)); else use the cache responding code you showed in video.
Good video. I have question. No matter how I change the content in all of the file, the "install" still display "dcode PWA example". Please advise how to change it. Thx.
Wow, you're the Best!!!
awesome as always
Dcode is there a second tutorial where we build the app up a bit? Also, how do we make the splash and icons show when the app is opened as I see they aren't in my app or yours
I have a question what if i upload my application on production and then i decided to make changes on those file i did caches. Then how do i make my application service worker reload those static files?
That's my issue right now!
My question too...
I don't get 'index.html' to show up when offline. The cache says it is cached but when enabling 'offline' I get a 'Page not reachable'. I also get an error 'Uncaught (in promise) TypeError: Failed to fetch at sw.js:18:31' which is the line 'return response || fetch(e.request);'.
Do you have any idea as to why that might be and how to solve it?
Just put the manifest link on the top of another link in your html file
is there any possibility to remove ellipsis from PWA MicrosoftEdge?
Hey, very cool and well explained. I've just came from spa video and I really like your style. Btw How do you change localhost name? youtube.local is something you customized, where? how? Anyway, many thanks for sharing.
Hey, this is how I've done it:
th-cam.com/video/gBfZdJFxjew/w-d-xo.html
@@dcode-software Cool, thanks!
Please note that for the new update to chrome,
Audits has been replaced by Lighthouse
Thank you.
What app are you using to create the manifest etc ?
Thanks for this, very clear explanation. sir, the Ios splash screen not working how to fix it..?
Today, my growing interesting in beginning to code for android went through the roof when an app I had recently built and tried to test couldn't do its job because I lost internet connection, or rather, was put to offline mode when Google decided it was time for an upgrade. By the time the upgrade was finished and I tried to get the app to work again, I had no idea what had gone wrong. (it is a shopping list app that I use to store a list of finished groceries at home, and then retrieve the data for display and manipulation when I'm out shopping)
After I got home, I started to figure things out, but, it really made me think that, even if the app worked as intended, what good would it be to me if I didn't have the internet connection that the app relies on to function?? Been skirting around this for about a while, so I might as well begin the process.
YOU ARE MY HERO.I LOVE YOU SO MUCH
This is awesome, but my site won't install after hosting. Like during development the install option does come, but when I host the site, there's no install option
can i set my google fonts and fontawesome links as catch as well?
Thank you very much for this tutorial as i am about to create something like that (not for sale just for my needs). Do you plan to make more advanced tutorial for that?
I have other videos planned at the moment but it's definitely something I'll consider!
@@dcode-software thanks a lot, I really appreciate that!
Will this work for Unity Web GL?
Hi Dom can you make a small tutorial about Web Notifications API?
Hey, I've made this video: th-cam.com/video/Jncoj-Gvh9o/w-d-xo.html
Does it help?
@@dcode-software it does! thanks
Both methods-using the theme_color attribute in the manifest file and the theme-color meta tag in the HTML head-serve the same purpose of specifying the theme color. It's not necessary to have both in your project; having the color specified in either location should suffice.
Which vscode thene you are using
that is amazing tutorial, thank you
You're very welcome!
In my app it is showing :
The script has an unsupported MIME type (text/html).
What could be the reason?
Muito bom, poderia ter um videe de uma explicação completa usando por Exemplo React 19, React Router V7 como colocar eem PWA todos componentes de negocio etc.....
Can you update an responsive website to a web app or do you have to start from scratch? I have a booking system for my salon business where people pay online. They always ask for an app but it costs too much. If I could have convert it to a web app I could use it to do the same thing and cut costs on sms reminders, confirmations etc.
by any chance do you know how to fix manifest not being found by chrome?
Great tutorial, very good explanation thank you !
Just one question more:
Once the PWA is cached, if I add features or fix some bugs, how is possible to update it automatically or promt the user to update it ?
Again thank you for your great job !
That’s actually a very good q
Followed all instructions. and I keep getting this error when I perform a Lighthouse audit "
Does not register a service worker that controls page and start_url". HELP?
what vscode theme are you using?
x2
Something important I learned today. As long as this PWA is installed and running on localhost it will continue to tie up port 3000 or whatever port you ran it on, even when not open. I was trying to run a laravel project 2 weeks later and browserSync was showing me "Hello my name is Dom" . Took me a few minutes to figure out WTH was going on. I had to uninstall the PWA through start->settings->apps and features to free up port 3000.
Thank you so much for the solution. I used this tutorial for another app and today I kept getting an error from that file. I uninstalled the app and now everything is back to normal.
Greate information..!!
How to know the website is PWA in a simple way
can you name few websites which have offline accessibility ??
How to add a splash screen with the icon?
If I use indexphp instead of indexhtml will it work?
Hello! Great tutorial, however, I'm getting issues regarding a favicon. What is it? Seems something new with respect with what you shown us. Regards!
favicon.ico is the litle (browser)tab logo. usually is 16px by 16px just save as png and change the extension to ico...
also if its offline the user can navigate between html pages?
Yes, if you cache those requests!
dcode i have a blog with php dynamicall from database can cache pages when user enter on website, i mean to cache all post pages and work on offline mode to be able to read it offline.
Ideally your data should probably be returned via the Fetch API (or at least AJAX) and then you may cache that result. A technique could be to store that result and display it to the user, and then once the network comes back online you retrieve a fresh copy of that data. I suggest you have a look at the Cache API for more info
dcode thank you!
Great video, thanks!
I'd just like to point out that you're mispronouncing "cache". It's pronounced exactly like "cash", rhymes with "flash". The a is not pronounced like the a in "age" or "cage".
Keep up the good work!
Thanks mate. It depends where you're from, I'm from Australia so I think we pronounce it like I've done in the video
@@dcode-software no offence, but most other places (i.e. 90% of your views) will pronounce it cash - maybe just bite the bullet? Its really off-putting. Awesome video though... but I very nearly turned off every time you said cache.
How did you run the application? I used live server extension for visual studio code...but when I run the project it shows in the application tab, manifest.json not detected.
What am I doing wrong?
I recommend using a dedicated web server like Apache, try XAMPP or WAMP
@@dcode-software i am using Xampp but same problem facing
@@dcode-software I pay for a server but don't know how to do this lol
Im getting a “manifest not detected” message when i try opening it. Why is that?
Nice tutorial. So how can it be viewed on mobile
How to run in crome this code?
Audit tab is not available in chrome anymore. instead click in lighthouse tab. The content is pretty much the same.
Ótimo vídeo.
Cheers!
“Manifest does not contain a suitable icon”...
how to get button install in brawser like you
Why Chrome icon coming in my PWA icon?
Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform
thank you شكرا جزيلا
can you make a web app development course
is pwa still a thing?
what is json?
javascript object notation
Thank you
Thank you man, you record this best of the best explanations ever. Respect from me. Thank you very much. Subscribe, like and click the bell.
Wonder full
I did not get the install prompt but everything works well
That's no good - have you tried refreshing the service worker?
@@dcode-software i got the solution thanks