BUILD A SINGLE PAGE APPLICATION WITH JAVASCRIPT 🔽 ruclips.net/video/6BozpmSjk-Y/видео.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
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.
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.
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!
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
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.
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.
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)
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?
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.
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.
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?
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.
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 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
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 !
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 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?
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?
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
BUILD A SINGLE PAGE APPLICATION WITH JAVASCRIPT 🔽
ruclips.net/video/6BozpmSjk-Y/видео.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!! 💙💙
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.
This is the only guide that actually got me going - you did a great job of explaining things. Nice one!
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!
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!
If you are following this project in 2022, add this to the icons array ("purpose": "maskable") it is needed for android phones of today
It's nice that even your VS Code theme matches your logo and page.
Great explanation, thank you. Would love to see you do more on PWA's :-)
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
For the long time, my CI project its now working with PWA, thanks mate!
Thank you for this! Clear explanation and you've got a very nice voice, sir! Instant subscriber here.
Thanks Mark!
Thanks you it works!! 🙏
This guy is awesome. Know I am able to understand what pwa is. It's really fun thanks.
Such a nice and clean explanation. Would love to see more stuff with PWA's ;)
Greetings
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?
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 so much!!! The best video I have come across on PWA, simple and clear. :)
Awesome, glad you found it helpful
This video is definitely in the holy grail of PWAs
Thanks for the awesome video. Short but well explained. Subscribed.
Nice tutorial video sir. I hope more Advanced PWA video coming from you
Soon, hopefully :)
thank you very much, really helped me make PWA
Can you link to github with final code, just for reference?
Excellent video!!!👏👏👏👏
Nice! Gotta try this tomorrow
Thanks, great video!
Wow It was amazing thanks for complete Explanation 👌
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:
ruclips.net/video/gBfZdJFxjew/видео.html
@@dcode-software Cool, 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.
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!
Thank you, very helpful.
Thanks for this great video!
Please note that for the new update to chrome,
Audits has been replaced by Lighthouse
Thank you.
Awesome video!
Wow, you're the Best!!!
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
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.
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.
Very clear. Thank you. 👍🙏🙏
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)
Subscribed , you are very helpful.
Thanks sir
You're welcome and thanks for subbing 🙂
You're the best Dom !
A big thank you, good explanation and it works !
This is what I've been waiting for. Thanks Dcode!
No problem 😁
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
Thanks a lot man! Great tutorial.
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
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.
Good timing :) Thanks man
No worries mate!!
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.
Thanks a ton, amazing tutorial! So cool to have my web app working offline! :D
No worries!
awesome as always
Thanks a lot Sir.. Much needed 💐
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?
Thanks for this, very clear explanation. sir, the Ios splash screen not working how to fix it..?
Excellent video, it was well explained! Thank you so much! 😄😄
YOU ARE MY HERO.I LOVE YOU SO MUCH
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.
Greate information..!!
How to know the website is PWA in a simple way
can you name few websites which have offline accessibility ??
is there any possibility to remove ellipsis from PWA MicrosoftEdge?
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.
In my app it is showing :
The script has an unsupported MIME type (text/html).
What could be the reason?
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
amazing explain its works great for me :)
which theme are you using for vs code?
What app are you using to create the manifest etc ?
Im getting a “manifest not detected” message when i try opening it. Why is that?
Hi Dom can you make a small tutorial about Web Notifications API?
Hey, I've made this video: ruclips.net/video/Jncoj-Gvh9o/видео.html
Does it help?
@@dcode-software it does! thanks
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
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!
thank you شكرا جزيلا
Nice tutorial. So how can it be viewed on mobile
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...
Ótimo vídeo.
Cheers!
Thank You
If I use indexphp instead of indexhtml will it work?
Audit tab is not available in chrome anymore. instead click in lighthouse tab. The content is pretty much the same.
“Manifest does not contain a suitable icon”...
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...
by any chance do you know how to fix manifest not being found by chrome?
that is amazing tutorial, thank you
You're very welcome!
Will this work for Unity Web GL?
Which vscode thene you are using
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
Wonder full
u are good
can i set my google fonts and fontawesome links as catch as well?
How to add a splash screen with the icon?
How to run in crome this code?
how to get button install in brawser like you
Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform
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!
what vscode theme are you using?
x2
can you make a web app development course
thx
Why Chrome icon coming in my PWA icon?
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
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.
is pwa still a thing?