WEBVTT 1 00:00:05.320 --> 00:00:09.160 Hey, welcome back to another JavaScript jabber. This week on 2 00:00:09.199 --> 00:00:12.359 our panel, we have aj O'Neill yo. 3 00:00:12.359 --> 00:00:15.199 Yo yo, come at you live from the winter wonderland 4 00:00:15.240 --> 00:00:19.239 of Utah. Well, at least we had our first the 5 00:00:19.320 --> 00:00:22.000 first frost that I noticed. The grass is all frozen. 6 00:00:23.519 --> 00:00:25.839 Yeah. We also have Dan Shapier. 7 00:00:26.760 --> 00:00:29.679 Hello from Tel Aviv where here it's the first day 8 00:00:29.719 --> 00:00:32.640 of fall. We've essentially had the first day of rain. 9 00:00:34.200 --> 00:00:35.600 We're still wearing T shirts though. 10 00:00:36.679 --> 00:00:38.560 I'm Charles Maxwood from Top End Devs. 11 00:00:38.640 --> 00:00:38.880 Yeah. 12 00:00:38.920 --> 00:00:41.000 I had to scrape the car this morning. I didn't 13 00:00:41.000 --> 00:00:44.799 notice frozen grass. I don't live terribly far from aj 14 00:00:45.039 --> 00:00:49.960 so anyway, we have a special guest this week, and 15 00:00:51.439 --> 00:00:53.560 I am going to slaughter your name. I'm sorry, Danny. 16 00:00:53.920 --> 00:00:57.640 We have Danny Moore Kirk. Did I get anywhere in 17 00:00:57.640 --> 00:00:58.600 the ballpark. 18 00:00:58.840 --> 00:01:02.520 Yeah, somewhere around more Cadica. It's a pretty complicated name. 19 00:01:03.000 --> 00:01:07.560 It's Dutch or it's Belgian actually I think, but pretty good. 20 00:01:08.439 --> 00:01:09.719 Yeah, I'm sorry. 21 00:01:09.799 --> 00:01:12.799 I don't speak Dutch or Flemish in very little French, 22 00:01:12.879 --> 00:01:17.519 so I'll pro how it all breaks down. But yeah, welcome. 23 00:01:17.159 --> 00:01:17.640 To the show. 24 00:01:18.400 --> 00:01:23.799 We are you very much discussing down access and browser 25 00:01:23.799 --> 00:01:27.879 APIs and some of the capacity the browser gives you 26 00:01:27.920 --> 00:01:31.400 for PWA's. Before we do that, do you want to 27 00:01:31.480 --> 00:01:34.159 just inform people a little bit more about who you 28 00:01:34.200 --> 00:01:35.079 are what you do. 29 00:01:36.480 --> 00:01:40.359 Yeah, of course. Yeah. First of all, thanks for having me. 30 00:01:40.439 --> 00:01:46.560 I'm Danny Moolkaka. I'm from Amsterdam. I'm a freelance JavaScript 31 00:01:46.920 --> 00:01:52.519 what develop rice should say. Started professionally around two thousand 32 00:01:52.519 --> 00:01:55.879 and seven, two thousand and eight, and I've been also 33 00:01:55.959 --> 00:01:58.719 been messing around with a Tari home computer since I 34 00:01:58.840 --> 00:02:04.239 was a kid. I've done a lot of stuff. Worked 35 00:02:04.239 --> 00:02:06.280 a lot of time for the i G Bank in 36 00:02:06.319 --> 00:02:09.680 Amsterdam where we by on need web components, did a 37 00:02:09.759 --> 00:02:13.400 lot of work on Polymer back then and later with 38 00:02:13.479 --> 00:02:18.439 the lit framework. Currently doing a lot with web components 39 00:02:18.439 --> 00:02:21.719 and progressive web apps, and the creator of what p 40 00:02:21.960 --> 00:02:24.719 w A can Do Today, which you can find that 41 00:02:24.840 --> 00:02:28.680 What pw A can do dot Today. It's basically a 42 00:02:29.240 --> 00:02:33.120 showcase of what is possible with progressive web apps today 43 00:02:33.759 --> 00:02:36.560 and the apps itself a p w A. So what 44 00:02:36.639 --> 00:02:38.159 you can do is you can install it to your 45 00:02:38.199 --> 00:02:42.000 own device and then see for yourself what is possible 46 00:02:42.039 --> 00:02:47.080 on your device and your platform. I also publish a 47 00:02:47.199 --> 00:02:50.240 weekly newsletter called The Modern Web Weekly, where I also 48 00:02:50.319 --> 00:02:54.000 write about web components and progressive web apps in general. 49 00:02:54.560 --> 00:02:56.919 You can also find me on Medium and on X. 50 00:02:58.159 --> 00:03:01.800 So you're the guy who's still using web components, I. 51 00:03:01.800 --> 00:03:06.120 Am the one. Yeah I heard, I'm the only one 52 00:03:06.159 --> 00:03:06.919 who's still doing that. 53 00:03:07.759 --> 00:03:10.000 Well, I don't know, I don't think you're the only one. 54 00:03:10.039 --> 00:03:15.159 To be fair, No Jojo Bite does it too. That's 55 00:03:15.159 --> 00:03:15.759 at least two. 56 00:03:16.719 --> 00:03:19.599 You know, there have been a couple of of you know, 57 00:03:19.680 --> 00:03:24.319 those techno storms, debates, arguments, whatever you choose to call 58 00:03:24.360 --> 00:03:27.879 them on X and a recent, relatively recent one was 59 00:03:27.919 --> 00:03:31.000 about web components. Yet again, I think it started with 60 00:03:31.159 --> 00:03:35.759 a post that our friend Ryan Carneato wrote which was 61 00:03:36.199 --> 00:03:40.840 very I wouldn't say dismissive, but the harsh critique I 62 00:03:40.840 --> 00:03:43.879 think would be a better term of web components. But 63 00:03:44.240 --> 00:03:48.599 and then Rich Harris or another friend of ours, also 64 00:03:48.719 --> 00:03:53.120 joined the discussion, also very critical of web components. So 65 00:03:53.120 --> 00:03:55.719 so yeah, probably need to get Alex Russell on the 66 00:03:55.759 --> 00:03:56.240 show again. 67 00:03:56.879 --> 00:04:01.240 Yeah, YouTube says that there does and dozens of people 68 00:04:01.319 --> 00:04:04.680 using it. The other thing that I'll throw in is 69 00:04:04.680 --> 00:04:10.319 that I've used a few items libraries on my front 70 00:04:10.360 --> 00:04:13.280 end stuff that once I kind of cracked it open 71 00:04:13.280 --> 00:04:15.240 and piked under the hood, it's like, oh, they're using 72 00:04:15.240 --> 00:04:17.079 web components in here, and I just didn't know. So 73 00:04:17.120 --> 00:04:19.000 there are a lot more people probably that just don't 74 00:04:19.040 --> 00:04:21.000 know they're they're using them. 75 00:04:21.920 --> 00:04:23.120 Yeah. 76 00:04:23.279 --> 00:04:25.560 Yeah, but that's the thing, you know, I don't want 77 00:04:25.600 --> 00:04:28.000 to derail us to web components, but that's the thing 78 00:04:28.079 --> 00:04:32.399 the question wasn't. The discussion wasn't so much how prevalent 79 00:04:32.519 --> 00:04:36.319 web components are on the web. Rather it was about 80 00:04:37.720 --> 00:04:41.399 do web developers these days, you know, should they be 81 00:04:41.560 --> 00:04:43.959 using them? Do they like using them? Should they be 82 00:04:44.079 --> 00:04:46.759 using them if they're using some sort of framework such 83 00:04:46.800 --> 00:04:51.199 as React or Spelt or whatever. I think that was 84 00:04:51.240 --> 00:04:52.800 the main Yeah. 85 00:04:52.920 --> 00:04:56.680 Yeah, And there was a lot of criticism of web 86 00:04:56.680 --> 00:04:59.720 components because they don't really integrate quite well with the 87 00:04:59.800 --> 00:05:05.120 ex system framework like Swelter that Rich Harris built and 88 00:05:05.600 --> 00:05:10.600 React in general. There are a lot of pain points 89 00:05:10.600 --> 00:05:15.199 with integrating web components into these frameworks because, yeah, like 90 00:05:15.240 --> 00:05:19.160 the standards are taking different routes, they have different APIs. 91 00:05:19.360 --> 00:05:22.279 So that was basically what the what the discussion was 92 00:05:22.319 --> 00:05:28.240 mostly about. And yeah, I can't understand in one way 93 00:05:28.319 --> 00:05:30.319 that that it's quite hard if you have an existing 94 00:05:30.360 --> 00:05:33.959 framework to integrate these components in there that are taking 95 00:05:35.000 --> 00:05:40.680 different routes. But yeah, I wouldn't say it is impossible. 96 00:05:40.920 --> 00:05:44.279 I personally have work a lot with lit, which is 97 00:05:44.319 --> 00:05:48.199 also compiling down to two raw vanilla web components, and 98 00:05:48.240 --> 00:05:51.240 that actually works quite well. 99 00:05:51.399 --> 00:05:56.600 Yeah, but LID was specifically built, designed and built to 100 00:05:56.680 --> 00:06:00.199 work with web components. I think the majority of the 101 00:06:00.240 --> 00:06:05.160 criticism came, indeed from the fact that other frameworks which 102 00:06:05.279 --> 00:06:09.399 were not specifically designed for web components are having a 103 00:06:09.439 --> 00:06:12.839 hard time integrating with them. I think that that was 104 00:06:12.879 --> 00:06:14.920 the main source of criticism. 105 00:06:15.680 --> 00:06:17.120 Yeah, yeah, that was exactly it. 106 00:06:17.279 --> 00:06:17.439 Yeah. 107 00:06:17.560 --> 00:06:18.839 Yeah. 108 00:06:19.480 --> 00:06:24.120 Also, you know, a while back, micro front ends were 109 00:06:24.160 --> 00:06:28.319 all the rage, and then I completely stopped hearing about them. 110 00:06:28.399 --> 00:06:31.879 Now I assume people are still implementing that pattern, but 111 00:06:32.040 --> 00:06:35.079 for some reason, nobody's really talking about micro frontin's, at 112 00:06:35.160 --> 00:06:36.720 least not in my vicinity. 113 00:06:39.120 --> 00:06:41.959 No, I don't hear too much about that either as well. 114 00:06:45.000 --> 00:06:53.079 Anyway, so p WA's also yet again, I kind of 115 00:06:53.160 --> 00:06:57.199 paraphrase about p was that p WA's are the future, 116 00:06:57.839 --> 00:07:03.879 always have been, always will be and no, but I 117 00:07:03.920 --> 00:07:06.720 mean it's kind of a kind of criticism because it 118 00:07:06.839 --> 00:07:09.959 means that p w as might never arrive, because if 119 00:07:09.959 --> 00:07:19.079 they're always the future, It's it's the basic question is 120 00:07:19.480 --> 00:07:24.920 can p WAS survive Apple's attitude towards them. That's that 121 00:07:25.319 --> 00:07:26.319 the crux of the thing. 122 00:07:26.399 --> 00:07:30.319 Really, Yeah, I think that's that's the million dollar question 123 00:07:30.879 --> 00:07:33.839 right now. Yeah, it's it's it's like Apple is still 124 00:07:34.199 --> 00:07:39.120 actively frustrating the development of p w as or basically 125 00:07:39.160 --> 00:07:41.920 there's a lot of browser APIs that they still don't do, 126 00:07:42.000 --> 00:07:46.399 not support on iOS. At least here in the EU, 127 00:07:46.720 --> 00:07:50.079 things are changing a little bit with the digital market acts. 128 00:07:50.199 --> 00:07:53.800 There's at least some movement in the direction that Apple 129 00:07:53.839 --> 00:07:57.519 will be forced to change their ways, but that might 130 00:07:57.560 --> 00:08:00.279 take some quite some time before that happened, if if 131 00:08:00.319 --> 00:08:03.560 it will ever happen. I do think in the end 132 00:08:03.600 --> 00:08:06.360 it will, but it might take quite some time, just 133 00:08:06.399 --> 00:08:09.920 like with Microsoft in the nineties. But yeah, that is 134 00:08:10.000 --> 00:08:14.639 still a big issue, the lack of parity between between 135 00:08:14.639 --> 00:08:18.920 the Android platform and the iOS platform. But that is 136 00:08:18.959 --> 00:08:21.360 still something that will need to change in order for 137 00:08:21.759 --> 00:08:26.519 PWAs to really be the future. Yeah, although I think 138 00:08:26.519 --> 00:08:28.439 it's not the only ones. I think we should also, 139 00:08:28.600 --> 00:08:32.440 you know, hold up a mirror to ourselves as developers. 140 00:08:32.480 --> 00:08:36.039 This is also something that I write frequently about, is 141 00:08:36.080 --> 00:08:40.080 that we should also build better web apps because right now, 142 00:08:40.120 --> 00:08:44.159 if you look, there's so many web apps that their 143 00:08:44.200 --> 00:08:48.519 only job is to promote the native version of themselves. 144 00:08:48.919 --> 00:08:51.879 For example, if you go to LinkedIn nowadays, the first 145 00:08:51.919 --> 00:08:54.240 thing you see is like this big app banner that says, 146 00:08:54.360 --> 00:08:56.919 go to our native app, don't use our web app, 147 00:08:57.320 --> 00:09:01.320 go to our native app, and then the web app 148 00:09:01.360 --> 00:09:04.720 is just basically a dumped down version of the native app, 149 00:09:04.759 --> 00:09:09.039 which is really unnecessary because a lot of stuff that 150 00:09:09.080 --> 00:09:11.759 these native apps can do, web aps can do just 151 00:09:11.799 --> 00:09:15.120 as well, even worse. A lot of times, when you 152 00:09:15.200 --> 00:09:18.559 go to a native version of some app, it doesn't 153 00:09:18.600 --> 00:09:22.759 offer you anything extra that the web app cannot do. 154 00:09:23.320 --> 00:09:25.720 So I think we as web developers should also start 155 00:09:25.919 --> 00:09:30.159 just spitting out web aps that are only there to 156 00:09:30.279 --> 00:09:34.720 promote native apps and really start using these browser APIs 157 00:09:34.759 --> 00:09:36.720 that we have at our disposal nowadays. 158 00:09:37.159 --> 00:09:40.039 To be fair, I don't think it's a developers. I 159 00:09:40.080 --> 00:09:43.559 think it's the marketing department. The way that I like 160 00:09:43.639 --> 00:09:47.759 to put it is that when you're a web application, 161 00:09:48.159 --> 00:09:50.480 then on a mobile device, you're like a guest in 162 00:09:50.480 --> 00:09:54.559 a hotel. On the other hand, when you're a native application, 163 00:09:54.720 --> 00:09:59.200 it's like somebody renting the apartment. It's like a much 164 00:09:59.279 --> 00:10:05.559 more last in permanent relationship. The whole process of going 165 00:10:05.639 --> 00:10:09.840 to the store, downloading the app, installing it, getting an 166 00:10:10.080 --> 00:10:16.200 icon on the desktop. That's a much more permanent relationship. 167 00:10:16.240 --> 00:10:20.320 And that's what the marketing people want, uh. And they 168 00:10:20.360 --> 00:10:25.120 want to be able to push notifications, which you know, 169 00:10:25.320 --> 00:10:28.200 I'm not sure can you now do this on iOS 170 00:10:28.320 --> 00:10:29.240 or not? For a long time? 171 00:10:29.279 --> 00:10:31.120 You can for a long time you putdn't. 172 00:10:31.840 --> 00:10:38.240 I really hope that that changes the conversation. If if 173 00:10:38.279 --> 00:10:43.799 iOS can do that, then then maybe. But but that's 174 00:10:43.840 --> 00:10:44.440 that's the thing. 175 00:10:44.519 --> 00:10:44.720 Now. 176 00:10:44.840 --> 00:10:49.919 What they're what they're ignoring is the fact that people 177 00:10:49.960 --> 00:10:53.840 don't like installing apps. So you might prefer that people 178 00:10:53.879 --> 00:10:56.559 install your app, but the likelihood that they're in that 179 00:10:56.600 --> 00:11:00.039 they're install your app is actually very low. So you 180 00:11:00.039 --> 00:11:03.679 should try to make the most of your shorter term 181 00:11:03.840 --> 00:11:07.080 web based engagement that you have with them and make 182 00:11:07.120 --> 00:11:10.000 them repeat visitors. And if what you built as a 183 00:11:10.000 --> 00:11:13.399 web app is a PWA and the browser notices that 184 00:11:13.440 --> 00:11:16.519 you visit again and again, it would actually offer you 185 00:11:16.600 --> 00:11:19.559 to install an icon on your desktop, and like you said, 186 00:11:19.559 --> 00:11:23.159 you can now start sending push notifications. So it's actually 187 00:11:23.639 --> 00:11:26.919 a better way of getting onto the device. But I 188 00:11:26.960 --> 00:11:29.879 think that a lot of marketing managers just are not 189 00:11:30.039 --> 00:11:31.919 aware of this now. 190 00:11:31.960 --> 00:11:33.919 They are not, they are not. And I also see 191 00:11:33.960 --> 00:11:36.919 some role for developers in there to educate these these 192 00:11:37.279 --> 00:11:41.000 these marketing managers that these things are now available on 193 00:11:41.039 --> 00:11:43.320 the web. I mean, I can understand if you're not 194 00:11:43.399 --> 00:11:46.720 gonna that you're not gonna move all your stuff from 195 00:11:46.799 --> 00:11:50.519 native apps right now to web apps because you still 196 00:11:50.519 --> 00:11:53.759 have a lot of lack of support on iOS. But 197 00:11:53.840 --> 00:11:57.159 for example, if I look now at the the the 198 00:11:57.240 --> 00:12:02.559 PWAs that action Instagram have, you have perfectly fine functioning 199 00:12:02.639 --> 00:12:06.279 p w as until you turn off the network. When 200 00:12:06.320 --> 00:12:09.720 you try to make them work offline, it doesn't work anymore. 201 00:12:09.759 --> 00:12:11.559 You refresh the page, you get nothing. If you go 202 00:12:11.639 --> 00:12:14.600 to t X on the native app, it will just 203 00:12:15.320 --> 00:12:18.000 keep giving you your feet. Of course you won't have 204 00:12:18.080 --> 00:12:20.440 any new stuff, but you can still still use it 205 00:12:21.600 --> 00:12:24.399 on X. That's not the case because if you turn 206 00:12:24.480 --> 00:12:29.080 down the network or you you disconnect the network and 207 00:12:29.120 --> 00:12:31.120 you try to start up the app, it will not 208 00:12:31.240 --> 00:12:34.480 give you anything. There's nothing, So at least that's something 209 00:12:34.519 --> 00:12:37.759 that we yeah, that should be improved and that we 210 00:12:37.799 --> 00:12:38.840 can use right now. 211 00:12:39.879 --> 00:12:43.559 Yeah, Cache APIs and various storage APIs have been around 212 00:12:43.600 --> 00:12:45.360 for a long time on all platforms. 213 00:12:45.559 --> 00:12:46.000 Yeah. Yeah. 214 00:12:46.279 --> 00:12:50.600 And also want to point out is that the mobile 215 00:12:50.639 --> 00:12:53.519 platforms have an incentive to make you go through the 216 00:12:53.600 --> 00:12:54.440 App store as well. 217 00:12:55.519 --> 00:12:57.799 Oh absolutely, absolutely, Yeah. 218 00:12:57.919 --> 00:13:00.480 So that's just another reason why they may or may 219 00:13:00.480 --> 00:13:04.039 not be jazzed I guess about, you know, giving you 220 00:13:04.080 --> 00:13:05.279 the kind of support you want from heal. 221 00:13:05.519 --> 00:13:05.720 Yeah. 222 00:13:05.799 --> 00:13:09.240 We spoke about this on several I think on on 223 00:13:08.679 --> 00:13:12.759 on an episode with Bruce Lawson that we had him 224 00:13:12.919 --> 00:13:17.960 as a guest to talk about how mobile platforms and 225 00:13:18.039 --> 00:13:22.440 iOS in particular Apple and iOS in particular try to 226 00:13:23.279 --> 00:13:25.600 you know, kind of stammy the whole concept of p 227 00:13:25.799 --> 00:13:29.279 w as just in order to preserve their their store 228 00:13:29.320 --> 00:13:32.440 based revenue stream. It's like what it's like a thirty 229 00:13:32.960 --> 00:13:36.440 cut on every app based or somethings like that. That's 230 00:13:36.480 --> 00:13:39.440 that's insane, you know, why billions of dollars? Why would 231 00:13:39.480 --> 00:13:41.120 they give it up if as long as they have 232 00:13:41.159 --> 00:13:41.720 a choice. 233 00:13:42.360 --> 00:13:45.080 Yeah, yeah, I think that's that's the main intentive for them. 234 00:13:45.120 --> 00:13:47.240 It's just the revenue streams that they get from the 235 00:13:47.399 --> 00:13:50.600 from the app stores and the control that they that 236 00:13:50.679 --> 00:13:53.000 they have. I understand that they're not going to give 237 00:13:53.039 --> 00:13:57.360 it up like that. Yeah, let's hope maybe Apple and 238 00:13:57.639 --> 00:14:00.200 Google will find a new business model there with with 239 00:14:00.279 --> 00:14:03.200 web apps. Maybe that will finally give them the incentive 240 00:14:03.320 --> 00:14:08.240 to to move toward webaps or Yeah, otherwise, I think 241 00:14:08.279 --> 00:14:11.399 it's the only legislation that will force them in the end. 242 00:14:12.080 --> 00:14:13.159 I think that's the way. 243 00:14:13.240 --> 00:14:16.200 It's maybe, though, it's worthwhile to backtrack a little bit 244 00:14:16.279 --> 00:14:19.679 and kind of explain the difference between a p w 245 00:14:19.960 --> 00:14:22.759 A and a regular old web app, Like what's the 246 00:14:22.879 --> 00:14:25.879 what makes so what transforms a web app into a 247 00:14:25.879 --> 00:14:26.519 p w A. 248 00:14:28.679 --> 00:14:31.639 Basically, there are two things that that are like the 249 00:14:31.679 --> 00:14:34.360 pillars of a p w A, which is the manifest 250 00:14:34.360 --> 00:14:38.039 dot Jason file, which is just a metadata file that 251 00:14:38.120 --> 00:14:41.399 describes the items that that will be added to your 252 00:14:41.399 --> 00:14:45.639 home screen whenever you install the the app. You can 253 00:14:45.679 --> 00:14:47.840 also define other stuff in there. You can define the 254 00:14:47.919 --> 00:14:53.080 name in there, you can define the background color. In 255 00:14:53.360 --> 00:14:56.039 Chromium browsers, we also now have what they call the 256 00:14:56.200 --> 00:15:00.679 Enhanced Install UI. So what that means is whenever you 257 00:15:00.720 --> 00:15:03.200 go to a Chrome browser, like atro Chromium or Opera 258 00:15:04.159 --> 00:15:07.720 on the right in the address bar. When the app 259 00:15:07.759 --> 00:15:10.440 can be installed, when it has a manifest dot jason file, 260 00:15:10.519 --> 00:15:13.759 there's icons in there. You can click it and then 261 00:15:13.759 --> 00:15:17.240 you can install it to your device. You can also 262 00:15:17.440 --> 00:15:21.559 put some screenshots in there nowadays for Chromium browsers, So 263 00:15:21.879 --> 00:15:25.720 whenever you click that button to install the app, you 264 00:15:25.879 --> 00:15:30.840 get a screen that is more like installing the UI 265 00:15:30.919 --> 00:15:32.879 that you get when you install a native app. So 266 00:15:33.000 --> 00:15:35.279 you can see a nice name there, you can see 267 00:15:35.320 --> 00:15:38.200 a description there, and you can see some screenshots that 268 00:15:38.279 --> 00:15:42.399 are different for desktop and mobile. Those are also the 269 00:15:42.440 --> 00:15:46.759 things that you can define there. You can define short 270 00:15:46.799 --> 00:15:50.720 cuts also in the manifesto jason file, which is for example, 271 00:15:50.759 --> 00:15:54.080 on an Android device, if you push and hold the icon, 272 00:15:54.240 --> 00:15:57.759 then like a shortcut menu will pop up and then 273 00:15:57.799 --> 00:16:01.600 you can go straight to some pages in your PWA. 274 00:16:02.639 --> 00:16:05.200 Those are some of the things that you can define 275 00:16:05.200 --> 00:16:08.519 in the manifest adjacent file. And then the other thing 276 00:16:08.600 --> 00:16:11.759 is the service worker, which is a special kind of 277 00:16:11.840 --> 00:16:16.159 web worker that sits, as it were, between the network 278 00:16:16.240 --> 00:16:18.519 and your app. So what it can do. It can 279 00:16:18.600 --> 00:16:22.879 intercept the network requests and it can also cash, so 280 00:16:23.000 --> 00:16:26.679 it can cash assets like style sheet, scripts, images, you 281 00:16:26.759 --> 00:16:31.600 name it. It can also cash whole pages or whenever 282 00:16:31.720 --> 00:16:34.759 you install the web app, you can just give it 283 00:16:34.879 --> 00:16:40.240 a list of routes and URLs that it will then 284 00:16:40.279 --> 00:16:43.960 all visit and then it will cash the resulting HTML 285 00:16:44.279 --> 00:16:46.639 or the image or the script or the style sheet 286 00:16:46.759 --> 00:16:50.799 or whatever. Then you can define a fetch handler in 287 00:16:50.799 --> 00:16:55.080 the air that can just decide whenever you go to 288 00:16:55.159 --> 00:16:57.519 the network what it should do. So, for example, you 289 00:16:57.519 --> 00:17:01.559 can have it serve everything from the cash and then 290 00:17:01.639 --> 00:17:04.400 it can after that you can do an additional request, 291 00:17:04.440 --> 00:17:08.680 for example, to get any stuff that is new, or 292 00:17:08.720 --> 00:17:11.920 what you can do is, for example, you can let 293 00:17:11.960 --> 00:17:14.759 it always go to the network, and whenever that fails, 294 00:17:14.880 --> 00:17:19.400 it can serve content from the cash. The service worker 295 00:17:19.440 --> 00:17:23.559 also takes care of push notifications. So whenever, even when 296 00:17:23.559 --> 00:17:26.000 your device is or when your app is not running, 297 00:17:27.799 --> 00:17:32.160 whenever a push notification arrives, the operating system will wake 298 00:17:32.240 --> 00:17:35.160 up the service worker, and then the service worker will 299 00:17:35.200 --> 00:17:38.519 take care of receiving the push notification and then showing 300 00:17:38.920 --> 00:17:44.519 a notification on your screen. And yeah, other stuff like 301 00:17:44.799 --> 00:17:48.319 background sync is also something that is doing. So for example, 302 00:17:48.400 --> 00:17:52.119 if you have a form on your web app and 303 00:17:52.279 --> 00:17:54.720 the network is gone and you want to send the form. 304 00:17:54.839 --> 00:17:58.720 What it can do is that the service worker can 305 00:17:58.759 --> 00:18:03.359 intercept that request that post requests from the form. It 306 00:18:03.359 --> 00:18:07.000 can storage somewhere maybe in index TV, and then whenever 307 00:18:07.079 --> 00:18:10.160 the network comes back, there will be a sync event 308 00:18:10.279 --> 00:18:13.240 will be fired, and then the service worker can send 309 00:18:13.240 --> 00:18:16.319 that request. For example, I also use that for Google 310 00:18:16.359 --> 00:18:19.680 Analytics or even when people are offline, I can get 311 00:18:19.720 --> 00:18:24.319 that analytics data there as well. And it can also 312 00:18:24.400 --> 00:18:29.400 do background fetch, which is very interesting for podcast apps 313 00:18:29.400 --> 00:18:34.160 for example. So normally in a webpap, when you download, yeah, 314 00:18:34.240 --> 00:18:37.279 when you download stuff in a web app and you 315 00:18:37.319 --> 00:18:40.640 close the webpap, then your download is gone. But now 316 00:18:40.680 --> 00:18:44.839 with background fetch, that download can continue in the background. 317 00:18:44.880 --> 00:18:47.519 So you can just switch off your web app, the 318 00:18:47.599 --> 00:18:51.359 download will continue and then whenever you activate it again, 319 00:18:51.480 --> 00:18:54.759 the download will be will be ready for you. So 320 00:18:54.839 --> 00:18:58.400 those are the two main things. The service worker that 321 00:18:58.480 --> 00:19:01.440 takes care of all the network stuff, that intercepts network 322 00:19:01.839 --> 00:19:05.039 requests and cash your stuff for you. And the manifest 323 00:19:05.079 --> 00:19:07.880 ob Jason file, which is the metadata file that describes 324 00:19:07.920 --> 00:19:12.079 the icons, the callers, uh, the name and stuff like that. 325 00:19:12.880 --> 00:19:15.480 Okay, I want to jump in here, because you you 326 00:19:15.599 --> 00:19:17.519 kind of pushed a couple of my buttons and I 327 00:19:17.799 --> 00:19:20.799 don't I don't know if you knew this, but you did. 328 00:19:21.119 --> 00:19:23.480 So I have a couple of things that I'm kind 329 00:19:23.480 --> 00:19:26.799 of looking at, and this is specifically with the caching. 330 00:19:26.440 --> 00:19:31.240 And the offline download. I can't remember what you call it, but. 331 00:19:32.680 --> 00:19:37.559 So I've been wanting to, yeah, to give people better 332 00:19:37.640 --> 00:19:40.920 options for listening to podcasts, and I kept thinking, man, 333 00:19:41.000 --> 00:19:41.680 it should be nice. 334 00:19:41.720 --> 00:19:44.880 It was just a p w A. And then we've 335 00:19:44.920 --> 00:19:46.920 we've discussed this on other stuff. 336 00:19:46.960 --> 00:19:49.839 But the technology that I typically use on the back 337 00:19:49.920 --> 00:19:52.240 end is Ruby on Rails and they've got this nice 338 00:19:52.279 --> 00:19:55.200 Turbo Native which you can wrap around. 339 00:19:54.920 --> 00:19:58.240 A p w A and it it does pw A things. 340 00:19:58.839 --> 00:20:00.759 But even if I just wanted to do in the browser, 341 00:20:00.799 --> 00:20:04.880 there for me to have it download new episodes in 342 00:20:04.920 --> 00:20:09.480 the background and have them ready to go, so that 343 00:20:09.519 --> 00:20:12.359 if I'm offline and I'm going through the airport or whatever, 344 00:20:12.880 --> 00:20:16.720 I can still listen to those episodes on my device 345 00:20:17.240 --> 00:20:20.920 in airplane mode without internet and be good to go. 346 00:20:21.920 --> 00:20:23.880 Yep, exactly. 347 00:20:23.920 --> 00:20:27.680 And similar to that, because I'm starting to put together 348 00:20:27.759 --> 00:20:33.119 training videos and you know, I'm getting into AI and 349 00:20:33.160 --> 00:20:36.119 starting to offer those videos. But I'm also looking at 350 00:20:37.000 --> 00:20:41.039 I want to do kind of comprehensive like if you 351 00:20:41.079 --> 00:20:43.799 want a video that walks you through an API, like 352 00:20:43.839 --> 00:20:47.680 a web API or a you know, browser API, or 353 00:20:48.039 --> 00:20:50.039 you know whatever. You know, maybe I pick up something 354 00:20:50.079 --> 00:20:55.279 that's commonly used out there, like I don't know, you know, 355 00:20:55.400 --> 00:20:56.680 but it walks through. 356 00:20:56.799 --> 00:20:58.079 Hey, these are all the APIs. 357 00:20:58.119 --> 00:21:01.599 Similarly, if somebody's interested, they can say I want to 358 00:21:01.599 --> 00:21:03.559 be able to watch these ones offline, and then they 359 00:21:03.559 --> 00:21:05.119 can go and it can have those ready to go. 360 00:21:05.160 --> 00:21:08.319 And again they can just browse to the website on 361 00:21:08.359 --> 00:21:11.640 their browser and it'll just play them even though they're 362 00:21:11.680 --> 00:21:14.680 not connected to the Internet because it actively pulled it 363 00:21:14.680 --> 00:21:15.319 in when they were. 364 00:21:16.200 --> 00:21:20.960 Yeah. Yeah, that's exactly what you can do. So basically 365 00:21:21.039 --> 00:21:25.119 what it does is the service worker takes care of that. 366 00:21:25.119 --> 00:21:27.720 There's a couple of events there, like I don't know 367 00:21:27.759 --> 00:21:31.119 the exact name, it's background seeing start or something whatever, 368 00:21:31.799 --> 00:21:36.000 and it will download the things in the background. If 369 00:21:36.000 --> 00:21:38.079 you go to what PWA can do today, there's also 370 00:21:38.119 --> 00:21:41.079 a demo there that just downloads a lot of stuff. 371 00:21:41.359 --> 00:21:44.759 I think it's from Jake Archibald from some of his podcasts. 372 00:21:45.400 --> 00:21:47.880 I just did that to make it really take a 373 00:21:47.960 --> 00:21:51.119 long time. So in the meantime you can play with it. 374 00:21:51.480 --> 00:21:53.640 For example, if you have an Android device, it doesn't 375 00:21:53.640 --> 00:21:56.880 work on iOS yet, although it should be coming because 376 00:21:56.880 --> 00:22:01.359 it's already in Safari Tech Preview in the the future 377 00:22:01.359 --> 00:22:03.559 flags you can enable it. It's it's it's there, but 378 00:22:03.640 --> 00:22:06.839 it's not functionally yet, so it should be coming to 379 00:22:07.000 --> 00:22:10.680 iOS as well in the near future. Then you can 380 00:22:10.720 --> 00:22:15.599 see in the Messaging center or whatever it's called in Android, 381 00:22:15.640 --> 00:22:19.480 you can just see the download continuing and you can 382 00:22:19.519 --> 00:22:22.680 pause it. You can you know, go to flight Molde 383 00:22:22.720 --> 00:22:28.440 and then it will stop. And even if you go 384 00:22:28.559 --> 00:22:30.599 if it's if it's running in the background and you 385 00:22:30.680 --> 00:22:32.680 go back to the app, you can see that after 386 00:22:32.680 --> 00:22:35.839 a few seconds, the progress will pick up, so it 387 00:22:35.880 --> 00:22:39.440 will just continue. If it's still downloading, you can see 388 00:22:39.440 --> 00:22:44.559 the progress also, yeah, progressing. And basically what it does 389 00:22:44.640 --> 00:22:48.319 is whenever that that download is finished, it will be 390 00:22:48.319 --> 00:22:51.279 presented to the web app as a response, and then 391 00:22:51.279 --> 00:22:53.839 that response can be put in the browser cache. 392 00:22:54.400 --> 00:22:54.960 So that is. 393 00:22:55.000 --> 00:22:57.799 Basically how that that that works. It's a very simple 394 00:22:57.839 --> 00:23:01.759 system and yeah, that that really enables exactly what you're 395 00:23:01.799 --> 00:23:04.599 looking for, so you can download whatever you want in 396 00:23:05.160 --> 00:23:10.200 the background while the web pap is not running. 397 00:23:10.319 --> 00:23:15.400 Yeah, all the audio only people, I'm making all kinds 398 00:23:15.400 --> 00:23:17.720 of happy gestures and movements and smiles. 399 00:23:18.720 --> 00:23:19.960 I'm super excited about this. 400 00:23:20.079 --> 00:23:24.079 So and by the way, I'm I'm clicking around on 401 00:23:24.119 --> 00:23:26.319