This is the only video I needed. I have been stuck on how should I make my web app offline and found this guy explaining pwa in very simple terms. Thank you sir, it was a very informational video
Rarely had such precise and easy to understand explanation of something. Very well done AND without the fuzz that often make such videos sound like an overhiped TV commercial! Thank you
wanna say it's pretty usefull review! no huge explanations of obvious things, which are so popular nowadays, just essentials that experienced developer have to know to get how it works in general. keep going man! thumbs up!
For those who are stuck because the install icon does not show: In chrome you can open the dev tools > application > manifest which shows you warnings and errors on Installability.
I'm surprised I haven't come across your channel before but it's a godsend. I'm about to start a contract at work to build a POS and one of the requirements is that it has to be a PWA for offline mode. This saved me loads of time wading through all of the project scaffolding and documentation to get started. Thank you.
Spinning up a new app that has offline-first as it's primary requirement. This is a big help! We are using SolidJS (app needs to work well on lower end mobile so the rendering performance is necessary) and Vite. I found Vite PWA today but got lost in the config. Timely video, thanks!
Thanks for this part of the chat! I would love to hear more about how the Asp project must be acting as the pwa's server. It's got me a little stumped, and the plugin's deploy docs don't include .Net. You are the best! 👉👉💯
Hmmm, 6:49 seems to be where this breaks for me.. I ended up having to run the full build and then and used `npx local-web-server` from the dist folder to get the install icon.. Shame it doesn't seem to work from simple dev server
@@swildermuth dev server didn't serve them for some reason. No errors, just no button to install. But when I ran up the dist as a full fledge server and added it to my reverse proxy I got the button.
Subscribed. Great stuff. Thanks. It's good to know this is available. Have you built something with it that was released as an app? (working on android and ios?)
Thank you very much excellent content as always. As you asked for it can you please do a coding short for user impersonation using JWT/Identity. 😃 Thanks
Very good video. I was stuck hat the caching part for at least a day.. now it works. Another thing that does still not work, ist to set a scope for the service worker. I set the scope in the manifest. I have a backend path, that is not served from the frontend but eith the service worker enabled the packend path ist not proxied through. Can anyone help?
I have an application I'm working on that requires this very thing. I was tryiung to make reactPWA work with React 18 (in Vite) and Material UI v5. Thanks! Much appreciated!
i am doing the project with same react 18 and mui but i can't solve this issue yet I am getting error at sw.js with cors origin issue can you please share the code
@@swildermuth It seems not working at all. The precache is working fine, but the runtime caching is not working. No errors come out, but it doesn't even create the runtime caching file in Cache Storage. ` workbox: { runtimeCaching: [{ urlPattern: "https:\\/\\/openweathermap\\.org\\/api\\/.*", handler: "NetworkFirst", options: { cacheName: "api-cache", cacheableResponse: { statuses: [200] }, rangeRequests: true } }] }` These are the line of codes I changed.
Great video, thank you, however, i can't make it work. Everything works just fine until i try to add a runtime cache in the workbox. I write something very similar to you and none of my data that is fetched on the distant api is cached (i don't see it in the Application/Cache Storage and my web app doesn't work when i turn on the offline mode). Is there something to do when the data is fetched to cache it ? It is weird because i don't get any errors ... [edit] it finally worked even though i didn’t do anything, i am not really sure why but i guess chrome needed some time to update
Observation: Seems like it has to be a 512x512 icon. I just selected a random 32x32 png, and it does not work. I had to select a 512x512 png to get the Install icon to display.
@@swildermuth I was testing on my desktop PC. Your reply makes sense though. Maybe it would have worked had I tested it on another OS where 32x32 was appropriate. Thanks for the reply and great video!
Respectfully, I'd like you to not move the cursor around randomly when showing a page. It makes it difficult for people with ADHD to focus on what you're saying when you are distracting them. I realize that moving the cursor around randomly is a common practice as if to say "here, look at this." It is better to move the cursor to a specific location only when there is something specific at that location to pay attention to. Thank you for listening and for a generally great video.
Very good video. I was stuck hat the caching part for at least a day.. now it works. Another thing that does still not work, ist to set a scope for the service worker. I set the scope in the manifest. I have a backend path, that is not served from the frontend but eith the service worker enabled the packend path ist not proxied through. Can anyone help?
This is the only video I needed. I have been stuck on how should I make my web app offline and found this guy explaining pwa in very simple terms. Thank you sir, it was a very informational video
Rarely had such precise and easy to understand explanation of something. Very well done AND without the fuzz that often make such videos sound like an overhiped TV commercial! Thank you
I appreciate it.
wanna say it's pretty usefull review! no huge explanations of obvious things, which are so popular nowadays, just essentials that experienced developer have to know to get how it works in general. keep going man! thumbs up!
For those who are stuck because the install icon does not show: In chrome you can open the dev tools > application > manifest which shows you warnings and errors on Installability.
Been learning about PWA's for the past 2 weeks, and you made it simple as it can be. Thanks alot!
Glad it helped!
This is brilliant!!! Will be writing my first PWA with React and Vite. You have a new subscriber!!!
Very useful information, Shawn. Thanks for sharing.
Thanks a lot . This is a great guide!
I'm surprised I haven't come across your channel before but it's a godsend. I'm about to start a contract at work to build a POS and one of the requirements is that it has to be a PWA for offline mode. This saved me loads of time wading through all of the project scaffolding and documentation to get started. Thank you.
Spinning up a new app that has offline-first as it's primary requirement. This is a big help! We are using SolidJS (app needs to work well on lower end mobile so the rendering performance is necessary) and Vite. I found Vite PWA today but got lost in the config. Timely video, thanks!
This is a great guide! Thank you. Subscribed.
thank you for keeping it simple
You're welcome!
Thanks for this part of the chat! I would love to hear more about how the Asp project must be acting as the pwa's server. It's got me a little stumped, and the plugin's deploy docs don't include .Net. You are the best! 👉👉💯
That was so helpful, thank you so much.
Thanks for this great tutorial :D
Glad it was helpful!
you're great Sir. Thanks
Really good, thanks 😎
Hmmm, 6:49 seems to be where this breaks for me.. I ended up having to run the full build and then and used `npx local-web-server` from the dist folder to get the install icon..
Shame it doesn't seem to work from simple dev server
It should, it's just files in the server. How does it not work?
@@swildermuth dev server didn't serve them for some reason. No errors, just no button to install. But when I ran up the dist as a full fledge server and added it to my reverse proxy I got the button.
Thanks so much!, your tutorial works for me a lot.
You're welcome!
Subscribed.
Great stuff. Thanks.
It's good to know this is available.
Have you built something with it that was released as an app? (working on android and ios?)
Great video and very helpful 👍
Glad to hear it!
Thank you! Where GPT and Bing AI, couldn't help, this video saved my day❤
Glad it helped!
very efficient demo thanks a lot swildermuth
You are welcome!
Some damn great stufff
Thanks!
This was very helpful thank you
Code U do a video on vite-electron-plugin ?
Thank you very much excellent content as always. As you asked for it can you please do a coding short for user impersonation using JWT/Identity. 😃 Thanks
Noted
@@swildermuth Thank you so much
Very good video. I was stuck hat the caching part for at least a day.. now it works. Another thing that does still not work, ist to set a scope for the service worker. I set the scope in the manifest. I have a backend path, that is not served from the frontend but eith the service worker enabled the packend path ist not proxied through. Can anyone help?
the api caching doesn't work on my app, any tips to debug this??? thanks for the lesson
I assume you've looked at the "Application" tool in the debug tools?
Thnaks for this! btw what does the as const does??
it prevents it from being changed.
Amazing content, new follower.
what about code update? the app is keeping in cache the old code
Nice explanations, but I have a question ? think we have admin and user functionalities in a same app, can we disable PWA feature for admins ?
Honest I am not sure. Probably not in the Vite PWA plugin, but if you used the actual framework PWA solution you might have more flexibility.
Why am I getting this error when I deploy in vps ?
Error: Manifest: property 'src' ignored, URL is invalid.
I have an application I'm working on that requires this very thing. I was tryiung to make reactPWA work with React 18 (in Vite) and Material UI v5. Thanks! Much appreciated!
Good luck!
i am doing the project with same react 18 and mui but i can't solve this issue yet I am getting error at sw.js with cors origin issue can you please share the code
Thank you so so so much! xo xo
Glad to help!
I have an issue with runtime caching for api?
What's the issue?
@@swildermuth It seems not working at all. The precache is working fine, but the runtime caching is not working. No errors come out, but it doesn't even create the runtime caching file in Cache Storage.
` workbox: {
runtimeCaching: [{
urlPattern: "https:\\/\\/openweathermap\\.org\\/api\\/.*",
handler: "NetworkFirst",
options: {
cacheName: "api-cache",
cacheableResponse: {
statuses: [200]
},
rangeRequests: true
}
}]
}`
These are the line of codes I changed.
@@alimaher1 Were you able to fix it? Even I've the same issue. Runtime cache is not generated in the cache storage.
For API requests, it only caches it on the second reload. Is there any workaround to make it cache on first visit
It should be caching on first request, but I find it fidly...maybe make an issue on the github for the plugin github.com/vite-pwa/vite-plugin-pwa
thanks this rules
Great video, thank you, however, i can't make it work.
Everything works just fine until i try to add a runtime cache in the workbox. I write something very similar to you and none of my data that is fetched on the distant api is cached (i don't see it in the Application/Cache Storage and my web app doesn't work when i turn on the offline mode). Is there something to do when the data is fetched to cache it ?
It is weird because i don't get any errors ...
[edit] it finally worked even though i didn’t do anything, i am not really sure why but i guess chrome needed some time to update
I've seen that. I usually use a clean browser (e.g. MSEdge) to do the development so I can be sure my extensions in Chrome aren't exacerbating it.
Observation: Seems like it has to be a 512x512 icon. I just selected a random 32x32 png, and it does not work. I had to select a 512x512 png to get the Install icon to display.
Depends on the OS, normally you'd supply a few different sizes.
@@swildermuth I was testing on my desktop PC. Your reply makes sense though. Maybe it would have worked had I tested it on another OS where 32x32 was appropriate. Thanks for the reply and great video!
Tnx for share this... I use it
THANKS!!!
big fan from nepal sir
Awesome, love your country (was in Katmandu a few years ago).
great video :)
I hope that was not actual real customer data in the demo application. 1:31
I hope that is a joke
@@swildermuth My apologies. It looked real and you made no mention it was fake data, so I commented. Carry on.
@@swildermuth Perfect response! 😅 on a side note, Vite means “fast” in French so I hope it is fast!
Hi sir, I am looking for a mentor, can you teach me your tech skills, I am willing to work no fees.
Respectfully, I'd like you to not move the cursor around randomly when showing a page. It makes it difficult for people with ADHD to focus on what you're saying when you are distracting them. I realize that moving the cursor around randomly is a common practice as if to say "here, look at this." It is better to move the cursor to a specific location only when there is something specific at that location to pay attention to. Thank you for listening and for a generally great video.
This has been a problem I have for years now. It's a nervous habit. I'll try, but I can't guarantee I can stop.
Mf looks like an AI generated character model
Wtf💀
Very good video. I was stuck hat the caching part for at least a day.. now it works. Another thing that does still not work, ist to set a scope for the service worker. I set the scope in the manifest. I have a backend path, that is not served from the frontend but eith the service worker enabled the packend path ist not proxied through. Can anyone help?