In today's jam-packed episode, Charles, AJ, and Dan, along with special guest Danny Moerkerke, a seasoned freelance JavaScript web developer from Amsterdam.  They dive deep into the fascinating world of web development, focusing on the capabilities and future of Progressive Web Apps (PWAs), comparing them to native apps, and discussing the technical intricacies involved.

AJ shares his latest project on passkeys and the challenges of transitioning clients, while Dan gives us a glimpse into his social media habits and movie recommendations. Danny enlightens us with his experiences at IKEA and his passion for web components, PWAs, and crucial APIs like the Wake Lock and Background Sync.

They explore the complex interplay between service workers, caching for offline functionality, and the barriers to widespread PWA adoption, particularly on iOS. Plus, they dive into practical applications of these technologies, from gaming to improving podcast accessibility for offline listening.

So, tune in as they unravel the technical hurdles, share insightful demos, and debate the future of web and native app development. It's an episode packed with knowledge, practical advice, and a bit of fun along the way!

Charles Max Wood [00:00:05]:
Hey. Welcome back to another JavaScript Jabber. This week on our panel, we have AJ O'Neil.

AJ O'Neil [00:00:12]:
Yo, yo, yo. Coming at you live from the winter wonderland of Utah. Well, at least we had our our first the first frost that I noticed. The grass is all frozen.

Charles Max Wood [00:00:23]:
Yeah. We also have Dan Shapiro.

Dan Shappir [00:00:26]:
Hello from Tel Aviv. We're here. It's the first day of fall. We've essentially had the 1st day of rain. We're still wearing t shirts, though. I'm Charles Max

Charles Max Wood [00:00:37]:
Wood from Top Bend Devs. Yeah. I I had to scrape the car this morning. I didn't notice frozen grass. I I don't live terribly far from AJ. So, anyway, we have a special guest this week, and I I am going to slaughter your name. I'm sorry, Danny. We have Danny Moorkirk.

Charles Max Wood [00:00:56]:
Did I get anywhere in the ballpark?

Danny Moorkerke [00:00:58]:
Yeah. Somewhere around. It's Moorkerke. It's a pretty, complicated name. It's, it's Dutch or it's Belgian, actually, I think, but, pretty good.

Charles Max Wood [00:01:08]:
Yeah. I'm I'm sorry. I don't speak Dutch or Flemish and very little French, so I don't know how it all breaks down. But yeah. Welcome to the show. We are

Danny Moorkerke [00:01:18]:
gonna be

Charles Max Wood [00:01:20]:
discussing, DOM access and, browser APIs and some of the capacity the browser gives you for p PWAs. Before we do that, do you wanna just inform people a little bit more about who you are, what you do?

Danny Moorkerke [00:01:36]:
Yeah. Of course. Yeah. First of all, thanks for having me. I'm I'm Danny Molkager. I'm from Amsterdam. I'm a freelance JavaScript, web developer I should say. Started professionally around 2,007, 2008, and been also been messing around with, Atari home computer since I was a kid.

AJ O'Neil [00:02:01]:
I've

Danny Moorkerke [00:02:01]:
done a lot of stuff, worked a lot of time for the ING Bank in Amsterdam where we pioneered web components. Did a lot of, work on Polymer, back then and later, with the, the the Lit, framework. Currently doing a lot with web components and progressive web apps. I'm the, creator of what PWA can do today, which you can find at whatpwa can do dot today. It's basically a, a showcase of what is possible with progressive web apps, today and the the apps itself at PWA. So what you can do is you can install it to your own device and then see for yourself what is, what is possible on your device and your, your platform. I also publish a weekly newsletter called the Modern Web Weekly where I also write about web components and and progressive web apps in general. You can also find me on, on medium and on x.

Dan Shappir [00:02:58]:
So you're the guy who's still using web components?

Danny Moorkerke [00:03:01]:
I am the one. Yeah. I I I heard I'm the only one who's still doing that.

Dan Shappir [00:03:07]:
Well, I don't know. I don't think you're the only one, to be fair.

AJ O'Neil [00:03:11]:
Of No. Jojo bite does it too. That's at least 2.

Dan Shappir [00:03:16]:
You know, there there've been a couple of of of, you know, those techno storms, debates, arguments, whatever you choose to call them, on x, and there are recent a relatively recent one was about web components yet again. I think it started with a post that, our friend Ryan Carniato wrote, which was very, I wouldn't say dismissive, but the harsh critique, I think, would be a better term of web components. But and then, Rich Harris or another friend of ours also joined the the discussion, also very critical of web components. So so, yeah, probably need to get Alex Russell on the show again.

Charles Max Wood [00:03:56]:
Yeah. Owen Busley on YouTube says that there are dozens dozens of people using it. The other thing that I'll throw in is that I've used a few items, libraries, on my front end stuff that once I kinda cracked it open and peeked under the hood, it's like, oh, they're using web components in here, and I just didn't know. So there are a lot more people probably that just don't know they're they're they're using them.

Dan Shappir [00:04:21]:
Yeah. Yeah. But that's the thing. You know, I I don't wanna derail us to web components, but that's the thing. The question wasn't the discussion wasn't so much how prevalent web components are on the web. Rather, it was about, do web developers these days, you know, should they be using them? Do they like using them? Should they be using them if they're using some sort of framework such as React or Svelte or whatever? I think that that was the main conversation.

Danny Moorkerke [00:04:52]:
Yeah. Yeah. Yeah. Yeah. There was a lot of, criticism of web components because they don't really integrate quite well with the existing frameworks like Svelte, that Rich Harris, built and React in, in in general. There are a lot of pain points with integrating web components into these, these frameworks because, yeah, like, the standards are taking different routes. They have different APIs. So that was basically what the, what the discussion was mostly, about.

Danny Moorkerke [00:05:24]:
And, yeah, I I I I can understand in one way that that is quite hard if you have an existing framework to integrate these components in there that are taking, different routes. But, yeah, I wouldn't say it's it it it it is impossible. I I personally have work a lot with Lit, which is also compiling down to to raw vanilla web components, and that actually works quite well.

Dan Shappir [00:05:51]:
Yeah. But lit was specifically built designed and built to work with web components. I think that the majority of the criticism came indeed from the fact that other frameworks, which were not specifically designed for web components, are having a hard time integrating with them. I think that that was the main source of of criticism.

Danny Moorkerke [00:06:15]:
Yeah. Yeah. That was exactly it. Yeah. Yeah.

Dan Shappir [00:06:19]:
Also, you know, a while back, micro front ends were all the rage, and then I completely stopped hearing about them. Now I assume people are still implementing that pattern, but for some reason, nobody's really talking about micro front ends, at least not in my vicinity.

Danny Moorkerke [00:06:38]:
No. I don't hear too much about that either as well.

Dan Shappir [00:06:44]:
Anyway So yeah. So PWAs, also, yet again, it I I I kind of paraphrase about PWAs that, PWAs are the future, always have been, always will be.

Danny Moorkerke [00:07:01]:
Let's hope so.

Dan Shappir [00:07:03]:
No. But, I mean, it's kind of a kind of a criticism because it means that PWAs might never arrive. Because if they're always the future, it's it's the the the basic question is, can PWAs survive Apple's attitude towards them? That's that's the crux of the thing, really.

Danny Moorkerke [00:07:27]:
Yeah. I think that's the that's the $1,000,000 question, right now. Yeah. It's it's it's like, Apple is still actively frustrating the the development of of PWAs or, basically, there's a lot of browser APIs that they still don't do not support on iOS. At least here in the EU, things are changing a little bit with the digital markets act. There's at at at least some movement in the direction that Apple will be forced to change their ways, but that might take some quite some time before that happened. If if it will ever happen, I I do think in the end it will, but it might take, take quite some time just like with Microsoft in the nineties. But, yeah, that is still a a a big issue, the the lack of parity between the between the Android's platform and the iOS platform.

Danny Moorkerke [00:08:18]:
But that is still something that will need to change in order for for PWAs to really be the future. Yeah. Although I think it's not the only ones. I think we should also, you know, hold up a mirror to ourselves as as developers. This is also something that I write frequently about is that we should also, build better web apps. Because right now, if you look, there's so many web apps that, their only job is to promote the native version of themselves. For example, if you go to LinkedIn nowadays, the first thing you see is like this big app banner that says, go to our native app. Don't use our web app.

Danny Moorkerke [00:08:57]:
Go to our native app. And then, the web app is just basically a dumbed down version of of the native app, which is really unnecessary because, a a lot of stuff that these native apps can do, web apps can do just as well. Even worse, a lot of times when you go to a a native version of some app, it doesn't offer you anything extra, that the web app cannot do. So I think we, as web developers, should also stop just spitting out out, web apps that are only there to promote native apps and really start using, these browser APIs that we have at our disposal nowadays.

