Maybe the best way to sneakily update/reload is to hack into a webcam/camera to see if the user is looking away/not there and reload it when they aren't looking. Win-win situation. Constant surveillance is the best way to produce seamless UX.
Another thing you could consider is to ignore the newer version if the changes are insignificant, and just prepare those for the next reload instead. For example in the case of a blog post it's common to update the post to fix typos, but maybe that's not worth reloading the page for.
I think this still is a simple use-case. It's much more harder to do offline first for real-time collaborative ERP style apps. And i had this idea about tracking current user view and all the child components in that view to decide, should i update or not. But it seems pretty hard/complex thing to do. In context of real-time "websocketed" app.
It is really difficult to handle data model updates in real-time applications, especially many apps use no-SQL like firebase, there will always be outdated data model in the database... I wonder are there any good ways to handle this? Like the ORM in the relational database world. And if we do data model updates on demand (like on user visit), for a user with huge data size, it will take a while or it may freeze the app.
hey Guys, very instructive video, I have been working with cache just a few weeks ago, we have a pwa in reactjs and we want that users stays up to date as fast as possible, so, we end up doing network first for the html (with some timeout), and cache first for the js, css, etc. I don't test it with Lie-Fi, but I think that will work pretty well, what do you think?
That approach could end up wrecking your app if you add new elements or change existing ones. The new altered html would be delivered, but the stale css or js might break since it wasn't designed with the new changes in mind. I think the best way to get around that would be to deliver inline css/js for very new changes, and then it could be removed a few weeks later when most people are on an updated cache. But that is very complex to do :/
I'm really scared about making an offline first and then having a bug on the service worker and not being able to push an update because the updater is broken. Is there any easy way of remotely cache busting the SW?
It doesn't let you lock yourself in. Just deploy a fixed service worker to the same URL as the broken one. If, somehow, storage has been messed up in ways you can't predict and recover from, developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Clear-Site-Data can be used as a reset button.
So you are not doing online first because of "lie-fi", so how does proxx.app solution work around this connection issue? I couldn't see any kind of improvements on the implementation that would make lie-fi better.
PROXX is offline-first, so it's totally fine during lie-fi. It won't be able to get an update if it's on lie-fi, but the user won't notice that, they'll just play the version they already have.
Service Workers are available on HTTPS only, right? That's unfortunate. Does anyone know of a Node.js web host that's free and offers free SSL? Because Heroku charges extra for it :(
We have a seperate podcast fwiw developers.google.com/web/shows/http203/podcast/. The RUclips series & podcast used to be kinda the same thing, but they're separate now so we can do more visual stuff here.
A reliable way to trigger Lie-Fi is to just start walking away from your home Wi-Fi. I usually get it down the street, 50-100 m away from my house.
Best dev series on YT easily😍 Don't you dare stop making these
Well I guess your dream hasn't come true because HTTP 203 is now dead...
@@BenjaminAster is it though
Maybe the best way to sneakily update/reload is to hack into a webcam/camera to see if the user is looking away/not there and reload it when they aren't looking. Win-win situation. Constant surveillance is the best way to produce seamless UX.
loyal viewer here, yeah!
shout out
HTTP 203: A FEW LOYAL VIEWERS
I love your channel though! I hope it's as fun for you as it is informative and entertaining for us!
Another thing you could consider is to ignore the newer version if the changes are insignificant, and just prepare those for the next reload instead. For example in the case of a blog post it's common to update the post to fix typos, but maybe that's not worth reloading the page for.
You're pretty awesome
You've also probably help me find a bug or two.
Keep being awesome! ✌️
7:23 Just keeping this timestamp handy for later.
Yes please
I can't believe I timestamped it as well instantly
Love to be a loyal viewer
There are some good ideas here. I'll probably try something similar to the Proxx approach on my app.
I think this still is a simple use-case. It's much more harder to do offline first for real-time collaborative ERP style apps. And i had this idea about tracking current user view and all the child components in that view to decide, should i update or not. But it seems pretty hard/complex thing to do. In context of real-time "websocketed" app.
7:57, Omg i use that website all the time! That’s incredible.
It is really difficult to handle data model updates in real-time applications, especially many apps use no-SQL like firebase, there will always be outdated data model in the database... I wonder are there any good ways to handle this? Like the ORM in the relational database world. And if we do data model updates on demand (like on user visit), for a user with huge data size, it will take a while or it may freeze the app.
I implement my own ORM for that written in Rapydscript github.com/rafi16jan/rapyd-framework
Awesome content guys
hey Guys, very instructive video, I have been working with cache just a few weeks ago, we have a pwa in reactjs and we want that users stays up to date as fast as possible, so, we end up doing network first for the html (with some timeout), and cache first for the js, css, etc. I don't test it with Lie-Fi, but I think that will work pretty well, what do you think?
It depends what the timeout is. That's what lie-fi users will get.
That approach could end up wrecking your app if you add new elements or change existing ones. The new altered html would be delivered, but the stale css or js might break since it wasn't designed with the new changes in mind.
I think the best way to get around that would be to deliver inline css/js for very new changes, and then it could be removed a few weeks later when most people are on an updated cache. But that is very complex to do :/
I'm really scared about making an offline first and then having a bug on the service worker and not being able to push an update because the updater is broken. Is there any easy way of remotely cache busting the SW?
It doesn't let you lock yourself in. Just deploy a fixed service worker to the same URL as the broken one. If, somehow, storage has been messed up in ways you can't predict and recover from, developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Clear-Site-Data can be used as a reset button.
I remember doing that on AppCache, scary shit
That happened to me way too many times.
Why can't you do HMR in a SPA?
U're the beeest!
Hllo my frieand.. handling ..
I really want LieFi to be a thing
Shoutout! 🙌🏼🙌🏼
Thanks, interesting
So you are not doing online first because of "lie-fi", so how does proxx.app solution work around this connection issue? I couldn't see any kind of improvements on the implementation that would make lie-fi better.
PROXX is offline-first, so it's totally fine during lie-fi. It won't be able to get an update if it's on lie-fi, but the user won't notice that, they'll just play the version they already have.
I dunno. People have been telling me for 10 years that the offline & low connectivity problem will go away. It hasn't yet.
What’s up with the Podcast??? Please say y’all haven’t cancelled it 😬😬
Sorry it's been so long. We've got one being edited right now. Will hopefully be out early next week.
Jake Archibald I’m assuming you meant “The Next Week” right??
Service Workers are available on HTTPS only, right? That's unfortunate. Does anyone know of a Node.js web host that's free and offers free SSL? Because Heroku charges extra for it :(
glitch.com and netlify could be good choices here
@@jakearchibald Thank you for the suggestions! I'll look into them :)
Can you post the audio to podcast apps?
We have a seperate podcast fwiw developers.google.com/web/shows/http203/podcast/. The RUclips series & podcast used to be kinda the same thing, but they're separate now so we can do more visual stuff here.
10:56 the intro performs horribly on Firefox on Android though. Not sure why.
the color grading is too dark and green
Saul say hi
My service worker loading old index.html after new production department. How can I fix it? It's not every time though.
I'm using reactjs.
Unregister the service worker developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/unregister
would either of you want to donate that domain, web.dev, to me? it would be very much appreciated
no
no views
33 likes
k youtube
Shout out to meeeee
I still play PROXX every now and then when I'm on a plane. The app has aged well. 👍