Dan Shappir [00:09:37]:
To be fair, I don't think it's the developers. I think it's the marketing departments. The way that I like to put it is that when you're a web application, then on the mobile device, you're like a guest in a hotel. On the other hand, when you're a native application, it's like, somebody renting the apartment. It's like a much more lasting and permanent relationship. The whole, process of going to the store, downloading the app, installing it, getting an icon on on the desktop, that's a much more permanent relationship, and that's what the marketing people want. Mhmm. And they want to be able to push, notifications, which, you know, I'm not sure.

Dan Shappir [00:10:26]:
Can you now do this on iOS or not for a long time?

Danny Moorkerke [00:10:29]:
You can. You can. For a long time,

Dan Shappir [00:10:30]:
you couldn't. Yeah. I I really hope that that changes the the the conversation. If if iOS can do that, then then maybe. But but that's the that's the thing. Now what they're what they're ignoring is the fact that people don't like installing apps. So you might prefer that people install your app, but the likelihood that they're ins that they'll install your app is actually very low. So you should try to make the most of your shorter term web based engagement that you have with them and and make them repeat visitors.

Dan Shappir [00:11:08]:
And if what you built as a web app is a PWA and the browser notices that you visit again and again, it will actually offer you to install an icon on your desktop. And like you said, you can now start sending push notifications. So it's actually a better way of getting onto the device, but I think that a lot of marketing managers just not are not aware of this.

Danny Moorkerke [00:11:31]:
No. They are not. They are not. And I also see some role for developers in there to educate these these, these marketing managers that these things are now available on the web. I mean, I can understand if you're not gonna that you're not gonna move all your stuff, from native apps right now to, to web apps because you still have a lot of lack of support on iOS. But for example, if I look now, at the the the PWAs that X and Instagram have, they have perfectly fine functioning PWAs until you turn off the network. When you try to make them work offline, it doesn't work anymore. You refresh the page, you get nothing.

Danny Moorkerke [00:12:11]:
If you go to to x, on the native app, it will just give keep giving you your feed. Of course, you won't have any new stuff, but you can still still use it. On X, that's not the case because if you turn down the network or or or you you you disconnect the network and you try to start up the app, it will not give you anything. There's nothing. So at least that's something that's that we, yeah, that should be improved and that we can use right now.

Dan Shappir [00:12:39]:
Yeah. Cache APIs and various storage APIs have been around for a long time on all platforms.

Danny Moorkerke [00:12:45]:
Yeah. Yeah. One of the things we just wanna

Charles Max Wood [00:12:48]:
point out is that the mobile platforms have an incentive to make you go through the app store as well. Mhmm.

Dan Shappir [00:12:55]:
Oh, yeah. Sure. Absolutely.

Charles Max Wood [00:12:57]:
Yeah. So so that's just another reason why they may or may not be jazzed, I guess, about, you know, giving you the kind of support you want for VWO.

Dan Shappir [00:13:05]:
We spoke about this on several I think on on on on an episode with, Bruce Lawson. We had him in as a guest to talk about how, mobile platforms and iOS in particular, Apple and iOS in particular, try to, you know, kind of stem me the whole concept of PWAs just in order to preserve their their store based revenue stream. It's like, what? It's like a 30% cut on every app based purchase or something like that. That's that's insane. You know? Why it's 1,000,000,000 of dollars. Why would they give it up if they as long as they have a choice?

Danny Moorkerke [00:13:42]:
Yep. Yeah. I think that's that's the main incentive for them. It's just the revenue streams that they get from the from the app stores and the control that they, that they have. I I understand that they're not gonna give it up, like that. Yeah. Let's hope maybe Apple and and Google will find a new business model there with with web apps. Maybe that will finally give them the incentive to, to move toward web apps.

Danny Moorkerke [00:14:06]:
Or yeah. Otherwise, I think it's it that's only legislation that will force them in the end.

Dan Shappir [00:14:11]:
I think that's the only way. It's maybe, though, it's worthwhile to backtrack a little bit and and kind of explain the difference between a PWA and a regular old web app? Like, what's the what makes so what transforms a a web app into a PWA?

Danny Moorkerke [00:14:28]:
Basically, there are 2 things that that are, like, the pillars of a PWA, which is the manifest dot JSON file, which is just a metadata file that describes the items that, that will be added to your home screen whenever you install the, the app. You can also define other stuff in there. You can define the name in there. You can define the background color. In Chromium browsers, we also now have what they call the enhanced install UI. So what that means is, whenever you go to a Chrome browser like EtzerChromium or Opera, on the right in the address bar, when when the app can be installed, when it has a manifest dot JSON file and there's icons in there, you can click it and then you can install it to your device. You can also put some screenshots, in there nowadays for Chromium Browser. So whenever you click that button to install the app, you get a screen that is more like installing, the UI the UI that you get when you install a native app.

Danny Moorkerke [00:15:32]:
So you can see a nice name there, you can see a description there, and you can see some screenshots that are different for desktop and mobile. Those are also the things that you can, define there. You can define shortcuts also in the manifest. Json file, which is, for example, on an Android device. If you push and hold the icon, then like a a a shortcut menu will pop up and then you can go straight to some pages inside your, your PWA. Those are some of the things that you can, define in the manifest dot JSON file. And then the other thing is the service worker, which is a special kind of web worker that sits, as it were between the network and your app. So what it can do, it can intercept the network requests and it can also, cache.

Danny Moorkerke [00:16:22]:
So it can cache assets like style sheets, scripts, images, you name it. It can also, cache whole pages. So whenever you install the web app, you can just give it a a list of of routes and URLs, that it will then all visit and then it will cache the resulting HTML or the image or the script or the style sheet or whatever. Then you can define a fetch handler in there that that can just, decide whenever you go, to the network what it should do. So, for example, you can have it, serve everything from the cache, and then it can after that, you can do an additional request, for example, to, get any stuff that is new or what you can do is, for example, you can, let it always go to the network and whenever that fails, it can, serve content from the cache. The service worker also takes care of, of push notifications. So whenever even when your device is or when your app is not running, whenever a push notification arrives, the operating system will wake up the service worker and then the service worker will take care of receiving the push notification and then showing a notification on your screen. Yeah.

Danny Moorkerke [00:17:43]:
Other stuff like background sync is also something that is doing. So for example, if you, you have a form on your web app and the network is gone and you want to send the form, what it can do is to the, the service worker can intercept that request, that post request from the form. It can store it somewhere, maybe an index DB. And then whenever the network comes back, there will be a sync event will be fired and then the service worker can send that request. For example, I also use that for Google Analytics. So even when people are offline, I can get that analytics, data there, as well. And it can also do background, fetch, which is very interesting for podcast apps, for example. So normally, in a web app, when you Podcast apps.

Danny Moorkerke [00:18:32]:
Downloads yeah. Yeah. When you download stuff in a in a in a web app, and you close the web app, then your download is gone. But now with background fetch, that download can continue in the background. So you can just switch off your web app. The download will continue and then whenever you activate it again, the download will be, will be ready for you. But those are the 2 main things. The, the service worker that takes care of all the network stuff that intercepts network requests and caches stuff for you, and the manifest dot json file, which is the metadata file that describes the icons, the colors, the name, and stuff like that.

Charles Max Wood [00:19:12]:
Okay. I I wanna jump in here because you you you kinda pushed a couple of my buttons. And I don't I don't I I don't know if you knew this, but you you did. So I I have a couple of things that I'm kinda looking at, and this is specifically with the the caching and the the offline download. I I can't remember what you call it. But, so I've I've been wanting to, yeah, to give people better options for listening to podcasts. And I kept thinking, man, it should be nice. It was just a PWA.

Charles Max Wood [00:19:43]:
And then, we've we've discussed this on other stuff, but, the technology that I typically use on the back end is Ruby on Rails, and they've got this nice turbo native, which you can wrap around PWA and it it does PWA things. Mhmm. But even if I just wanted to do it in the browser, there for me to have it download new episodes in the background and and have them ready to go so that if I'm offline and I'm going through the airport or whatever, I can still listen to those episodes on my device in airplane mode without Internet and be good to go.

Danny Moorkerke [00:20:21]:
Yep. Exactly. Exactly.

Charles Max Wood [00:20:24]:
And, similar to that, because I I'm starting to put together training videos and, you know, I'm I'm getting into AI and starting to offer those videos, but I'm also looking at, I want to do kind of comprehensive, like, if if you want a video that walks you through an API, like a web API or a, you know, browser API or, you know, whatever. You know, maybe I pick up something that's commonly used out there, like, I don't know. You know, but I it walks through, hey. These are all the APIs. Similarly, I if somebody's interested, they can say, I I wanna be able to watch these ones offline, and then it can go and it can have those ready to go. And, again, they can just browse to the website on their browser, and it'll just play them even though they're not connected to the Internet because it actively pulled it in when they were.

Danny Moorkerke [00:21:16]:
Yep. Yeah. That's exactly what you can do. So, basically, what it does is, the service worker takes care of that. There's a couple of events there, like the the I don't know the exact name. It's background scene start or something, whatever. And it will download the, the things in the background. If you go to what PWA can do today, there's also a demo there that just downloads a lot of stuff.

Danny Moorkerke [00:21:41]:
I I think it's from Jake Archibald from some of his podcast. I just did that to make it really take a long time. So in the meantime, you can play with it. For example, if you have an Android device, it doesn't work on iOS yet, although it should be coming because it's already in Safari Tech Preview. In the, the the feature flex, you can enable it. It's it's it's there, but it's not functional yet. So it should be coming, to iOS as well in the near future. Then you can see in the, the messages center or or whatever it's called in in Android, you can just see the download continuing and you can pause it.

Danny Moorkerke [00:22:20]:
You can, you know, go to flight mode and then it will stop. And, even if you go if it's if it's running in the background and you go back to the app, you can see that after a few seconds, the progress will pick up. So it will just continue, if if it's still downloading. You can see the progress also, yeah, progressing. And, basically, what it does is whenever that, the download is finished, it will be presented to the web app as a response, and then that response can be put in the browser cache. So that is basically how that that that works. It's a very simple system. And, yeah, that that really enables exactly what you're looking for.

Danny Moorkerke [00:23:02]:
So you can download whatever you want in in in the background while the web app is not running.

Charles Max Wood [00:23:09]:
That's awesome. Really. Yep. All all the audio only people I'm making all kinds of happy gestures and movements and smiles. I'm I'm I'm super excited about this.

Dan Shappir [00:23:20]:
So,

AJ O'Neil [00:23:20]:
I I And by the way, I'm I'm clicking around on the site right now, just kinda testing things out, and I'm actually kinda surprised at some of the stuff that's supported. I'll have to try it in Firefox and mobile Safari to see if this is real. Is is this all evergreen stuff? Is this is this baseline stuff, or is is some of this still exploring?

Danny Moorkerke [00:23:39]:
Not everything. If you look at the for example, there's a one with the screen capturing, which is quite experimental. These are a couple of the, what they call origin trials in Chromium. So that that's Chromium, only. That's the screen capturing and the element capture, which, enables you, for example, to do a screen recording of a certain DOM element. Yeah. And then there's also the stuff that that Apple just blatantly refuses to implement, like Bluetooth and NFC, stuff like that. I don't know if that will ever come.

Danny Moorkerke [00:24:16]:
Okay. Well Yeah.

AJ O'Neil [00:24:18]:
I was I was really impressed that I typed it in and I hit enter, and I could tell instantly you were use you were not using React because the page loaded when I hit enter. So that was that was that was great. And then and then, I I can also tell you aren't using React because when I click on a button, the URL changes. And when I click back, the back button works. So I'm I'm pretty stoked on this.

Danny Moorkerke [00:24:42]:
Good. Yeah. I I I'm currently using a, a, what do you call it? A skeleton. So it just uses, or just loads the HTML quite, quite quickly. It's still a single page app, but I really want to move it to a multi page app as soon as the, the cross cross document, view transitions are all ready. They're already working also in Safari Tech preview, right now. Basically, the only reason it's a single page app right now is because I wanted to have those sliding transitions on, on mobile. And the only way to do that when I started building this was to, yeah, to to to do it as a single page app and have both pages in the DOM and then do some animations.

Danny Moorkerke [00:25:24]:
But now with the

AJ O'Neil [00:25:26]:
This is beautiful. I I think Thanks. I I wish that there was something basically, some boilerplate, like some copy paste boilerplate that somebody uses this as a template for how to start their their web app. Because, I mean, just no website works anymore, and this works. Like, everything that I click, it responds instantly. There's an animation or a transition to let me know that my click was responded to. I mean, this is like using the web in 1995, but with flat design as if it was in 1985.

Danny Moorkerke [00:25:58]:
Yeah. Yeah. Yeah. Thanks. Thanks. Yeah. I I have I if I had a a a euro for every time somebody asked me to open source it, I would be a millionaire by now. But I I I really want to do it, but the thing is that the code is not yeah.

Danny Moorkerke [00:26:11]:
I think it's a bit messy, and it's pretty integrated with Amazon. It it runs on AWS. So, I I am thinking of starting a boilerplate for people to really start up a PWA. What I did do in the meantime, on my GitHub page, there is a project called basic service worker, which is just a service worker that enables you to make your web app work offline, because I think that's really the baseline that web apps should have. And there's so many web apps that just do not work offline, and I think any any web app should work offline nowadays. What you

Dan Shappir [00:26:46]:
should do what you should do, I think now maybe this already exists and maybe Fred can chime in and tell us it exists, but I would look to integrate something like that with Astro. You know, ASTRO is is multipage, and, not single pages, so they support view transitions between the pages, in in in the framework. So having really good offline support with Astro, I think, would really open up a lot of interesting possibilities for a lot of developers.

Charles Max Wood [00:27:21]:
Yeah. I'm Yeah. I'm I'm I'm using stimulus, and I'm looking at the same kinds of things. You know? It's like, oh, how much of this can I tie in? Because, again, stimulus is lightweight, and inside your controllers, you can call into any of these APIs. Yeah. For sure.

Dan Shappir [00:27:35]:
Just just just to say, Chuck, just just to say, it's it's so yeah, to emphasize the fact that Danny kind of stated it, but it it really needs to be emphasized that it's so easy to transition from a plain old web application to, a PWA. Basically, all you need is a JSON file, which is the manifest. You know, how hard is it to do a JSON file? And and the service worker, you know, we've been talking about all the sophisticated things that service workers can do, but you can also have a really dumbed down service worker that's basically passed through. And there are, you know, examples of this on the web. And and just add that, and and you're done. It's a PWA. And then you can start adding all the sophisticated bells and whistles.

Charles Max Wood [00:28:27]:
Yeah. I was Yeah. I was gonna ask too. So on all the demos on what PWA can do dot today, I mean, these are all just using straight up browser APIs and DOM APIs. Right? There's there's no library or, you know, special this or that that you have to pull in. It's

Danny Moorkerke [00:28:48]:
No. No. There's there's nothing, really there. It's just basic, vanilla JavaScript. I think the only thing is I think I used 3d.js for one of these demos.

Dan Shappir [00:29:01]:
I have

Danny Moorkerke [00:29:01]:
to look it up. I think it's in the orientation or the motion demo. Oh, yeah. It's in the device orientation, demo. If you look on that on a on a mobile device, there's a nice textured cube there. That's what I used, 3 d dot j s for, but I don't even yeah. I think I could even do that myself. Really not that hard.

Danny Moorkerke [00:29:22]:
But the rest is no framework, nothing. It's just browser APIs, like I said, the the service worker and the the manifest dot JSON, file. It's funny that you mentioned then the the integration with Astro. I at my time at ING, I did look a little bit into ASTRO, but, I'm not even sure if we need any specific integration for that because the service worker itself is just a a separate web worker file that probably doesn't even need any integration with with with the framework.

Dan Shappir [00:29:56]:
Oh, yeah. For sure. It's just that if you make the whole process seamless for Astro developers, that would immediately provide benefit for a lot of developers. That's that's all I'm saying. Obviously, at the at the technological level, you don't really need anything because, you know, like you said, service worker is basically just a JavaScript file. Astro is basically just a web server. You know? And Yeah. Yeah.

Dan Shappir [00:30:24]:
That's yeah. You don't need much in in the way of integration to get web servers to deliver JavaScript files.

Danny Moorkerke [00:30:32]:
Yeah. Yeah. Yeah. But it's interesting. I'll I'll I'll have a look at that to see what I can do over there. It's the, yeah, the the the the main thing about the service worker that people always struggle with is like the the life cycle management of it and also the way it you know, if something goes wrong in your service worker, it can go really rough, sometimes. But

Dan Shappir [00:30:55]:
I think that was mostly fixed, though. I it used to be that if you got a bug in your service worker, you could literally get into a situation where you would need to call your visitors and ask them to reload the page or clear the thing in the dashboard or something. But I I think they fixed that.

Danny Moorkerke [00:31:12]:
Yeah. I I I don't even think there was a fix needed on the on the platform level, but I could be wrong. You can always just, you know, just put a, put a no op server worker in there. But the thing is that people, whenever they go to your web app, they need to get that service worker, which is mainly the the the hardest thing. So what I did in this basic service worker project I have on GitHub is that I made sure that the, the service worker can update as as soon as possible, and it also actively checks if there are any new versions of that that service worker. And then I also use, you know, like like page events, like page height, and all stuff like that. So whenever, right before you close it, it will check. And then the next time, you open it and the service worker is already down there, it's installing.

Danny Moorkerke [00:32:04]:
It will be, activated straight away whenever that is possible. It won't be possible if somebody has, like, multiple tabs with your web app open because that would be very messy.

Dan Shappir [00:32:15]:
So But, you you we mentioned a couple of the items on the list here. It's it's worthwhile to mention a couple of more. So we've got geolocations in here, notifications we already talked about, very forms of capture we already talked about, vibration, barcode detection, web share, payments. Yeah. What what what is the payment API? What can it do?

Danny Moorkerke [00:32:45]:
The payment API is just, integrates with Google Pay and Apple Pay. So, yeah, if you just go there so it's just a very simple demo. You can just click the button, and then you will see, in Chrome, you will see a a a Google Pay, screen coming up with $1¢ just just for demo. And whenever you open it in, in iOS, you will see the Google Pay, or sorry, the, the Apple Pay screen. So what you can do there is is just call, yeah, the APIs for those specific things and and have a payment done in your app. So it it it just in integrates with with that. It's also a browser API, but then you can pick if you want to, if you want to do it with Chrome Pay or or Apple Pay, and that will just completely integrate, with that.

Dan Shappir [00:33:38]:
And we've got speech synthesis, speech recognition, wake lock, which means that you can, get your phone to unlock. No.

Danny Moorkerke [00:33:48]:
It it prevents your screen from locking, which is which is Okay. Yeah. Which is also something like, you know, I I I love to cook. My wife loves to cook. So I regularly get, get recipes on my phone. And then whenever your hands are dirty, you want to scroll through the recipe or or you want to do something else and then

Charles Max Wood [00:34:07]:
my language, my friend. Yeah. Yeah. Yeah. I understand. All the time.

Danny Moorkerke [00:34:10]:
Yeah. Me too. And then the screen just goes off. You know? That's the thing. None of these sites use this, and it's so easy, so simple to use. It's just a couple of lines of code, and that will make your recipe website stay on. You know? It will keep the screen on. You know, if you're a cook if you're cooking and your hands are dirty, you you that's really something you need.

Danny Moorkerke [00:34:33]:
But they don't use it. It's, yeah.

Charles Max Wood [00:34:37]:
Yeah. My solution to this is I call my 8 year old over. Okay. Can you unlock my screen now?

Dan Shappir [00:34:42]:
Yeah. Push these buttons.

Danny Moorkerke [00:34:43]:
I I I do that too with my daughter. Yeah. Yeah. Yeah. Yeah. I will come coming back like you said, AJ, like, you were surprised that a lot of stuff, is is already supported. I hear that so often by web developers saying, oh, I had no idea that this was supported because, yeah, people don't know that. And that's also why, why I write about this is to educate people about what what is possible nowadays with web apps because a lot of developers have really have no idea of what is already, supported.

Danny Moorkerke [00:35:10]:
So that's also the reason they don't use this stuff because they don't know, about it.

Charles Max Wood [00:35:19]:
So I guess my question on this is, how much of this stuff is like, I'm looking at the wake lock, for example, and okay. So it's it's under the navigator stuff. So you really it's already there. You just you just have to run it. How much of this stuff requires you to have that service worker, and how much of this stuff is just kind of part of the Dom API?

Danny Moorkerke [00:35:50]:
Let me see. I think the service worker is only for the,

Charles Max Wood [00:35:56]:
let me see, for backgrounds. Requires network, basically?

Danny Moorkerke [00:35:59]:
Yeah. No. Not no. Not not not not even that. Basically, the background fetch API, for example, to download stuff in the background

Charles Max Wood [00:36:07]:
Yeah. That

Danny Moorkerke [00:36:08]:
that that's what needs a service worker. The background sync as well, although you could polyfill that. The background sync, what it does is you can ever whenever there is, for example, you want to send out some message. Let's say that you have an email client and you want to send out an email. What you can do with background sync is to create like this outbox functionality. So what you can do is you can send it straight. You can send it to an outbox. And whenever you are online, it will go from the outbox, it will be sent immediately.

Danny Moorkerke [00:36:42]:
But when you are offline, it it it will go to the service worker and then the service worker will take care of sending it whenever, the network is back. But that's also something you can polyfill with the online and offline events. You won't have the granular control that you have with background sync.

Dan Shappir [00:37:02]:
Also also the limitation that the web page would need to be open and in focus. Whereas with the service worker, it can it can work even if your web page is closed.

Danny Moorkerke [00:37:17]:
Yeah. Yeah. Yeah. That oh, yeah. That's another thing. Yeah. That also where yeah. The sync will also be raised when when it's not, no.

Danny Moorkerke [00:37:23]:
I don't think so with the background sync.

Dan Shappir [00:37:26]:
No. What what I mean is with background sync, with using a service worker, the web page doesn't need to be open. Like, whereas if you're just using the online offline events in the page itself, obviously, the page needs to be open in order for it to work.

Danny Moorkerke [00:37:45]:
So what you're saying is that whenever I register a sync, something that needs to be done, whenever the network is back. So when I close the PWA and then the networks come back, that that task will be executed.

Dan Shappir [00:38:00]:
Might be. And I need to you know, I haven't played with it. You're the PWA expert, but

Danny Moorkerke [00:38:05]:
that would be

Dan Shappir [00:38:06]:
but that that that would be that that would be like, the whole idea of a service worker is the fact that you've got code that is running. Like, PWA basically serves two purposes, really. First of all, it's a proxy between the page and the network, so it gives you a lot of control over what goes through the network, you know, what comes from the cache. It gives you a lot of caching capabilities that are otherwise not available. And the fact that it continues to run or can run when the page is closed, which means that it can do background things even when the page is closed, even theoretically when the browser app is not in the focus, like the background sync, like sending push notifications.

Danny Moorkerke [00:38:52]:
I have to admit, I didn't even try that, yet with the background sync, like like having some sync, registered and then closing the PWA and then reconnecting the network. So that's interesting. I'm gonna try that, tonight. I didn't even I I didn't even try that yet. That's a very good, very good remark. So, all of it

Charles Max Wood [00:39:14]:
His mad scientist costume on for Halloween and then try it.

Danny Moorkerke [00:39:17]:
Yeah. Yeah. No. That's really good. That's really good, actually. Other than that, it's only the notifications that we'll need a service worker. But like the rest, I'm I'm quickly scanning through it. Yeah.

Danny Moorkerke [00:39:27]:
All the other stuff is just basically workable even without a, a service worker.

Charles Max Wood [00:39:33]:
Right. Because it's either DOM or browser, and it doesn't need the network.

Danny Moorkerke [00:39:36]:
No. No. It doesn't really need to need the network. No. No.

Dan Shappir [00:39:40]:
Yeah. It's it's a huge shame that all these APIs is there. It's available. A lot of it is even supported by Safari, and yet the web developers hardly ever use it for

Danny Moorkerke [00:39:52]:
some reason. Exactly. Exactly. Yeah. Yeah. Exactly. I think it's a combination of people not being aware of this that that this stuff is available. And, yeah, whenever they need something or functionality like this, I think they will be quicker to go to a native app and and build that.

Danny Moorkerke [00:40:13]:
And then

Dan Shappir [00:40:13]:
The the company the company might go to a native app, but the actual developer I mean, you know, there are a lot of people who are web developers and don't really have much experience in building native applications, me, for example. Mhmm. And, you know, obviously, I can go and learn it. It's, you know, it's not the end of the world, but it's effort. And if I can get the same functionality using technologies that I'm very familiar with, then, you know, it's it's a win.

Charles Max Wood [00:40:45]:
Yeah. But the the point is is that a lot of this stuff that's on what can PWA what PWA can do today, I'm trying to it it's a jumble of letters in front of my face, and so I struggle to read it. But, a lot of these I didn't know were there, and so it wouldn't even occur to me to try to do it with my application, if that makes sense. But, I mean, like, a a barcode detection. Right? I would have gone out and I would have found some library that would have, you know, magic it in, but, you know, it's like, oh, well anyway Yeah. So so one other thing and, yeah, now we're getting into kind of the noob questions is so let's say that I wanna put this into my application. And, you know, I mentioned that, like, the background sync and the back, background fetch and some of this other stuff is some of what I'm interested in. Those require a service worker.

Charles Max Wood [00:41:44]:
How do I set one up? Is it just I mean, is there just an API for that that I just, you know, call? And then, how do I tell it how to connect to the back end to respond? And then finally, what does that response look like?

Danny Moorkerke [00:42:00]:
Yeah. So, basically, what you need is a a script, so a separate script, which is a a service worker. And like I said, it's a special kind of web worker. And what it consists of, I I already mentioned the, the life cycle of a service worker. So what it goes through, whenever a web page is loaded and it finds a service worker script, it it will load that script. The service worker will then start to install itself. So, basically, what you do is you define an event handler for the install event. So it's it's it's really a simple event handler that you put in there or the, install event.

Danny Moorkerke [00:42:43]:
And then, you can call the cache API, which is cache at, so you or or cache at all. You can just give it an array of URLs. That that that's all you need to give it. Let's say you have a couple of scripts. You have a couple of images. You have a couple of style sheets. You all put the URLs to those files into the array. And then let's say you also have some, HTML routes that don't end in a dot HTML file, you can also give that to the service worker.

Danny Moorkerke [00:43:15]:
And then when the service worker starts to install, it will run that that install event handler. And inside that event handler, it will add all those it will fetch all the all the stuff it needs, like the the the the asset style sheets, whatever you put in there. It will fetch that. It will fetch the pages, and then it will put a response object into the browser cache. And I'm not talking about the cache that the browser uses for the network, but it's really like it's it's a property on the window, objects. And then after that, whenever that is finished, that that, install phase, it will go to the, to the activate phase. And in that phase, you can, for example, you can remove some old caches, for example. One of the best practices is to always version it.

Danny Moorkerke [00:44:07]:
Well, I always put, like, a version variable in my service worker, and then I attach that to the name of the, of the cache, which can be anything you want. And then what you can you can check, for other caches that are still there, like for a previous service worker, you can delete them and then you can add, yeah, or you can start up you you can you can even create an index DB or something like that if you have to, serve other stuff. And then after that, yeah, you need a fetch handler, which is also a simple simple event handler. So whenever there a network request is done, the service worker will raise a fetch event, and then the, event handler for that will, yeah, will handle the network requests. And then inside that, you can just do basically whenever you want. You can, let's say, you can use you can serve other pages if you want. You can serve offline pages. You can decide if you want to serve everything from the cache or if you want to serve everything from the network or maybe something in in in in between, whatever.

Danny Moorkerke [00:45:16]:
So, basically, it's just, yeah, a lot of scripts and a lot of event handlers that you use, for that. Like, for example, a push notification is also an event that is raised. So you, you you put an event handler for the push event. The background fetch is also an event, and background sync, they're all events. So a lot of it is just event based.

Dan Shappir [00:45:40]:
Like I said, the easiest, I think, way to think about it is, as a as a proxy, but instead of running somewhere out in the cloud, it's running locally on your device.

Danny Moorkerke [00:45:53]:
Mhmm.

Dan Shappir [00:45:53]:
So all the network all the network goes through that, and it can and it, you know, has total insight into the actual content going back and forth, and it can pretty much do whatever it wants with the requests that are for that for the page's own domain. That's that's

Danny Moorkerke [00:46:12]:
the Yep.

Dan Shappir [00:46:13]:
That you're willing to note. So if you're making request to 3rd party stuff, that does not go to the service worker.

Danny Moorkerke [00:46:21]:
It does. It does.

Dan Shappir [00:46:22]:
Oh, it does go to the service worker?

Danny Moorkerke [00:46:23]:
Yeah. Yeah. Yeah. It it it does. I think what you're referring to is that the servers worker can only control, its own domain. It cannot control any other domains. There are some,

Dan Shappir [00:46:37]:
just how

Danny Moorkerke [00:46:38]:
it would be right now where you

Dan Shappir [00:46:39]:
can confused on that. Sorry. Yeah.

Danny Moorkerke [00:46:40]:
Yeah. Yeah. So for example, what you can do is if you have, Google Analytics, for example, I always had that when I, when it was trying to fetch the Google Analytics script that it would just give an error, and then it wouldn't work offline anymore because it would would give an error. So what I did at a certain point, I would just fetch the script and also store that in the browser cache. So if you have third party scripts, you can also, cache those, and then the service worker can also, yeah, serve those while you are offline. And that's very important because, you know, when when if you want your app to work offline and there is, like, an error in there and, you know, the the worst thing is if you have an error in your index page is like the first page, that it serves. If there's something wrong in there, it won't work. It will give you an error.

Danny Moorkerke [00:47:28]:
It won't serve the page, and your whole, offline functionality is gone.

Dan Shappir [00:47:33]:
Yeah. This is one of the those really annoying things. Like, for example, if I go on a flight and, you know, I'm reading something interesting at the airport just before the flight, you know, bores, and then I bought the flight and I want to keep on reading, but the pages but I because I switched between apps or something, the browser decides it has to reload the tab, and it can't because I'm in airplane mode or whatever, and that's gone. And you're thinking, hey. It's just text. Why can't I see what was there before? But I can't. And with service worker, it's so easy.

Danny Moorkerke [00:48:11]:
It is. It is. Yeah. It happens to me all the time as well. I I I use Safari browser to put it in the reading list, and it always or or like 9 times out of 10, it just refreshes for no reason, and then it's it's not stored right or something. I don't know. But, yeah, that's that's like you said. It's another, very nice use case for service worker.

Danny Moorkerke [00:48:30]:
You just put a button on on on your pages if you haven't already cached them and then, put a button like read offline or something. That's, yeah, that's also something that you can do with a service worker.

Charles Max Wood [00:48:42]:
Yeah. It's it's interesting because, so top endevs.com, for example, it it uses import maps. Right? And so a lot of the Mhmm. A lot of the scripts are being pulled from a CDN somewhere instead of being loaded up by my own domain. And so what you're telling me is that it can capture and cache those so that, yeah, when somebody comes back around, the page still works even though that's third party stuff. The Yep. Yep. The other example I'm thinking of is, I've played with the idea, and this is on another app that I built, several years ago, played with the idea of allowing people to essentially put together their own podcast feeds out of other third party, audio.

Charles Max Wood [00:49:28]:
And so, for example, you know and I I the idea was to put a plug in into, like, Chrome, and so then it's I'm on this page. It has some audio or video that I want to add to this feed, and so I can, you know, click something in there. But then it would load it up on a on the page for the actual app. And so what you're telling me is I can cache those too even though I'm not hosting them and they're not under my own domain.

Danny Moorkerke [00:49:51]:
Yeah. Yeah. Yeah. You can you can you can just fetch it. You can the the you can let the the service worker fetch anything you want and then store the response object in, in the browser cache. That's that's really, really no problem. And and another thing, what I also use it for I can also put that in the chat, by the way. Another demo app that I built some time ago is that also uses a, a readable stream.

Danny Moorkerke [00:50:15]:
So, and that that's something that I started working on again because now with the, with the cross document view transitions, this could be very handy. If you have cross document view transitions, you need to make sure that your pages load very fast because, otherwise, if you click a button or you click a link and you have a transition and it takes, like, 2 seconds, you know, that really doesn't look good. So, couple of years ago, I'm also I put it in the chat now. It's also a demo app, very simple, that uses a readable stream to serve the responses. So what it does is, everything is split out in a header, a footer, and a content. And then what the browser or what the service worker does is it intercepts all the requests. And then what it does, it's, it streams the response back to you, which stitches it back together from the header, the content, and the footer. And that allows you to have a multi page app that is, well, nearly as fast as a single page app because it's it it streams the content, to the browser, and then the browser stream in partial, which is insanely fast and can stream everything.

Danny Moorkerke [00:51:27]:
And, yeah, you can basically have a multipage app with a service worker that's just as fast as a single page, app.

Charles Max Wood [00:51:35]:
Sounds a lot of like what Turbo does.

Danny Moorkerke [00:51:39]:
Yeah. I think it's similar. I think it's similar. I heard that term before. Yeah. I think I think they also do something like, like that. Yeah. Yeah.

Dan Shappir [00:51:48]:
If we can get some of our listeners to just try out this stuff, you know, go into your page, look, browse around, try it out, get inspired, and actually try it out. I think I think we've done it. We've done it really for the web.

Danny Moorkerke [00:52:02]:
That would be wonderful. Yeah. Yeah. Yeah. Yeah. Yeah. That's also what I consider my job to educate people on on what is available, what you can already do with, with web apps, today because there is yeah. Like, there is so much that you can already do.

Danny Moorkerke [00:52:19]:
I mean, even if you don't want a PWA, you don't want people to install your app, you know, really with a with a icon to their home screen, at least make sure that your app works offline, that that when, you know, whenever they go to you. And not even, because people, they tell me, yeah, I have this chat app, and and there's no point for it to work offline because you cannot chat when you are offline. Of course, you can. But I I I I've been in so many situations, you know, you you you're in a parking garage or in a building or you're in some rural area where you just do not have a network maybe for 30 seconds or a couple of minutes. I mean, that is my definition of offline. It's not like totally offline, but it's for those situations where people have a bad network. They're in a parking garage or something. You should make sure that your web app also works in those, those conditions and that they don't get this ugly dinosaur screen that tells them that they're offline.

Danny Moorkerke [00:53:16]:
There's there's really no need for that. It's not something that, that that that native apps do and that web apps shouldn't do either, I think. So at least get the service worker running.

Dan Shappir [00:53:28]:
Well yeah. You've got you've you've got you've let's say a user filling this big form and then clicks, submit or something. And because they're walking around, so the I don't know. They move between 2 cell towers or something, and they lost connectivity for a second or 2. You know, that that shouldn't kill that form submit.

Danny Moorkerke [00:53:50]:
No. No. Exactly. But that's what happens all the time.

Charles Max Wood [00:53:54]:
Well, the other the other thing is you're talking about a chat or something that maybe it might be time sensitive. You could also simply just put some intelligence around it. Right? Because at this point, it's just JavaScript calling an API in your browser.

Danny Moorkerke [00:54:08]:
Yeah.

Charles Max Wood [00:54:09]:
Says, hey. You were offline for more than 5 minutes. Do you still want to push this chat

Danny Moorkerke [00:54:14]:
post? Yep. Yep. Yep. For example, or you could maybe store a couple of messages and then send them later. Might not always make sense, but that's at least something that that that you can do. And, also, you know, when, when you have a service worker, you already have all your assets cached, and people are on a bad network. They don't need to download that anymore because it's already there. So they Oh, yeah.

Danny Moorkerke [00:54:40]:
It's

Dan Shappir [00:54:40]:
it's Yeah. That's completely true, but I want to emphasize that even though you get fine grained granular control over caching with service worker, that's not the justification to not put proper, cache headers on your stuff.

Danny Moorkerke [00:54:58]:
So Of course. No. You should always. Always. Of course. Yeah. Of course. But what I mean is that, you know, if you are on a bad network and people already visited your app one time, that the assets are already there.

Danny Moorkerke [00:55:13]:
So they don't need to download these, again. So you can use that that little network that you have. You can use it for more important stuff.

Dan Shappir [00:55:23]:
Mhmm. Yeah. For sure.

Danny Moorkerke [00:55:25]:
This one.

Dan Shappir [00:55:25]:
The the amount of times that, you know, let's say I'm at the airport. I you know, I'm late for my, you know, I'm late for my flight, or I'm worried that I'll be late for my flight, but it's I'm overseas on a data plan. Connectivity is shitty. I try to to check what's going on, and I'm having frustrating problems trying to get the, air line website to load. You know? That's happened too often. Let's put it this way.

Danny Moorkerke [00:55:54]:
Yeah. Yeah.

Charles Max Wood [00:55:55]:
Yeah. Yeah. I'm sure.

Danny Moorkerke [00:55:57]:
I I I had the same thing. It's, I was in the, last weekend. I was with my wife at IKEA to to pick up something. So we were at the pickup point down in the parking garage. And then I wanted to, I was checking the my my news newsletter. I got a couple of new subscriptions. So I wanted to go to the member list, and I had to do some filtering. So I clicked the filter button, and then this dialogue screen comes up.

Danny Moorkerke [00:56:22]:
But it's initially, it's empty. There's not even a button there to close it. So I was there for 2 minutes with this filter screen that, you know, blocks, like, more than half of the screen, and I couldn't even click it away because it was still loading all the stuff. It was loading everything that is inside. Yeah. Of course, this is just bad programming. They should have put the button already there and at at least tested it on a slow network. But, if you already have that, you know, framed out with with a server worker, that stuff wouldn't happen.

Dan Shappir [00:56:54]:
I have to say that in you know, again, going to our initial conversation about native apps versus web apps, even without the PWA, stuff, a lot of times, web apps are just better. For example, I've seen a lot of news apps that when you go to, let's say, some news article, until they load everything, they show nothing. So until it finishes downloading the the largest ad or something, you basically can't read anything. And this is something the web has solved, like, ages ago. So it's it's so frustrating. Sometimes I I I just wish that, you know, that instead of using their native app, I could just use their web app because sometimes you can, but in lots of cases, you can't. Yeah. Yeah.

Dan Shappir [00:57:45]:
Frustrating.

Danny Moorkerke [00:57:47]:
Yeah. Yeah. Yeah. I do the same thing. I I, you know, sometimes I just refuse to go to the, to the native app. But for example, the other day, I I also write articles on Medium. So the other day, somebody, responded to one of my articles, and then I wanted I was sitting on on on the couch at home with my phone, and I wanted to respond. But I couldn't do it because then you have to go to the native app, which is, I think it's about 84 and a half megabytes, just to fill out a form to write a comment, which is simply not of course, it's possible, but it's something that they want you to download the, the native app for, which is ridiculous, of course.

Danny Moorkerke [00:58:29]:
But that also feeds the idea, I think, to to end users and maybe to developers to a certain extent that web apps are just bad. They're inferior. They're not as good as as native apps, which is, of course, not true. But because a lot of stuff is in native apps that is not in web apps, while it could be or maybe it's deliberately not there, people really get the idea that web apps are inferior. And that's that that's really a shame, I think, because it doesn't have to be that way.

Charles Max Wood [00:58:59]:
Yeah. So so are there any things that the native apps do that the, PWAs don't like? And and I'm even talking about experience things, like, for example, your web app does have to, say, ask for permission to use your camera and microphone before it works as opposed to in a native app. It just kinda does it without asking you.

Danny Moorkerke [00:59:23]:
Yeah. Yeah. Those are a couple of things. Well, for example, the I I think the the main thing that that hinders web app is the install experience, and that's also something that Apple Apple refuses to implement, properly. There is a browser API that allows you to, to trigger that install screen. And like I said before, in Chromium browsers, you can even have, like, a a a better screen with screenshots and a description and the name of the app, all the nice stuff that makes it look more like you're installing a native app. Apple doesn't do that. You have to go to the share screen and scroll all the way down, and then there's this add to home screen button.

Danny Moorkerke [01:00:04]:
I think that that's the main thing that hinders us. But for the rest, yeah, it's stuff like, I I think there's a couple of background. I think native apps can do some more stuff in in the background. I'm working also on a WebRTC app, that you that you can it's a bit like, like WhatsApp, that you can make calls to each other. That's something a web app cannot do. You cannot have, like, a, somebody is calling you screen. You know, the whole screen is lighting up. Just just like you have when somebody calls you, that's something you you you cannot do.

Danny Moorkerke [01:00:42]:
And then, of course, there's a lot of bugs, things that don't really work well, especially on iOS, that is actually bothering us.

Dan Shappir [01:00:50]:
IOS is is the thing. If if let let's put it this way. If iOS forget about adding new features and capabilities. If iOS just added achieved sufficient parity with what, Chrome already provides on Android, I would be a happy camper.

Danny Moorkerke [01:01:08]:
Yep. Yep. Yeah. Me too. Me too. But still, there there is a lot of stuff that you can already use, in web apps that is still underused, like the like all the APIs. I'm I'm showing him now that that can already be used across platforms.

Dan Shappir [01:01:24]:
And and one more thing important to note, a lot of these APIs, you don't need to be a PWA to do them. Like Exactly. You know, like, you know, everything having to do with the background, you need a service worker. If you want to get added to the home screen on a mobile device, you need the, manifest. But if you just want to do something with audio or video, you don't need to be a PWA for that.

Danny Moorkerke [01:01:49]:
Not at all. Not at all. You really don't need, any any stuff, to to to be a PWA like that. Like you said, it's really the background stuff and the notifications that you really need to be, that you need to have it installed for. But for the rest, yeah, you can use everything. I I I can understand that, you know, companies that have a native app right now are gonna not gonna bet their whole business on a web app when, the install experience for iOS and Android is that different. I can understand they don't wanna do that. But besides that, there is, yeah, all all all the stuff that you can already use on, in a web app and that it doesn't even need to be a PWA for.

Danny Moorkerke [01:02:30]:
So, yeah, it's it's it's really a shame that it's so underused, all this stuff.

Dan Shappir [01:02:37]:
Yep.

Danny Moorkerke [01:02:38]:
Yep. So that's, yeah, that's that's basically what I'm trying to do to educate people and show them what is possible. I regularly post screen recordings as well on x when I take one of these demos and then, you know, run it on a device, make a recording of it, and then show what can be done. Is to educate people and show them what is already possible and what they should be using.

Charles Max Wood [01:03:05]:
Yep.

Dan Shappir [01:03:05]:
Yeah. I I wasn't familiar, for example, with the APIs for, screen capture and element capture. That's really cool.

Danny Moorkerke [01:03:13]:
Yeah. It is. But I have to say those are quite experimental, still. So, yeah.

Charles Max Wood [01:03:21]:
So we're we're recording this on StreamYard, and StreamYard does that, right, where if you hit the button, right, you can share your screen. So is that not that API that they're using here?

Dan Shappir [01:03:34]:
I don't think so. I think with WebRTC, you have the ability to, just basically just capture screen. But if you want to capture specific elements on the page, I think that's more sophisticated.

Danny Moorkerke [01:03:48]:
Okay. So I'm not I'm not aware of, being able to capture screens with WebRTC without the browser API. Are you?

Dan Shappir [01:03:57]:
I'm to be honest, I'm not exactly certain how it works, but, obviously, you've got it in StreamYard. You've got it in Google Meet. So there are quite a number of app layout

Danny Moorkerke [01:04:07]:
Okay. Yeah. Yeah. Yeah. Yeah. Yeah. Okay. Yeah.

Danny Moorkerke [01:04:09]:
In a web app, you will all you will always need to have this, it's called get display media. So navigator media devices dot get display media, that you can use to, to to get, like, a screen or a browser tab or, like, a whole display. You can also limit that with the, with the options that you can set, but you will always need that browser API, to to be able to share something, to get a video stream of of a program or a tab or the whole screen. You will always need that. But then, yeah, you you you could do something like, for example, you can, take that video stream that you get from whatever you are sharing and then put it on the canvas and then, maybe limit it or or crop it or whatever. That's also something that I'm been playing with lately. But to really, yeah, get, like, a specific thing, like, with the element capture, that that's really what you need Chrome for right now. And a lot of this stuff is, like I said, it's still, experimental in the sense that those are origin trials.

Danny Moorkerke [01:05:16]:
So you really need to get, like, an API key to, to activate it. So it's just a meta tag that you put on your, in your web app, and then it will be activated there, but it it's not activated by default in these, these browsers. And then usually what they

AJ O'Neil [01:05:33]:
do supposing that's so that they can contact you when when they change it or remove it to let you know you were about to break your site or something?

Danny Moorkerke [01:05:42]:
No. They're not they're they're not gonna contact you. It's it's really to activate it in, so it it's really just a meta tag with a name and a, a long API key, a long string that you have to put there, and then the, the API will be activated. And you basically, what they use it for is to test out stuff and to gather feedback from, from developers. So you can give feedback.

Dan Shappir [01:06:06]:
You know, the the the basic issue with the web is that once something is in, it can never be removed. Now in the past, you know, they've tried to do things by, let's say, prefixing, things with the browser names, like the web kit stuff or stuff like that. And what they it ended up being is that, those things had to be backward supported as well. So Yeah. So they essentially landed on these origin trials as the only mechanism that seems to work to give, you know, developers the ability to test things out without, being, like, tied down to a particular implementation and being able to either change the APIs or even totally remove APIs if it turns out that they were bad ideas.

Danny Moorkerke [01:07:00]:
Yep. Yep. Exactly. Exactly. And, Edge is doing something similar. They have their own origin trials, but then, whenever there's an origin trial in Chromium, that also works in Edge. So you can, yeah, just activate it and and and and play with it. It's not guaranteed that they will stay, though.

Danny Moorkerke [01:07:21]:
Sometimes they have, like, origin trials that end, and then they don't come back or they only come back when they've done some refining or technical stuff, and then they come back. And, yeah, sometimes they don't. They they think it's not worth it, or maybe the API is too, too difficult. I think it all also happened, with view transitions long ago where there was some different name for it. It wasn't called view transitions, but that was also in the origin trial. I was also playing with it, and then it went away, and then it came back under the name view transitions. And, yeah, now it's, now it's widely supported. So, yeah, that's that's basically what they use it for.

Charles Max Wood [01:08:04]:
Very cool. We're kinda getting toward the end of the time that we scheduled, but I wanna make sure that we've given everything a fair hearing. Is there anything else that we haven't touched on that people might be interested to know?

Danny Moorkerke [01:08:19]:
Yeah. Maybe quickly some APIs that are now available. Like, we haven't discussed the the the file system API. Just quickly, it it enables you, at least on desktop, to to access the actual file system of the, of the device. So on desktop, you can just, create files there, read files there. You can browse through your whole file system. And then on mobile, it's it's not available. It may be in the future, but right now, you only have the origin private file system, which is like a, yeah, like a virtual file system, so it will not correspond to so called physical files on your disk.

Danny Moorkerke [01:08:58]:
It might be in in a database or whatever. But it's also something that, that Photoshop on the web uses because it's very optimized for very fast reading and writing. But from the, perspective of your web app, it yeah. It just looks like a a file system. But that's a very nice one. And there's also the authentication. Yeah. The demo in in what PWA can do today is a bit boring because I haven't really found a nice way to show it off.

Danny Moorkerke [01:09:27]:
But the web authentication, your web auth, for sure, it enables password less authentication. So you can just Mhmm. Have, face ID or touch ID fingerprints to log in to your web app, which is, yeah, unfortunately, also still a underused one, but a very nice one.

AJ O'Neil [01:09:47]:
Well, for the 1st 10 years, it was useless. It's only in the last 18 months or so that the APIs have become stable. And even still, the documentation out there is horrible. And

Danny Moorkerke [01:09:58]:
It is. It is.

AJ O'Neil [01:10:00]:
To understand what it is, what it does, and the simple way to use it, you know, it it and many companies are capitalizing on this to try to push you through their SaaS platform, but it there there is a way, you know, there is a way to just you know, you call it with a couple of options that generates, assigned key. You send it off to the server. It verifies it with a public key, and you, you know, you're done. Mhmm. It can be very simple, but it's it's not it's not marketed as very simple. It's certainly not profitable for any of these companies that are doing the auth stuff to show you how to do it in a simple way because they want to show you the complex way so you get roped into their

Danny Moorkerke [01:10:41]:
Exactly. Version.

AJ O'Neil [01:10:42]:
So that one that one's that one's a tragedy in a lot of and and most of the features don't don't work or unreliably. Like, it was built it seems to have been built around the idea of trusted platform computing. So there's a whole bunch of stuff with attestations and keys, and AGUIDs, and all and but none of it's none of it's useful at all. You can't rely on any of it because because the because the reality of the is that anybody any any government can just spoof any of those things because they could just open up a YubiKey and get the private key up. You know, they just use the X-ray machine and soldering and you know? So it's it's it's it doesn't provide if you're trying to log a user into their email and it's just a Joe Schmo or their Twitter or whatever, yeah, it's great. But but I mean, well, sorry. The authentication mechanism is great no matter what, because what it is is it's just better than a password. But a lot of the advanced features, if you look into it, the enterprise features, none of them could be trusted at the level of a government because you can't trust that the hardware is unmodified.

Danny Moorkerke [01:11:53]:
Yeah. Yeah. I haven't looked into it that deep, but I have to say that I was playing with the, the automatic, upgrade to a passkey. So whenever you log in to a website and then the the the browser autofills your credentials, then you should be able to upgrade to a passkey. But that was kinda I still haven't figured out how that is supposed to work. And like you said, the documentation is very sparse around this. Yeah.

AJ O'Neil [01:12:22]:
I Oh, yeah. I'll I'll link a demo. I've got passkeys.js.org. And I'm gonna get the the documentation for this, in a in a better state, but I'll just throw throw that out there. Because I spent a ton of time on this. One of my clients is moving to passkeys, and and we wanted to get it in a way that would work reliably, and we ran into a couple of problems. And, you know, it ends up being really, really simple with very few caveats, but the path to learn it was frustrating. But, you know, you've got your demo there, and I I've got mine in the Git source.

AJ O'Neil [01:12:59]:
I'm I'm gonna be linking to more and better documentation as I as I firm this up for them. But, yeah, it's it's it's something where it's like, I wanna tell people go use this, but I don't yet have the resource to point them to that shows, okay, you follow these steps and these steps, and you're done.

Danny Moorkerke [01:13:16]:
Yeah. Yeah.

Charles Max Wood [01:13:21]:
Alright. Well, I'm gonna go ahead and push us to pics. Now for those of you who are new to the podcast, pics are just things we're shouting out about. We try and keep them short, try and keep them interesting, and I will let Dan go first.

Dan Shappir [01:13:35]:
Excellent. So I've got 2 picks today. My first pick is a movie that we watched. It's a movie from 2,000 and well, it's actually a movie from this year, although it seems that it came out last year originally. It's called Knox Goes Away. It's it's starring, Michael Keaton, who also, I think, directed the movie. Yes. I see that he did.

Dan Shappir [01:14:02]:
It's a crime thriller drama sort of thing, but it's just an excellent movie. I I don't wanna start telling what it's about because I'll probably spoil it. So I'm just gonna I'm going to say that, you know, just just watch it if you can. We we my wife and I both watched it, and we both enjoyed it very, very much. It's just an excellent movie. So that would be my first pick. My second pick is, I make it a point on on social media to kind of separate Mhmm. Between, my technical views and opinions and and posts and my, let's call them, political commentary or so so social, posting.

Dan Shappir [01:14:48]:
So, on x, it's almost all technical. Sometimes I I respond to stuff, but I I don't just post political stuff. I make a point of it. But on Quora, it's actually, kind of the other way around. There, most of my posts are about, you know, what's going on as it were. So if you're interested in that part of me, you can check out my account. I'll post the link in the show notes to it. Just as a point of interest, turns out that my account is relatively popular there.

Dan Shappir [01:15:28]:
Just in the past week, I've got something like almost a 100000 views there and something like almost a 1000 upvotes. So, you know, some people enjoy what I what I write. If you're interested, check it out, and, you know, I'd appreciate the feedback. And those would be my picks for today.

Charles Max Wood [01:15:47]:
Awesome. How about you, AJ?

AJ O'Neil [01:15:52]:
Well, I I'm linking to both the passkeys demo and the passkeys presentation that I gave because I I do really like passkeys. I I just wish I had a, yeah, like I said, a way to a way to say, here's the the quick and easy path, and I'm I'll have that. I'll have it. It will come, but I just don't quite have it yet. But the presentation, I kinda go through the well, I go through the happy path, but I also explain a lot of the the pit ball pitfalls and and stuff as well. But, anyway, Yeah. Then I also wanna pick Sabine Hassenfelder. I don't know if I'm pronouncing that.

AJ O'Neil [01:16:34]:
Sabine Sabine. I think that yeah.

Danny Moorkerke [01:16:37]:
Yeah. Yeah.

AJ O'Neil [01:16:38]:
She is totally getting red pilled, little by little. You know, I I I've watched her videos over the past year, and she is uncovering more and more and more. She she's a physicist over in in I I must I'm assuming by her accent that she's in Europe, but maybe she may

Dan Shappir [01:17:02]:
She's German. She's German.

AJ O'Neil [01:17:04]:
Yeah. But does she currently live in Germany?

Dan Shappir [01:17:08]:
Or I, I, well, I'm not sure where she lives right now, but she studied and worked in Germany as I recall.

AJ O'Neil [01:17:16]:
Yeah. So she's a top physicist or she seems to be a top physicist. And she's been she's been on, some of the long form podcast sites. And anyway, she got tons of great videos. Some of them I agree with. Some of them I I disagree with, but I've just been loving I well, it's terrible because she's getting so depressed over the last few months as more and more stuff comes out with hoaxes in scientific papers. And, you know, the the the foil is being peeled back. It's worse than that.

Dan Shappir [01:17:50]:
You know? Hoaxes are people being certain people being dishonest. The the bigger issue is, based on my understanding of what she's saying, is that she's kind of seeing the current situation in physics as basically the death of physics. It's like physics the the field of physics in her opinion or at least theoretical physics has kind of run into a wall. And and and she has a very pessimistic and cynical viewpoint of of, you know, how that that this field is is progressing, or should I say regressing? For example, I don't know if you know this, but the 2 Nobel Prize winners for physics this year aren't physicists.

AJ O'Neil [01:18:39]:
Yeah. She covered one of those.

Dan Shappir [01:18:42]:
Yeah. They they basically they got the Nobel in Physics for their work on AI. Oh. On neuro on on neural nets. They were like the pioneers of neural networks or something like that. And, it's kind of strange that, you know, the Nobel Prize in Physics doesn't go to physicists.

AJ O'Neil [01:19:02]:
Yeah. Well yeah. Anyway, my my point is I really like her channel. I think that, I think there's just about anybody who's interested in that sort of stuff could like it because she her viewpoints are varied. She's not towing a specific party line. She is letting herself explore and, you know, she'll criticize one thing 1 month and then come back and say I was wrong the next month. Or well, normally, it's she is pro something 1 month and comes back and criticizes the next month. But but anyway yeah.

AJ O'Neil [01:19:32]:
So I just wanna I wanna throw her channel out there because I I've been watching it, and I and I learn a lot. And I I'm very interested to see her, you know, critique a video from a year ago or from 2 years ago or whatever. And that's, yeah. Anyway, that's that's what I got. So passkeys passkeys are great. There is a happy path. It it doesn't have to be complicated. I just don't have the blog post to point it to yet.

AJ O'Neil [01:19:56]:
And then Sabina, for her her physics videos and and just her takes on things that are that are going on in the realm of science.

Charles Max Wood [01:20:06]:
Cool. I'm gonna throw in some pics of my own, and then we'll, get some from Danny here. So the first one is I was do a board game pick. The last time I got together with my friends, we played a rousing round of the game. We played a couple of rounds, actually. The game is essentially it's a really simple game. BoardGameGeek weights it at 1.24, which means it's a really simple game. It's called the game? It's called the game.

Charles Max Wood [01:20:35]:
And it's a card game

Dan Shappir [01:20:36]:
It's kind of like the band. Sure.

Charles Max Wood [01:20:40]:
There there's another variation on it, and I can't remember what it's called, but it's it's got some other simple name like that. But, you have cards that number from 1 to a 100. You've got 4 sets, 1 to a 100. And, so you you start with 4 piles. There are other ways to vary this. We start with 4 piles, 2 that start with 1 and 2 that start with a 100. I guess it's just 2 sets, 1 to a 100. Anyway, so then what you're doing is you're trying to make the cards either count up from 1 or down from a 100, and you're trying to discard all the cards onto those piles, moving up or down, and you can jump backward.

Charles Max Wood [01:21:19]:
Right? So if you're counting up, you can jump down by exactly 10. And if you're counting down from a 100, you can jump up by exactly 10. And if you can manage to, discard all the cards out of your hands playing in turns, and it's just you have so many cards in your hand and so many cards you're playing, you win. And so, anyway, it's it's kind of a nice game that we can kind of sit back and chat while we play, and there was a lot to talk about this last time. And so we were having an interpersonal talk while we figured out what to do. And sometimes you you can all there's a little bit of table talk that you can do. You can't tell people what numbers you have, and you can't give hints that specifically tell them what numbers you have. But you can tell them, for example, I would like to play on this pile.

Charles Max Wood [01:22:06]:
Right? And so then the other players, unless they don't have any other good plays, will try and leave that pile alone or things like that. And so you try and give people clues as to what you can do for the pile either, you know, not playing too far out so that you, you know, bridge a huge gap, and then you gotta figure out which other pile you can play those cards on. Or, you know, sometimes you're trying to hint to them. Hey. I can jump this one back 10, and then we can play more cards on it. So, anyway, it is a super fun game. I think usually takes us half hour to play it. You know, maybe less depending on how how hard we made the game.

Charles Max Wood [01:22:44]:
Right? Because you have more cards in your hand, that makes it easier. If you have to play more cards out of your hand, that makes it harder. And so, you know, you can vary it that way. I I think I mentioned yes or last time that I put together the AI boot camp, that is gonna be at aidevbootcamp.com. Website, I'm still working on it. I've had to fix some stuff on top end devs, so I'm hoping to have that fixed up this week. And there was a website that I wanted to pick, but I can't remember what it is, so I'll pick it next time. Danny, what are your picks?

Danny Moorkerke [01:23:19]:
Yeah. I had 2 picks, and I'd like to sneak in the third one if I have time because it's also a movie. Yeah. I was just reminded because then you mentioned the movie also and the nice movie I just saw. First one is the, I'll I'll paste it in the chat. It's the open web advocacy. This is a group of engineers, web developers. What they do is they, provide technical information to regulators, legislators, policy makers to fight the, the anti competitive stuff in our industry.

Danny Moorkerke [01:23:52]:
For example, with with Google and, with Apple, they do a lot of research. They publish a lot about this. Yeah. They get involved to to, yeah, to get rid of all kinds of anti competitive, stuff. Yeah. The link is there. Great organization. Second one I have is actually one I picked up here is the, web components compiler project.

Danny Moorkerke [01:24:20]:
What's the guy's name? It's from Owen Buckley that you also had in April, I think, on the show.

Charles Max Wood [01:24:26]:
He also commented on this episode in YouTube. So

Danny Moorkerke [01:24:30]:
okay. Okay. Cool. Because it's really, I'm I'm I'm I'm working with web components. I'm doing a lot of server side rendering with lit elements, but there was nothing like that for, for, like, for vanilla web components. So I was really happy to see that, that Owen already built something, like this. So I was quite, quite happy with that. I've been using it, and it's working, quite well-to-do, yeah, to do server side rendering for, Vanilla JavaScript, web components.

Danny Moorkerke [01:24:58]:
And the third one is the movie I just saw. I think I saw it last weekend. It's called the whale. It's from 2022. I won't give away too much, but it's it's a very simple movie. It's it's the whole movie is set, like, in one room, and I always tend to like these kind of movies. It's about a, yeah, a a man, very unhappy man who struggles with obesity. What struck me about this movie is when it came out in 2022 is the, the main star of it is Brandon Fraser.

Danny Moorkerke [01:25:31]:
And I don't know if you know him, but you've probably seen The Mummy and movies in that like he like he always played in. I always never considered him like a very good actor, but that was basically because of the movies that we played in, like like, for example, the mummy. But this is really, really impressive. He he plays this very obese guy in in in a suit, but you you can't even tell it's a suit. It's amazing. He won an Oscar for this. Great movie. Not a very happy movie, but, definitely one I would would recommend you to, to watch.

Danny Moorkerke [01:26:05]:
It's called the whale. So those are my picks.

Dan Shappir [01:26:09]:
Yeah. It was it was Brandon Fraser's comeback movie, I think, in a while.

Danny Moorkerke [01:26:14]:
It is. It is. And what a comeback it was.

Charles Max Wood [01:26:18]:
Yeah. I heard a few things about it, but I I'll have to go watch it.

Danny Moorkerke [01:26:23]:
Yeah. Yeah. It's it's it's really it's it yeah. I I loved it. I mean, the acting was really, really impressive.

Charles Max Wood [01:26:31]:
Alright. Well, I'm just gonna throw this out here. So besides the what p PWA can do dot today, if people want to contact you, maybe follow you on social media or reach out and say, hey. Can you help me with or train me on this stuff? I mean, how do they help you?

Danny Moorkerke [01:26:50]:
Yeah. Yeah. Sure. There's a form, there's a contact form on what p p PWA can do today where people can reach me. They can find me on x, Danny Mookeracker, just my name. Medium, same thing. I also write, there. And I also have a website.

Danny Moorkerke [01:27:07]:
It's a bit outdated, dennymulkarekke.com, where people can also, fund me. So I think x x would be the best way to, to reach me.

Charles Max Wood [01:27:18]:
Sounds good. Alright. Well, we'll go ahead and wrap it up. Thanks for coming. This was really great.

Danny Moorkerke [01:27:23]:
Thank you for having me. I really enjoyed it. Absolutely.

Charles Max Wood [01:27:27]:
Alright. Well, until next time, folks. Max out.