Coding Blocks - Should Your Web App be a Progressive Web App (PWA)?

Episode Date: April 15, 2019

We dig into the nitty gritty details of what a Progressive Web App (PWA) is and why you should care, while Allen isn't sure if he is recording, Michael was the only one prepared to talk about Flo and the Progressive Price Gun, and Joe has to get his headphones.

You're listening to Coding Blocks, episode 104. Subscribe to us and leave us a review on iTunes, Spotify, Stitcher, and more using your favorite podcast app. Check us out at codingblocks.net where you can find show notes, examples, discussion, and a whole lot more. Send your feedback, questions, and rants to comments at codingblocks.net, follow us on Twitter at codingblocks, or head to www.codingblocks.net and find all our social links there at the top of the page. With that, I'm Alan Underwood, and I am recording.

I'm Joe Zach. I am also recording. Phew. And I am also recording, and I am Michael Outlaw. Very nice. All recording. This episode is sponsored by Clubhouse. Clubhouse is the first project management platform for software development that brings everyone together so that teams can focus on what matters, creating products that their

customers love. While designed to be developer first, the UI is simple and intuitive enough for all teams to enjoy. Best part is that Clubhouse is truly built for developers by developers. And you can tell in the way that they've sprinkled things like Git tips throughout the UI. And they even make a big point to highlight open source projects that they integrate with. Yeah, and log in and immediately see your work queue, active tasks, upcoming due dates, and your activity feed. It's easy for people on any team to focus in on their work

on a specific task or project while also being able to zoom out in order to see what work contributes to the bigger picture using the fast interface. With a simple API and robust set of integrations, Clubhouse also seamlessly integrates with the tools you already use every day like Slack or GitHub, for example,

getting out of your way. So you can focus on delivering quality software on time. Sign up for two free months of clubhouse by visiting clubhouse.io slash coding blocks. Again, visit clubhouse.io slash coding blocks to get your two free months and see why companies like Elastic and FullStory and LaunchDarkly like Clubhouse. All right. So today we're talking about progressive web applications, otherwise known as PWA or PWA. I fully expect to have a lot of fun with that term tonight.

I don't think anybody refers to them like that. Yeah. I stole it from Alan, actually. That was his joke earlier. Did you write your latest PUA? Yep. It's all about the PUAs. I just made one earlier.

Very good. I spit those things out. PUA, PUA, PUA. If you're not familiar and you haven't already shut us off for the evening or morning, we'll get to that. If you haven't already stopped listening, Progressive Web Applications, PWA, are reliable, fast, and engaging websites that meet some particular qualifications.

In this episode, we're going to talk to you about what the apps are. We're going to give you our take on those qualifications, and we'll talk about the what's and the why's. First of all, I wanted to thank MVP, Nicholas Marqueraera from the Frame Wars podcast for turning me on to PWAs a while back when we were getting

started with QIT and now I'm totally on board with them I'm going to try and sell it to you guys alright let's see if we're buying so with that let's get into our favorite portion or one of our favorite portions.

I don't think we've ever officially classified this as someone's favorite portion of the show. But it's definitely up there. It's definitely up there where we like to give everybody a say thank you for everyone who left us a review. So I'll start with iTunes. So we have Fresh Slice of Pie, Iron Lewis to you, and Vet Kid 2. Very nice. On Stitcher, we have Wesley Kaufman. Andrew sucks for taking three years.

Yes, indeed. But you did, so that's awesome. It's never too late. It's never too late. So, yes, we'll always take it. Wait, say that last one one last time. Herbiderp. There you go.

Yeah. So, thank you all for – I love that name. Yeah, it was awesome. And seriously, thank you for taking the time to write us. We super appreciate it. Got some really good reviews there. So, thank you.

Yeah, speaking of great things, I just want to mention we had a great time in Orlando Code Camp. We had a booth set up. We gave away a lot of hats, a lot of stickers. We just had an overall great things. I just want to mention we had a great time in Orlando, Orlando co-camp. We had a booth set up. We gave away a lot of hats, lost stickers. I just had a overall great time. So I wanted to say thanks to everybody for having us out there and come up to say hello. And thanks for putting up with our craziness because it got pretty crazy.

It did. And I got to say for anybody that signed up for the newsletter, some of you won't be getting an email because I don't know what you wrote in, but I couldn't read them. So there's going to be a handful of you that are going to miss out on those. So I apologize, but we won't ever be doing the handwritten signup sheet again, because that's really hard. There's a reason we all program, I think. Well, how about we say this? If you suspect that your handwriting might have been one of those that couldn't be read and you want to at least sign up for the newsletter,

head to www.codingblocks.net. You can find the link at the top right to sign up for the newsletter. Yeah, go ahead and get on in there. But, yeah, we had a really great time. Met some great people. I mean, Outlaw was in full salesman mode all day long, which was awesome. I was in my zone. Yeah, and Joe, he presented on Jamstack. I presented on Kafka.

It was a good time all the way around, I think. Donuts might have been involved. Donuts, yes. We had a great panel with the guys from Six Figure Developer. Yep, we did. So that was John, Clayton, and Nash. Had a really good time with them. So yeah, man, just overall a really great event.

Yeah, and speaking of that mailing list, just wanted to mention too that we're going to be talking about the Pragmatic Programmer book coming up. And if you haven't read that, I want to encourage you to either sign up on the mailing list or be keeping an eye out for an email because we're going to run the contest and give away a couple copies. So you can be reading along with us because it's an awesome book and it's even better to read along with people. I was so hoping that you were going to finish that and call it like the Programmatic Programmer. I was waiting to see where you were going to go with this yeah that'd be cool if we have one more thing we want to do so we met uh cory from twilio and he does a twitch stream and we told him we give him a shout out

on the show and especially now that we know his kid listens his kid's two years old and he laughs along with us so that's even better so definitely if you're into watching the live coding thing go to www.twitch.tv slash c l d u b y a so that's twitch.tv slash clw which is i i love that um that's and uh that's how you know that your dad jokes are on point when the two-year-olds are laughing right yeah it's amazing so definitely go check him out he's trying to grow his twitch audience over there really great guy we sat there and chatted for quite a while and uh yeah go go see what he's got going on and as always we'll have links in the show notes too if you need some help finding that alright and on to the meat

so what are progressive web apps in short are websites that behave like apps we can't say that anymore because every time you say that I'm like wait I didn't what did you just try to say start over what are progressive web apps oh man okay in short pwa are websites that behave like apps so

which means that they're installable they have offline support which is pretty interesting for a website uh they support things like push notifications via features like service workers which we're going to dive into and they're also in a couple of app stores now. So you can find PWAs and things like the Google Play Store, Windows Store, maybe Kindle too. I don't know. They're kind of popping up everywhere. But yeah, so they're pretty good already and they're getting better all the time. Chrome 73 just added a couple of new features, made things a little bit better. Apple has been kind of dragging their feet on some of the features. It's still a little bit awkward, I understand,

but I don't actually have an Apple device anymore, so I can't really explain what the dilly is there. Yep, all I have is a MacBook, which just kind of works because I only use Chrome. I guess Safari is probably on there somewhere. No, a terminal. I'm sure you probably on there somewhere. No, Terminal. I'm sure you're in Terminal. Terminal all the time.

Yes. So the question that I wanted to ask is why? Why a PWA? Yeah, and so I think the big versus there is really kind of the age-old question of website versus native app. So if you kind of ignore that question, say, yeah, there's times when you need a native app because you need to access something that you can't access via a website like files or maybe you got some big heavy processing. You need to do like video rendering or something. That's the time when

you need like a native application. And I kind of think for everything else, like websites are really great because they tend to work on most devices and you don't have to worry about individual app stores and all the crazy things you need to do there. So I think that's pretty much a, you know, kind of age old debate over whether native experiences are better or faster, you know, feel more natural, like all that stuff still applies. but specifically when it comes to a traditional standard out of the box website versus PWA, there are like a, a kind of a bunch of advantages. Yes. We can all kind of hop in here. Well,

I wanted to add in on the why if you were done. Yeah. Cause I had a couple of other points that I wanted to add to that. So I got some videos that I'll include in the show notes, but one of them was from a Google developer evangelist. And he said that of some of the reasons as to like why you should care about PWAs, like one of them was they had said like, here's the number, the average user installs, Well, here, let's make a game of it. The average user installs blank number of apps every day.

I can't take part in this. This was also part of a Pluralsight thing. It's part of every article and every video about PWAs because it's the most amazing stat. Yeah. Okay. It was zero. Zero new apps get installed, right right by the average user so so the reasons that they were citing for like installing an app whereas not only the con the the money cost of the app if it costs anything but the cost in terms of like the resources that it takes on the device and so a

lot of users don't bother with that but you know so while native application use is what they use the majority of on, on a given device, they might only use like one or two applications on that device. And so I think you, I want to, I don't remember what the percentage was. It was something like, you know, 87% is spent in native apps and 13% was in, you know, mobile browser. Right. But in that browser, you're going all over the place. I don't know. I could be, I know you're questioning like those numbers. So don't hold me to that number. I don't remember the number, but it was extremely offset like that. Like it, there was an extreme difference from one to the other. Right. And the point that, that, that they were making though, is that, uh, you know, your chances of getting someone to

install your app through the app store, that's probably slim because a lot of people aren't, aren't going to do it, but you have a much better chance of getting them to come to the, to your website. And if you can make your website act like that, then it's better in the, uh, the fact that you can have things like notifications are things that can draw users back to your application. And they had some stats on like how that improved it as well. Yeah. So tacking onto that, like the interesting part was what you said was true, right? Like there's zero installs on, on an average from any particular user on any given day. And so of all the applications installed on a user's device,

they broke down the stats on that. And they said, really only the top three or four are used very much at all. The rest of them like literally just taper off into no man's land. And here's the crazy part of those top 10 apps. Guess who owns all of them? Google, Google, Facebook, and Amazon is almost every one of the top 10 apps. I think it was either eight of 10 or nine of 10. So, so basically what they're saying is unless you're just some super niche app out there that, you know, I don't know, some sort of game that people will tend to play a lot, like when Candy Crush was popular, basically you're not getting hit. Right. And so that was really interesting on the flip side. So I don't know about the web app or the web usage on the phone, but they did say like app usage has gone up X percent, but web page hits have, they're like way above and beyond what a regular app is.

So even then, like, again, going back to the web page type thing, it's kind of interesting because the whole point of this PWA thing is to make it an app. So it's an icon on your desktop type thing on your home screen. But then give it the hooks like the notifications and all that stuff that, like you said, outlaw to bring you back to it. So that was really the poll. Yeah. I actually found the part of the video and I had the numbers, right? It was 13% mobile web versus 87% were apps. And there was another metric that they had in here that was like 78% of the time is spent in three in the, in the user's top three apps. So like you said, if that's Chrome, Facebook, and Amazon for shopping, right? I mean, that makes sense, right? Yep.

And if I remember right, I want to say Facebook was two of the top three. Facebook and Facebook Messenger were the two of the top three apps that are used, and that's where people spend most of their time. There was another point too, related from, this was from Windows Central. They had a different perspective on it. Like another reason why you should care about progressive web apps was that from as a developer kind of point of view,

just like, you know, we've talked in the past about like the longevity of your career and like surviving a recession and things like that, right? talked in the past about like, um, like the longevity of your career and like surviving a recession and things like that. Right. So in that kind of vein, right, they were just saying that, well, from a company perspective, right. If you have to have a choice of, Hey, let me, let me hire a Swift developer. So I'm going to have an iOS app. Let me hire a Java developer. So I'm going to have an Android app. Oh, let me hire a web developer, a full stack web developer.

So I can also have a web app. Right. And like, if you're, especially if you're a small company, right. Like that, that's an expensive proposition to have like separate developers for each one

of those. Whereas if you just focus on the PWA side, right, you could have everything all in, you know, you'd have the best of all worlds type of situation. Well, that was the other interesting thing about the PWA too that I don't know that we hit on. We talked about notifications, but you also do get access to the underlying OS features.

Like you can get access to the camera. You can get access to, you know, the microphone. You can get access to some of those other things, right? That, that you don't get with just a webpage accessing it. And so you may not have access to all the underlying hardware, but there was also, I forget some of the other ones that they talked about were like Bluetooth connectivity and things like that. So, so you do get additional features out of the box for having a PWA. So, you know, pretty cool stuff.

Yeah, I mean, you mentioned like the what earlier, you know, like you gave the quick synopsis of what it is. But the guy from Google, he had a quick analogy for it that was fire. It's fast, it's integrated, it's reliable, reliable and it's engaging i like that way of remembering it yeah it's just kind of weird it's like you can have other things that are fire that aren't necessarily yeah but that is kind of distinctive about it but a couple other things i wanted to call out too um specifically versus websites is that it works offline so that's really important for, say, a PWA like QIT, where you can download a bunch of podcast episodes and it would suck if you went through a tunnel

and all of a sudden your podcast stopped playing. Or you go on an airplane or something and all of a sudden you couldn't access because we need your data. And it doesn't work like that because luckily we've got the service worker, we've got everything cached, and so you can go ahead and queue everything up,

go on a plane and not worry about it because it works just fine when there's no internet connection. Which is kind of crazy for a website when you think about how things usually work with websites. It's very counterintuitive, but in practice it works out really well. Also, just like you mentioned, faster than typical websites. And that's because a lot of things are cached locally. You actually install some files on the person's device, so like a phone or computer. And so there's that nice little bump. And Google is fast,

and Google also loves PWAs. In fact, if you Google PWA, Progressive Web App, you'll see that most of the articles about it are actually kind of owned, and a lot of the videos done about it are actually officially sponsored by Google. They're very, very pushing this you should add very very pushing very very pushing so so why not microsoft loves it microsoft does love it too yeah as a matter of fact the plural site course that i was watching to sort of get a heads up on it i think it was called uh it was called pwa fundamentals or something like that and it was it was done by a guy that is a product manager at microsoft well i was coming again this is the take from that uh that other video that i referenced though but um the takeaway was that from the app store point of

view right like i mean historically that's been a problem for Microsoft. Like they don't have the app store that iOS and Android have had, but as companies are putting out their PWAs into the world, then they can just put that app, that PWA, that progressive web app in their app store, right? Because all it is is a pointer

to a website at that point, right? So why not? And now their app store can have like legit apps that might not have otherwise been there. Absolutely. And actually, MS Dev Show has done two separate interviews with Microsoft employees about PWAs. Interesting. I listened to both of them twice, too. Very cool.

Great episodes. Great job, guys. Also, I wanted to mention too that you can get your app in some of the app stores. I think we kind of already hit on that, but actually the Windows Store is a big one.

And I've heard that they're going through and actually starting to add some automatically. So they're just kind of crawling around with Bing or whatever. But also there's a couple other ways that you can submit your store. You can either like package up

your application and do it that way. Or I think there's actually a more streamlined approach now where you can just kind of give me your URL. And that's really nice too because if you need to do an update or something, that means you don't have to go back through approval. You don't have to do all the tests or anything because it's just a website, right? So they approve it once and it's through. And that's also something I want to kind of hit on too with the stores is, you know, Google can reject your app.

Like say if, you know, one of your competitors does a takedown or something or tries to cease and desist you or same with Apple. If like Apple decides next week that they don't like something about your application, they can shut it off. And if you've developed that in Swift, you got nowhere else to go. So that's a pretty big deal. So I think most small companies too, like you have some sort of website, like a chance. So you're probably going to want some sort of web application if you've got an application you do. So why not just do everything there and adapt it so it can also be used as a progressive web app? And then that way, if you need offline support or whatever else, and you can get that through a website and it's going to work for either experience. So why not? I don't know. I don't have a real compelling reason. We're going to dive into the

separate qualifications for PWAs and we can kind of talk about point by point, but I don't think there's a really good reason in general not to make your website into a PWA unless there's some sort of specific reason about your application. Like, well, I can't do this because business reasons. Well, what about if you want native looking applications? PWAs aren't going to give you that. Yeah, I can't care about that, though. It's funny.

I was actually having a conversation with somebody else about that earlier. Might have even been today. And it doesn't bug me as long as an app works well. I don't really care if it looks like iOS or if it looks like Android. I know that they have differences in how they do tabs and styling and all that kind of stuff. I don't really care as long as it works, right? But that is one concern that some people have. And, you know, maybe speed is an issue.

Like you said, if you have some heavy hitting things that matter, then maybe that that's a big deal, right? If you need, if you need more raw processing, then that could be one, but that's probably not going to be something that you had as a website that you'd want to turn into a PWA type thing,

right? Yeah. I mean, you're not going to write your game in this, right? Right. Yep. I'll tell you like,

uh, I've got an iPad and android phone and there's a couple apps that i use in common it's so annoying when they're different because they sometimes they have different abilities or something something's just not in the same spot here i'm sure you've had that experience with like a mobile website and the desktop website we're like where's the thing where's the thing oh let me go to uh open the desktop version in full and then you can just go down and find whatever you need the only other reason i can think of a why not is if you have a website that doesn't already adhere to like

responsiveness like it could be a pretty big undertaking to try and turn that into some sort of pwa or if there's going to be an offline mode like we were talking about it might be a bit difficult to get your thing set up in a way to where that's going to work out well yeah but i mean you should fix that anyway so that's that's a problem well i mean google kind of cited like you know it doesn't have to be an all or nothing right like you don't have to you don't have to take on the full site so they cited examples of of various companies uh where they just made portions of their site, uh, PWA. So there was an airline, I can't remember which one specifically, but, you know, to take on the entire

thing as a PWA was a bit too much, you know, too much effort, too much time, too many resources involved. But if they were able to do just like, say, uh, the, the, the post ticket purchase experience where you just want to like get your ticket and be able to see it and scan it as you're going through security, right? Like have that kind of capabilities there. Um, you know, for the like frequent flyer of that particular airline, right? Cool. Yeah. Yeah. It'd be really nice to just have saved like my itinerary, you know, if that was the only thing, then that would be great. That'd be a great thing.

Well, there is an official list of requirements that Google has published. And Google is the one that kind of coined the term and came up with it. There's a guy, Alex Russell, that kind of spearheaded the whole thing initially. Microsoft is now on board. Mozilla is big on it, too. And you'll see if you go to each one of their respective sites, there's also a few things that are like slightly different about their kind of high-level definition of what it means. And I just thought it was kind of funny.

I mean, for the most part, they all boil down to the same thing. Basically, they're websites that behave like apps, and they should work really well on different devices. I did want to hone in on what we mean by the term progressive because when I hear progressive, I still kind of think about progressive image loading or something kind of like lows and crappy and then gets better and better and better.

Like in the 90s, if you're downloading a picture of a big dog or something, then you might kind of get the top strip and it would slowly go in. Or with GIFs, it would actually kind of almost fade in in a weird way. Am I the only one that would think of progressive insurance and the price gun? Am I the only one?

Is it just me? I think it was just you. I actually had nothing in my head. So progressive, like, what does that mean? You've never seen flow in any of the like 18 billion progressive insurance. Yeah.

Yeah. I've seen them them i'm saying that didn't come into my mind at all okay well in this particular case uh progressive basically refers the overall strategy to progressively enhance the user experience based on the abilities of the device at the given time so if you don't have internet then you do whatever you can without internet and for a lot of websites, that's going to, you know, hamstring you pretty bad. But in a lot of cases, there's still things like you can do. Like you mentioned the itinerary, like you don't have to have the, you know, internet connection constantly available in order to display the last known itinerary. And hopefully

it hasn't changed in the meantime. Yeah. The airline thing's a really good example of that, right? Like you've already checked in or whatever whatever and you have your boarding pass. You shouldn't have to be connected to the internet to be able to see that boarding pass. Yep. Now, I don't know that it is one, but one that would come up as like an excellent example would be the, do you remember the cloud reader, the Amazon cloud reader? It was like reader.amazon.com with the URL. Oh, yeah, if you had a book or something. Yeah, it was like the web browser experience for Kindle. But, I mean, you could see how, like, that would be an amazing PWA if they haven't already made it one. Because, you know, once you've downloaded the book,

chances are you're not going to need to go to, you know, back out, you know, make another network connection. And so that way, if you're, like, on a subway, right, to, you know, back out, you know, make another network connection. And so that way, if you're like on a subway, right, going, you know, underground, no big loss there, right? Oh, dude, that's actually a perfect example of what the PWA is made for. And we'll get into the service workers later. But what you're talking about is like, when you think about a Kindle, it syncs your position up to the cloud, right? So as you read further into a book, like you started on page 20, you hit the subway, you come out of that thing, you're on page 50. The whole time is keeping track of that stuff locally because it knows that it has no internet

connection. And then as soon as it gets connection again, it can sync that information up to the cloud and say, hey, you're on page 50, right? So that's a perfect example of what the PWA is supposed to give you. Yep. Another example too. So we mentioned that like the internet connection is also just screen resolution. Like you may be on a big flat screen monitor, maybe on a little Blackberry or whatever. There's also other things like, you know, GPS, like GPS signal loss, just like you mentioned, like it would stink if Google maps just shut down as soon as you lost GPS signal for half a second.

It doesn't work like that. Luckily, like I think you can even like browse around the world and stuff. Um, when you're offline, like on airplane mode or whatever on Google maps and just, you could figure things out by the way, it's still useful to you. It's just not as good. And you know, the, the website basically gets progressively better as, uh, their, your abilities open up again. So, uh So I wanted to hit on some popular PWAs. Dev.to is actually one that I use all the time. It's a developer kind of blog site. If you're not familiar with it, it's a nice community,

but the, the app just works really great. And it's also great for links. That one is really nice. I mean, it's so smooth. The, the scrolling on it,

you could just, yeah. Yeah. And that's actually one that I installed on my desktop too. So that's really sharp. And actually, it gets funny to say, it gets rid of the Chrome in the browser, so things like the bookmark bar or stuff like that. And they actually have the ability to set the color of the top bar and everything. So it's just a really nice experience, and it makes it feel like an app.

Okay, so tell me this. You said that you installed it on your desktop. What exactly do you do to install this on your desktop? Yeah, so it's kind of awkward. So on a desktop computer like Windows, you go to dev.to. You've got to hit that little dot, dot, dot up at the top right. It says, like, install dev community. It's the name of the website.

Now, on a phone, it's going to be a little different. Google and Apple both do a couple things differently. I'm not really sure what Apple does anymore, but Google will actually see you going to the same site over and over again. And it'll say, Hey, this is a PWA. Do you just want to go ahead and install this on your phone? And it'll actually prompt you. And so if you, you can override it, of course, you can go a little dot dot dot there too and install it. But I just thought it was kind of interesting that it'll actually prompt you to install. And you'll see some websites too, will actually, they'll see that you're on advice and they'll give you a little pop-up that says like, Hey, did you know

we're a PWA? Just click this button, install on your home screen. So I've seen that for the phones, but I, for the life of me on the desktop, like I'm at dev.to, and I see nothing that says. Yeah, you've got to go find it. So like in Chrome, for example, you see where you have your avatar there listed, and there's three dots to the right of it? Uh-huh. If you click on those three dots, then you get the menu, and down in the bottom, towards the bottom middle, it'll say like.

Ah, install dev community. Yeah, install dev community. See, that's kind of ridiculous. In my opinion, if they want PWA to succeed and to be a thing, it needs to be something that's like a banner that pops up at the top of the screen, just like it does on a phone, right? Like on a phone, it'll be like, Hey, do you want to install this? If you want this thing to, to feel the same everywhere,

it shouldn't be some hidden menu item. It's still very new though too, right? It's not that new. No, it's not that new. If Google's one of the ones pushing it, you'd think they'd make it more front and center. You know what I mean? Yep.

It was only like version one as of last year, right? We're going to have to look this up now. I don't know what they're calling the current version. But even then, right? You guys had to tell me where to find it. Install dev community? Yeah.

No, I totally agree with you. It's a pain in the butt. You can make it more apparent. You could prompt people to do that, but nobody seems to do that. So's a pain in the butt. You can make it more apparent. Like it's, you know, you could like prompt people to do that, but nobody seems to do that. Right. I think that's pretty interesting. So it's still really uncommon on the desktop,

but I don't know. I just like the idea. I think it looks really nice. It looks cool. Like there's definitely electron apps that I install like Slack and I could just go to the websites, but I don't want to have a bunch of tabs open. Same with dev too.

Like I use dev too enough that like, I just kind of like to have it open and it looks cool. I like the logo. I just installed it. Yeah. know okay so i just double checked so i said reader.amazon.com but it's just read.amazon.com and when you go to read.amazon.com you do not get the option or at least i'm not seeing it i i'm not seeing an option to install it oh um so you know about that so a couple others quick, wanted to mention QIT.cloud, of course, that's like the app you can use for podcast discovery. Google Maps is one.

You can install that on your Windows. You know, that's great. The mobile devices doesn't really make so much sense because they've got, you know, nice native apps that work too. And PWARocks.rocks. PWARocks is a great website for finding a bunch of others. One thing I noticed when looking at a lot of the ones that are frequently mentioned, like Twitter, Uber, Instagram, Spotify, Outlook, I've tried to install them on Windows, and it just doesn't exist. And there's no other way to, like, tell you.

There's no, like, you know, special PWA icon that shows up in Chrome. The only way to know if it's supported as a PWA by Google is to go to that dot dot dot and look for that install. And if it's not there, it's not even apparent that it's missing. You're like, well, did I already install it? Am I looking in the right spot? Definitely a bad user experience. Even on iOS, though, it's really not clear if something is PWA or not.

It's not there yet, right? So, what I mean is, do you remember like early days of iPhones, right? Where like you go to a website and they're like, Google had come out with this little thing where it would like scroll up a little div and it'd be like, Hey, you could add this to your home screen. Right. So you can add something to your home screen in iOS. And if

it is a PWA app, then great. It'll, it'll be a PWA app. But otherwise, if it's not, then all it's going to do is just be a link to open up a Safari and you won't know. But like you mentioned, Twitter is one of your ones listed here. So man, I had, I had the worst time because like, I was like, Oh, cause I saw, I heard that like, oh, it's supposed to be like a better experience. I was like, oh, let me try it. So I installed, I went to Twitter because they were calling it Twitter Lite. Right. So I added Twitter to my home screen, which I already had the app.

Right. And then it would never show me the icon for the Twitter light that I had added to the home screen. All I could ever find was the other one, the app. And then if I would go to like a find and try to find it, I could find it by the name that I gave it because I gave it a distinct name. But whenever you would open it, there was no difference. I couldn't tell like, wait a minute, This looks like I just opened the other thing. And so the point I'm getting at is, well, so that's what was happening is, like, it was immediately redirecting everything back to the main app.

And so I had to uninstall the app, and then I was able to see the icon pop up, and then it would let, it would intercept that Twitter traffic. And I could, I could check it out because in, cause like the one thing that gave it away was that I had multiple accounts in the app, but not on the webpage version, the wet on the PWA version, if that makes sense. And so, you know, once I eventually figured it out, like it was, I was able to see that, oh, okay, now, now I can see that I'm absolutely using PWA because it doesn't know about the other accounts. So the point I'm getting at is like, if you want to play around with some of these PWAs, it might be helpful if you make sure that you don't are, it's an app that you don't already

have installed or it could get tricky. And so here's the thing, and this is what's interesting. This is actually part of the PWA application. And I don't know if this is in the show notes. If it is, I apologize for jumping way past. It depends on how you define your web application manifest. So there's actually a setting in the web manifest for preferred related applications. And if you set that to true and you tell it that hey if somebody clicks a link i want it to go to the native twitter app versus just stay in the pwa app and so what they have set on their pwa is it was saying yes prefer the related application which means

that anytime it hit that it was going over there so it depends on how they actually set up the metadata for their pwa and uh you know to make matters even more confusing it's my specialty uh so i heard about these apps twitter uber instagram spotify everyone said they were great experiences so i go there and on my windows machine and i can't install oh that's weird let me go ahead and run lighthouse which is a tool we'll talk about a little bit more that we'll go through and kind of grade a website. And they're all failing. All of them are failing. What is going on here?

A little bit of research. It turns out that many of these sites only give you the PWA if they detect you're on mobile. And sometimes it's enough to go up in Chrome and kind of set like i'm the pixel 2 or whatever and you know if you hit that f12 and you can kind of set your resolution and pick a device sometimes that's enough to trick it and they'll say okay here's the pwa and sometimes it's not it doesn't my question is like what the heck in the whole point is it supposed to be responsive why would you ever give me the non-pwa version if everything you told me about all these benefits and no downsides was true like how many why are so many companies just not doing those few 15 steps?

Oh, that's interesting. Yeah, because the whole point of the PWA is, hey, we had this great idea of the web where everybody could come and hit something. And then we fractured all that by having ios android windows mobile everything else and pwa was sort of solving that by bringing everybody back together so why fragment it if the whole point is to have a singular you know entry so that you can use the same thing on your phone and your desktop and whatever yeah why block the desktop that doesn't make any sense and that's kind of been my whole experience with PWA.

It's like Google kind of just stopped barely short of making a really great user experience where it's really obvious and you can see it and it's really promoted to you. They promote it to the developers like crazy, but not to the users. And the same thing from the other side. It's like you've got all these companies that are saying, yeah, we've invested this time. We've made this really great experience for users. It's PWA. It's awesome. We all love it. We're 100% behind it, but we don't give it to any

desktop users for no apparent to me reason. Hey, so I do have a question. So you mentioned the PWA rocks and we talked about this a little bit off air. They don't really have much on there that feels like real meat and potatoes type stuff, right? Yep. And one of the ones that you had mentioned at some point, it looks like it's gone from the show notes now, was Flipboard. Do you know what happened there? Like, what's the deal?

That was one of the ones, when I set the resolution on that one, it allowed me to install it, and I was able to do it on my phone too. But for the Windows version, it did not show up as a PDF. So, Spotify? You can grade them and see why the same spotify dude spotify was the one that like i was like okay this has got to be pwa i ran lighthouse on it and i think it was just missing the a little splash screen for when there's no internet all they had to do is like have one little thing i'm gonna run it again just to make sure but i they were just missing basically that one little thing like some sort of screen that says hey you're offline you can't use our app that's all they would have to do it doesn't

have to be useful it doesn't have to be a good experience they just had to check the box and they didn't do it some of them are really annoying though too like um you have uber listed as like one of the ones but if you go to uber.com on, say, your phone, they don't mention anything. They just immediately are like, here's splash screens about, hey, go get the app. You can download the app from all these great places. And you have to force yourself to go through the login process on Uber through their website and then after you've got already logged in then it'd be like oh hey you want to add this to your home screen you're like oh finally you're like okay fine add it to the home screen and then it's like you go you're like okay let me go launch it from

the home screen experience log in meanwhile meanwhile like you have to do like that that uh the robot check where it's like click every square that doesn't have a bicycle you know like like oh my god i gotta go through all the verification so are we unselling pwa at this point like so no i hope not i was just pointing out like that some of them are really weird like some of them are like super flawless by the way like some of them are amazing pinterest was one that you didn't list but like that experience is awesome and we do have a pinterest you should follow us at coding blocks oh my god when's the last time we put anything on pinterest uh 2015

so here's the thing i think what you said that is so key to this entire conversation is it's being sold really well to developers and it is being implemented so terribly for the consumer. And that's got to change, right? Like any kind of adoption has to be driven by making it as painless as possible for users of something to do it, right? Yeah. So my first brush with PWA is basically the same. I was like, well, this is – it all sounds nice on paper,

but nobody's actually doing it. This is just one of those things that Google does. And then they walk away from six months later quietly. And so I was disappointed without a doubt. But then once I started looking at the actual qualifications for what it takes to make your website into a PWA, I was like, wait a second. Most of this stuff is just kind of common sense. And the things that are kind of novel or weird to me are really stupidly easy like i mentioned the spotify if they just had a little splash screen for being offline check mark the other thing they were missing a manifest file

which is really small and it involves a little json file that includes things like links to like app icons stuff like that a couple little minor settings like you could do that in five minutes why wouldn't they just do that for Windows? They do it for the phone already. Those are the only two things they're missing. Let me get you a pull request. I don't think Spotify is open source yet. Not yet.

Anyway, I figured it'd be fun to go through that checklist right now. It's nice because unlike Jamstack, there's not a whole lot to argue about. There's this lighthouse tool. Wait, wait. Is WordPress Jamstack, there's not a whole lot to argue about. There's this Lighthouse tool. Wait, wait. Is WordPress Jamstack or not? I know.

I think the question is, is WordPress a PWA? Let's find out if CodingBox is. Oh, God. Yep. Wow. They used to give you a grade. I don't know if they still do in Lighthouse. We'll find out here.

And speaking of Lighthouse, I wanted to mention that there's you know i'm kind of mentioning there's like a kind of some hard and fast rules and the deal is if you don't pass the test then google isn't gonna let you install and like chrome is like the number one browser you know everyone doesn't so kind of like if they don't say that you're a pwa and they kind of win it doesn't matter what uh you know Firefox say as PWA or not. Sorry, but Google wins this fight. Interesting. And we're going to go over those in a minute

after I get done running the audits for codingblocks.net. Let's see. This is a WordPress site. We failed at least one test. We do not work if we're offline. That's surprising. Yeah.

It's not looking good. Yeah, we definitely haven't passed this. It's not good that it's still running. It's a big part of this is speed. Oh, boy. Man, what are you talking about? We're edge certified around the world, right? Well, they're starting to pop up these little things like,

did you know that having a fast site increases conversion by 15%? Oh, whatever. It's still running, by the way. This is terrible. I ran through like 10 of these while we were talking earlier. Well, mine finished. I started after you. How's it look?

Well, I mean, we didn't get a good score on it. Well, of course not. We've never tried to. I mean, we definitely failed every metric. Oh, it's not that bad, though. So there's 15 total items, including some manual checks, so there's three that aren't going to count right there. But it looks like the only ones that failed were all related to the manifest and also the 200.

So this is something we can easily fix. So here I am, like, gripping about Spotify when my own house isn't clean. Hey, we didn't ever try and clean our house, right? Yeah, that's true. Yeah. Okay. So, well, we're going to dive into these. But, yeah, I mentioned Lighthouse a couple times.

We'll have some links in the show notes. But also, if you're in Chrome, you can just hit F12. Or if you're on Mac, it's like the whatever, whatever I button. You can open up your developer tools and go to the audits tab. That's whatever, whatever I. I believe it's like command alt I. Is that what it means? Command?

Is that like the weird squiggly hieroglyphics? No, that's commands. I don't know. Is that what it means? Command? Is that like a weird squiggly, like hieroglyphics? No, that's a commands like the, the, the dot or the squares, man, I don't have my Mac near me. I have no idea.

It's like the eye of raw. I got to open up the keyboard. Is that what you're trying to describe? I guess so. Oh yeah. Commands the clover looking thing. All is the one that you were, I think that you were trying to describe? I guess so. Yeah, it commands the Clover-looking thing. Alt is the one that I think you were trying to describe, Joe. Alt is the higher limit.

Well, I just ran Lighthouse on my notes, so give me a second to catch up here. Yeah, there you go. All right. So, yeah, if you're looking for the Lighthouse, which has such a distinctive name, it's in the audits tab, of course. So they make that a little awkward on you, but it's not too bad. And you can see history. You can do multiple runs. You can do different pages, too, because like we mentioned, the experience with the flights where you may not be able to do the whole website, but maybe you can do your itinerary.

So not only can you have different pages behave differently, but also you can set a start URL too. So you can go to index.html and get the main web application, but in your service worker, or rather your manifest, you define a start URL that's different. So maybe you want to go to the my account page or the my itinerary or something as a start URL for the app that's different from the normal index. So on to these rules, and basically, just like I mentioned, if a website misses any of these rules, then it's going to disqualify you for being a PWA. You're not going to be able to install it. And they're broken out into four categories.

Fast, so it's basically the speed, performance, reliability, which deals with things like network connection, whether or not it's actually installable and what that experience is like for users. And there's some optimizations, and those are the three that aren't easily testable in Lighthouse. I'm going to refresh my notes again because after running Lighthouse, things are all running a little crazy. I don't recommend doing that on there.

So you tried to run Lighthouse on the Google Docs? Yeah, and now it's behaving very strangely. Oh, that's not good. You did it on Google Docs? Yeah, that's not going to work too well. And it's permanently busted now. Hey, wait. Is Google Docs progressive web app ready?

Nope. Yeah, and I lost my Docs progressive web app ready? No. Yeah, and I lost my little box, so I can't make any updates. So, it's going to be awkward. We'll figure out something. What, do you just need to restart Chrome? Yeah, let me do that. Dude, we have 100% score on SEO. Look at us.

We don't suck completely. Yeah, that's pretty good. Well, I got a 100% score on SEO. Look at us. We don't suck completely. Yeah, that's pretty good. Well, I got a different one. That's interesting that you got 100. Yeah. All right. Well, I like your score better. Yeah.

I mean, mine was 98, so it wasn't far, but I was just curious that it was different, period. Man, I'm like stuck in mobile mode, so I can no longer update the notes. Just FYI. We're going to have to work about this later. Sorry for the distraction. I think we're already taking so long

that we're going to try and kind of blaze through some of these. Under the fast, the fastness and reliability, page load is fast on mobile networks. Now, I mentioned that these are hard and fast rules. So I say fast, but they actually define it. So it needs to be under 10 seconds for your time to interactive on a simulated 3G network.

So under three seconds until you can actually click or move around or do something. Under 10 seconds. Under 10 seconds. On 3G, though. Yeah, on 3G. That part's kind of key. If you've ever seen the developer tools, you can actually set simulated network conditions and that's the same kind of trick they do for Lighthouse.

I didn't mention it, but there's also a tool that you can add Lighthouse to your CI. So if you want to run this and make sure that you keep that 100%, then that's a great way to do it. Oh, yeah. And the tool is also really nice. In addition to each of these things, they will give you recommended tools for working on the problem and also reasons behind why they say this stuff is important. It's a great tool, great website.

So next one, number two, current page responds with a 200 went offline so this is the thing that spotify doesn't do yeah just 200 just means okay it doesn't have to be useful the whole thing could just be you know texas says hey you're offline right it's fine that's fine just this is where you could have like a custom page instead of like the down a sore, right? Like you could have your own custom page. Just be like, Hey, check back with us when you're back online.

Yeah. Right. Yeah, absolutely. And you know, that's another thing for cheating for faster, reliable. Like, I don't know if I think Reddit's on a site that does it.

There are a couple of sites that when you go to, they'll like throw up a little splash screen while they're loading. And that's kind of a way to kind of, I want to say cheat the system, but it's also a good user experience. If you've got a little thing that says like, it's a little red alien, like, hey, you know, it gives you something to look at as a user. And it's much more interesting than a white stupid screen, just kind of loading. You're not sure what's going on. And Google says that's not cheating. That's good UX. Start URL. So this is part of the manifest file, which we'll talk about a little bit more in depth, but there's a setting in there that basically

you set that start URL, which is where the application is going to start with when you open it offline and it just needs to give you a 200 run offline. So same thing. And an interesting thing on the start URL that I saw on that Pluralsight course was, you know, you can just do like slash, right? If you want the root of your website to be the start page. But a lot of times what you might do if you've got an installed PWA is you might want to make that start UL have some sort of query string in it so that you know that, hey, I'm in, I'm in mobile PWA mode or something like that, just so that you can sort of keep track of how things are starting. So it gives you a way to maybe get some telemetry and that kind of stuff.

Yep. So we're one-fifth through the list, 20%. Anything there that scares you? Not yet. Yeah, it's all fine. So now we want our app to be installable. That sounds kind of scary, right? My website installable, what do I have to do to do that?

Well, rule number four is use HTTPS. You know what I heard about that? The reason why is because of the way the web service worker works is it's basically acting, it can proxy things for you. And the only way to guarantee that there's not some sort of man in the middle attack is if you're using signed certs. And that's why they want you to use TLS, HTTPS type stuff. Yep. And that's something Google's really pushing for anyway. There's some protocols that make HTTPS faster. It's more secure and it kind of protects your users. And so it's a good user experience anyway. Yeah. I mean, we've talked about in the past about how like favorable search results, how, how they're given favorable search results to HTTPS results over HTTP.

Anyways, uh, the browser treatments, you know, that they give if you aren't, uh, HTTPS in the URL. Um,

yeah. So, I mean, I feel like that one's almost like a no brainer. Like of all the things on the checklist, that's probably the one that's like, well, I'm already doing this anyways. And if you're not, let's encrypt makes it so easy. I was going to say the same thing. You don't have to pay a ton of money like you used to for SSL or TLS or HTTPS. Let's encrypt, go to let's encrypt. Is itorg uh you know i don't remember i think it is let's

encrypt dot yep.org it's free too yeah it's free go get your if you have a site and you haven't set this thing up to be secure go over there man they have they have like little tools to walk you through exactly how to set it up on whatever type of setup you've got going. So do that. And if you're using a service for your website, too, then sometimes it's just a checkbox. Like, do you want HTTPS? Yes or no? And if you have a website that isn't HTTPS, Chrome shows a scary not secure up in the top left just to kind of remind you that you've been sucking on that.

Yep. So yeah, you see HTTPS. And also there's some things that don't work in the browser if you're not HTTPS. You mentioned the service worker, but also I think Bluetooth, they're coming out with support soon. It's not going to work if it's not HTTPS. Same with like the audio recorder and some other things that were the browsers basically protecting you from man in the middle of Texas, like you mentioned.

And those services aren't available unless you're on HTTPS. The.dev domain now will not route to your website unless it's HTTPS. Oh, interesting. So, yeah. One thing to point out is when you're in dev mode, it will allow you to use localhost. So you don't have to have some sort of cert on your local machine in order to do this stuff. So it's smart enough, at least the way that they've got these things set up,

to where you can develop on localhost. But as soon as the thing gets published somewhere, it does require a secure connection. Yep. And so number five is register as a service worker that controls page and start URL. This is the kind of the only magic I would say. This is like the kind of the linchpin. This is the weird one. And ultimately, it's just like the other things.

You don't have to do a lot with it. There's a lot you can do with it, but you don't have to go crazy with it. You just have to have it be there and you have to have a start URL there. But the gist of it is that a service worker is a type of web worker or a couple that's basically runs in a background thread that's separate from the website and it's missing a few kind of normal javascripty things like it can't directly manipulate the dom there's a couple properties it can't access like it can't change the href on you some things like that that are hanging off the window object but it can pass

messages to the ui thread so it can call functions it can do things like that in addition to all that the real kind of cool part about it is that it can intercept network calls like fetch so you add an event listener and whenever your website makes network, you have the option to step in and do something with that. And so a really common pattern and one that QAT makes a big use out of is actually caching the results. So if you do a search for Docker, then what we'll do is if we don't have it in cache, we'll run out and get that and then we'll throw it into cache. And then later, if you try to call that same Docker, we have the option of saying, oh, we just searched that five minutes ago. Here are the results.

We don't do that in our case. But if you're offline, we do have the option of saying, oh, here are the results from the last time you searched it. Same thing goes with files. You queue up a file in QIT. We'll run out and start downloading that MP3. Now, the next time you hit play, what we do is say, basically, play this MP3. We can give it the same URL. And now we have the options of saying,

if we have this file downloaded on your phone, just go play it. If not, go out and download it. So this means you can do cool things like queue up a bunch of episodes. And we'll start downloading. If you go through a tunnel and we lose internet connection, then we lose that download.

But next time we try to access that file, if it doesn't have it, it's going to try and run out and get it. So I've got a, there'll be a link to this in the show notes, but there was a video on YouTube called Intro to Service Workers and Caching. And the guy who put it on, well, actually it has the median name, not his personal name.

So I don't remember what his name was, but it was like the media was like Traverse Media, something like that. But he has – it's a really simple explanation of the service worker. And he goes over examples of – exactly the type of examples you're describing, but like the actual code and how little code, that's the amazing part, was how little code it was. It was like, you know, there was the one pattern where, you know, if you want to specifically specify like, hey, here's the things I want to cache, right? Then you could do it that way. Or if you wanted it to be a little bit more dynamic and be like, okay, hey, I don't want to have to name everything ahead of time.

But, you know, as things come, as you make requests, I'm going to start cashing those in, right. Um, you know, a couple of different approaches that you could take to it, but it was just, it was really interesting. He did a great job of explaining, of explaining it. And just the main takeaway was just how little code it took to make that thing work i mean by the time he was done he might have had 50 lines of code might have had 50 lines of code yeah and uh ultimately it's just a javascript file it's sw.js needs to be like in the you know top level of your site but that's it you can have this little thing and 50 50 lines of code is like a really nice use case of like fetching and caching stuff. You don't even need to do that. If you don't want your app to be able to work at all offline, you don't need to do any of that.

You just need to have that SW.js file there to check that box to make you a PWA. And if your site doesn't make sense without internet, that's fine. And well, I mean, just to clarify some of that wording though, right? Like it doesn't technically have to be named SWJS. Oh, really? Right. That's not the important part. The important part is that you're registering the agent worker. You're registering the service worker on like the, um, Oh, right. You're right. Yeah. Good call. Yeah, there is something you need to have in the HTML to link that up there, but it's really minor.

Also, some other cool things, there's an install and activate event, so you can do some pretty cool things with caching there. And another important thing is the push notifications. That's actually an important call out too that you just said, was page that uh that is going to be part of this that would have this service worker that however you're including your javascript this javascript this swjs or whatever you decide to name it would have to be part of that inclusion in order to be in order for it to be registered on every page yep and i think for uh for my case, for QIT,

there's basically just the index.js file. So that's, we do absolutely call that one out there in the, in the SW. Yeah. There's a lot of tricks, right? Like if you're,

if you're in like a spa type app, then maybe you can get around it. Or if you have like a common header or footer that's on every page anyways, then you could just add it there and then, you know, you get it for free anyways. But I'm specifically calling that out because if you don't have that, right, if you're not in one of those situations, then you would need to add this file to each page because otherwise

what could happen is your user could navigate to some other page. Let's say it was like a contact us, right? And, and that service worker JavaScript wasn't included as part of that, as part of that separate HTML, then as far as the browser is concerned, it's a whole separate website. It's not the same thing. Right. And, uh, yeah, uh, so absolutely. And also, uh, the push notifications are interesting because, uh, depending on your, your device, this is where things get a little weird, but basically the service worker can be running without your website being up. So on Android, you can close the browser, and that service worker is still up and available, and it's still polling your server for messages.

So whenever you do fire it up, it might say, hey, you've got three new likes or mentions or something on dev 2. And it's supposed to be able to get that stuff offline. And even if that service worker is not running, if the device kills it for some reason, which can very easily happen on something like Android, it kills stuff all the time. Whenever it fires up, it's able to go out and fetch that then. And it's the same with it being offline. If it can't get those notifications when it's offline,

it won't get those notifications. But the next time it does come online, it's automatically going to go out and check that sort of thing. So you can enable push notifications on an application, which is really nice. So you can get those little notifications in your notification center on your phone, even when the app's not working. So you can say like, hey, so-and-so liked your post, even when I don't have that website up, which is really nifty. Well, more specifically though, because this was one thing that wasn't clear to me, like you don't have to have Chrome open.

Right. Right. But yet you could still get that notification to try to register with whatever like Android and like Windows has their notification center. Same deal. So you install this. So it's like Dev 2. I can I can show notifications on Windows for Dev 2 even without Dev 2 being open open so it just behaves kind of like a normal app that we're used to like where i'm well you know my twitter icon might show however many you

know um tweets i've missed or whatever and i imagine stuff off like like it's easy to to imagine how this could work on android right because google's so heavily invested in chrome right um and i would imagine that it would be the same way in a Chromebook, right? But what about on iOS, though? It's not everywhere yet, right? That was the one thing I couldn't find. I didn't see if it was... Here's the thing that's kind of weird so in that in that pwa fundamentals

course on plural site the guy goes over it the weird part is is apple is sort of diverted a little bit from the standard so that manifest file and all that like they have their own attributes that they put on things so like the the splash image the background colors that kind of stuff so they have their own settings does it do they all start with like n like you know ns url or it's not ns there's no namespace thing but they definitely do have like apple dash something dash something so they've definitely put their own twist on it, which kind of stinks because, you know, that means that people – it's almost like CSS in the browser days where you had to have all kinds of extra code for IE and then extra code for Mozilla. It's similar to that, right, except it's not quite as haywire yet. Yeah.

Yet. Well, some Objective-C developers, I'm sure, got my joke. So, yeah, I do remember seeing that in code, even though I've never written any Objective-C stuff. I do remember seeing NS on everything, which was really irritating. But, hey, there was a note in here for non-blocking web sockets. Data storage is fair game, though. What are we talking about there? So the deal with that is basically you can't do like –

so you intercept the request in the background, in the service thread. What you can't do is like a loading kind of message. You can't do any sort of like kind of locking the UI from the service worker. And you can send a message that says like, hey, I'm doing something. And, you know, it'd be up to somebody on the front end to receive that and do something with it. So you can kind of get around it, but it just sounds kind of interesting that there's no interaction from the background thread that you can directly do to affect the user experience

other than saying, like, you know, trigger this event. Well, this goes back to the first, one of the earlier points that you made, though, is that, like, the service worker can't manipulate the DOM. Right. But we are saying, though, that it does have access to local storage. Yep. Okay. Yeah, and that's how you can cache and do stuff like DOM. Right. But we are saying, though, that it does have access to local storage. Yep.

Okay. Yeah, and that's how you can cache and do stuff like that. Okay. Yep, that's really nice. And I just found out what a nice website, what web can do today where you look up push notifications. Unfortunately, I can't answer the notes. But it does mention that Safari does have their own non-standard way of kind of adding push notifications and just like you said it's kind of weird so i'm not qualified to interpret these paragraphs i don't

for what should be a yes or no question but uh you can do some reading up on that and figure out what's going on there is it what web can do dot today yep strange there's another link also I have in the resources. I thought I had in the resources. I do with it. Oh, can I use dot com? Oh, yeah. Another one that will tell you stuff about it as well. Apparently, I have they updated. Can I because we've referenced that as a tip of the week in the before in the past? Have they updated it for PWA? I didn't even check. Yes, there is the manifest. Basically, if you type in PWA at the top, it'll come up a web app manifest and then it shows you the supported browsers. And of course, Chrome is green everywhere. And everything else is greenish. Well, that's weird though, because I definitely saw another one where it wasn't quite that. Let me see. Oh, but it might have been just specific to service workers. Yeah.

Okay. So if you, if you were to tie, if you were to look for service workers, then it's much more opened up. Yeah. Service workers seem to be supported almost everywhere. Yeah.

Which is really cool. But yeah, if you, if you type in PWA, it's smart enough to look for a web app manifest, and you'll see that it's supported-ish. Yeah. So, yeah. Yeah, so moving on.

So we mentioned we're in the section talking about making your website installable, which sounds intimidating, but we already mentioned the first two. Use HTTPS and need to have a service worker hooked up, which can be a really lightweight JavaScript file, or you can do some fancy stuff with it. The final qualification that determines whether or not your website is installable is a manifest.json file. If I go look at one of these, like for say for dev.to or something, I just open the network tab and search for a file name manifest. And you can see everything that's in there. And it's basically a couple icons.

It's a start file. And it's some theme colors. And that's about it. There's not really a whole lot to it. And so I'm looking at it for now for dev community. Like they've got black for the theme color, black for the background color. They've got a description, display mode, a homepage URL, just kind of real basic stuff. You know, icons with links to icons on disk and where you can get various sizes.

So like if Apple needs this size or Android needs 512 by 512, whatever, it's got definitions for that. Yep. And that's about it. And that's another one of those things. It's like 20 lines. It's just a JSON file. It's a static file that you can throw in your root and check that box. So why not? I mean, there are additional

pieces to it that not everybody probably does. Like I mentioned the related apps thing earlier. Yep. Like whether or not things should get picked up by an installed native app and all that. And we'll have a link to developer.mozilla.org. If you've never been there, you're probably not a developer. But they have it on that site, or you're not a web developer,

but they have the entire listing up there as well, which is probably easier to read than the W3C's version of it. Yeah, and so we've just gone through six of the 15 qualifications, and nothing really scary there. There are some things you have to read up on, like the service workers and the manifest file, but they're both really minor and they're both's some good reason why you can't do that, I can't imagine. But I mean, for the most part, we've gone through almost half the list and everything's pretty easy. We certainly haven't lost anything. No, not at all. This episode is sponsored by Datadog, a monitoring platform for cloudscale infrastructure and applications. Datadog provides dashboarding,

alerting, application performance monitoring, and log management in one tightly integrated platform so you can get end-to-end visibility quickly. Visualize key metrics, set alerts to identify anomalies, and collaborate with your team to troubleshoot and fix issues fast. Try it yourself today by starting a free 14-day trial and also receive a free Datadog t-shirt when you create your first dashboard. Head on over to datadog.com slash codingblocks to see how Datadog can provide real-time visibility into your application. Again, visit datadog.com slash codingblocks to sign up today. and leave us a review. We truly, and I mean, truly appreciate those. Even when we were at Orlando Code Camp, we had people come up and talk to Mike and say, you know, man, you guys have

helped me through my career. You've helped me get through some rough spots or whatever. Like we really love hearing that stuff. It makes us smile. And it's just, it's amazing. So if you do get a chance to go up to codingblo blocks.net slash review, and we have links over to Stitcher and, and iTunes and feel free to drop us some, some words over there. So much appreciated. And as Mike always says, you know, also tell a friend, right? Like if, if there's somebody like we were sort of shocked by the number of people that just don't even know about podcasts, right?

Like, it's just not something that they do. You know, tell a friend and hook them up, show them how to do it, you know, and, you know, give the gift. And with that, we head into my favorite portion of the show. Survey says, all right. So back in episode 100, we asked, what interests you the most? So your choices were learning the low level nuts and bolts of how computers and operating systems work. The lowest possible level. Like,

can I build my own computer or my own operating system? Right? Or the highest possible level, subjects like formal algorithms, machine learning, and artificial intelligence. Or those other options are nice, but i enjoy prototyping and experimenting with all of the things broadening my horizon all right so let's go joe you go first what say you i'm just gonna say how i feel about it i'm gonna say i enjoy experimenting and prototyping and i'm gonna say uh 40 okay 40 okay i'm going with the same at 41 oh thanks bob dang it you know and if you recall it was that same episode episode 100 where i commented that we've never ever hadn't had anyone do that until it happened in episode 100 and now here we

are again it happens and coincidentally episode 100 is being referenced well john was the trend setter in that right like he was the one that kept doing it so he broke he broke the norm unfortunately this is the one that i think all us ADD developers are going to pick, and it's got to be north of 40% somewhere. Well, I will put it to you like this. You aren't wrong. Sweet! Is it like 80%? I would imagine it's high.

It was 68% of the vote. Wow. Yeah, those other options are great, but I enjoy prototyping, experimenting. And exactly for the reasons you just said, Alan, is what I would imagine would be the reasons why was that, you know, we have ADD. We want to like bounce around and try new things all the time, right? Like, you're like, oh, there's a new version of Angular. Let me go try that out. Oh, progressive web apps. Let me go try that out. Oh, Elasticsearch. Oh, let me go try that. Oh, Kafka. Oh, let me go try that out. Oh, wait, there's OAuth. Let me go try that out oh progressive web apps let me go try that oh elastic search oh let me go try that oh kafka oh let me go try that out oh wait there's oauth let me go try that out

angular 35 just dropped right and 36 as we said that so yeah and there's things i like about the other two it's just uh to really get in there like say you wanted to create your own compiler your own operating system from scratch it's like that's years of dedication. And yeah, that's just way too much for me. I want to do a lot of other things too. And so there's competition for my attention. Yeah. I am curious though, the second highest one, and I'd imagine by a landslide was the highest possible level, right?

It was probably 20%. Okay. So it was, so%. Okay. So, it was... So, the highest possible level, i.e. subjects like formal algorithms, machine learning, artificial intelligence, was number two. But it was not a landslide. Oh, really? Yeah, they were close. It was 17% and 14%.

Okay. So, they were pretty tight. Yeah. Wow. I was actually were pretty tight. Yeah. Wow. I was actually surprised with that. Yeah. But that is interesting. We're all the same.

Like we all just want to know it all, but not deeply. We just want to know it all. Well, I mean, but no, I was actually going to say like, I'm surprised like,

cause there's, you know, there's some of our listeners that are just like, Hey, I want to be able to write my own operating system. Right. That's one in three. So statistically one of us should have uh picked up vlad i write the web server well no no combined maybe i mean two-thirds of it was the uh uh

broadening your horizons right yeah yeah Yeah. Yeah. So, yeah. Cool. But yeah. All right. So, for today's survey, we ask, hey, what's your favorite time to listen to podcasts? And your choices are, during my commute, what else am I supposed to pay attention to? to or while i work i need an escape or while i exercise nothing better than staying physically and mentally fit or every waking moment joe looking at you on speed 0.5 or i wish my schedule was that routine. I'm like, whatever. What I like to do is be like,

hey, I'm going to take the trash out. My wife says, okay. Then I start going upstairs. What are you doing? I thought you were taking the trash out. I'm like, I'm getting my headphones. Is the driveway that long? Yeah. This episode is brought to you by Stellar Res, the AI-powered talent agent for top tech talent. Hate your job?

Or just kind of meh about it? Well, listen, you're not a cog in a wheel. Stellar Res will help you find opportunities that are actually a great mutual fit. Stellarez knows that a job is more than just how it sounds in a job description, so they built their AI-powered talent agent to help you find your ideal job. Stellarez does all the work and screening for you, scouting the best companies and roles, and introducing you to opportunities outside your network

that you wouldn't have found otherwise. Combining deep AI matching with human support, Stellarez pairs things down to a maximum of five opportunities that tightly match your goals, like compensation, work-life balance, working on products you're passionate about, and team chemistry. Then they facilitate warm introductions, and there's never any pressure, just opportunities to explore what's out there.

To get started and find the job that's just right for you, visit stellarez.AI slash coding blocks. That's S-T-E-L-L-A-R-E-S dot AI slash coding blocks. Back to things. We're now into the PWA optimized section, which contains some rules to basically deal with a better user experience. And the first one is redirecting HTTP traffic to HTTPS. This might be rough for some people who, for whatever legacy reasons, might need to have an HTTP site around. But you should be doing this anyway. I think this is one of the things that Google penalizes you for anyway, but I'm not totally sure about that.

But I think just like we mentioned, you should be looking at going to HTTPS as soon as possible for a lot of different reasons. This one seems contradictory to point number four. Like point number four is you have to use HTTPS. So how can you even say in point seven, like, Hey, you got to redirect all your HTTP to HTTPS. Cause it's like, wait a minute. I can only have HTTPS. So why are we even, why are we talking about this still? Yeah.

You can check two boxes with one. Yeah, you can check two boxes with one. That's it. Yeah. And they didn't say only before. So theoretically, you could still have, some people used to do for a long time, HTTP and HTTPS.

And sometimes I remember people would only redirect to the HTTPS version if it was a login page. But you could stay there or whatever if you wanted. I think that's less common now. But your service worker isn't going to register itself under HTTP. It's not going for like a login page, but you could stay there or whatever if you wanted. I think that's less common now. But your service worker isn't going to register itself under HTTP. It's not going to work. Yeah. Right.

So what's the idea here that you could go to like index.html as HTTP, but inside of index.html it has a load, a script tag that is HTTPS to service worker? Well, yeah, it's kind of weird. You can kind of imagine a case where it's like if you're on HTTP, it doesn't work as a PWA. But if you're on HTTPS, it does. And because of that, service worker would be a great reason. And that doesn't really make a lot of sense, but they go ahead and just make it a firm rule.

If you have HTTP available at all, unsecured, we're just not going to allow you to call this a pwa a stranger scenario where you were like um trying to do a mixed world remember right yeah yeah when you used to get the alert pop-ups back in the day oh yeah mixed content yeah yeah yeah yeah i find that one odd too all right but we checked two boxes. One, that's good. Yeah, so yeah, you're pretty much already there with number four. The next one is configure for a custom splash screen. This is part of that manifest file.

I mentioned that the dev two is the theme color black and the whatever color, the text color is black, and they have a white icon is the deal there. And so that's a splash screen. So when you're loading that up for that kind of half second or whatever it takes to actually get, you know, check the network, do all its normal stuff, staying on the web application, you just have a nice, cool user experience where it's like, oh, artsy. And why not? You know, you basically get it for free. All you need is icon and, you know, set a couple of colors in the manifest file and you should probably have that stuff anyway. The next thing, also part of the manifest file, and it's the thing I mentioned, you can set the address bar theme color. Dev.to does it black. I think QIT does it green. Just whatever, something that looks nice.

And these are one-liners in the manifest file, which we already discovered. So, so far, everything, these three items, 7, 8, and 9, are all basically things we kind of handled in other steps, but they're almost just kind of an optimization on those steps. Number 10, content is sized correctly for the viewport. This is something they actually test for. They have a concrete test for it, but it's simple. Basically, if your window.innerwidth is equal to your window.outerwidth, which means that you don't have a horizontal scroll bar, you're good. So if you've got a responsive website and you've already got this handled,

you don't have a responsive website. This is probably the first one that we've really hit on. That's like, this might take a lot of work for you if you've got a big old site. Yeah. A lot of work. Yep. So the first one, uh, and, uh, so the first one and now the next one has a meta name equals viewport tag with their initial scale. This is another one that's kind of tied to setting that device with and just making sure that you've got a responsive

website. So number 10 and 11, this is the first trouble we've run into. This is like the first thing that can't easily be solved unless you've got some sort of crazy situation on your hands but again you know what felt like it was like duplication in their rules here like these really feel like they're the same thing well as you yeah you have to be responsive i mean i kind of wanted to point out like i don't know that we've ever really talked about these kind of frameworks at all in the past but if you've never looked into bootstrap, that's probably the de facto standard for like a responsive,

you know, standard layout that was created by Twitter. There's also material is now a big thing that Google's pushed. And there's one more bootstrap versus foundation. Foundation is the other one i was thinking of so like there's three big ones out there that you know it might be worth starting with those things just so you get the response of things out of out of the gate right there's also um if you can say what like if you can if you can if you're starting greenfield for sure right um now there

are people that argue against that stuff too because they're like well bootstrap adds too much bloat or you know whatever like there's there's all kinds of arguments that people come up with for all those or so maybe or you know i've heard creative types that don't like it too because they're like well it all looks the same And like every bootstrap site looks the same and they might want to have like, you know, its own, its own flair. But you know what? There are see, and that one's always funny to me too, because you can go to themes.getbootstrap.com.

And there are people that have created things that look nothing like bootstrap. It's just some creative types got around there and they use the CSS to theme it. So, I mean, I know I'm getting a little bit sidetracked here, but I guess what I'm saying is there are things out there to make this a lot easier on you if you're trying to do that, right? I think one of them is a CSS grid is like the responsive grid type thing. So, you know, if you're not sure and you're actually interested in getting your things sizing for, you know, if, if you're not sure, and you're actually interested in getting your things sizing for, you know, proper viewports or displays, just look up responsive layouts and you'll be treated with 5 billion results of things that you can go try and do.

And just for fun, I ran, um, create react app and ran it through a lighthouse to see how it did. Sorry, I've got to... Did you hear that? Yeah, I did. One of my dogs likes to scratch on the carpet before he lays down. Usually I yell at him and stop him, but I'm not going to because we're podcasting. He is really going to town

before he lays down outside of my door. I like the look you gave him. You were trying to look through the door. That was pretty awesome. I was like, oh, I know you're not doing that. We have this discussion every night. So just in case if someone else like makes this mistake, because you mentioned like themes.bootstrap.com. Themes.getbootstrap.com.

Yeah, that's what I wanted to say. Uh-oh. Yeah, themes.getbootstrap.com. Otherwise you end up on the dark web. No, I mean, it wasn't anything bad, but I was like, wait a minute. Like, what? I know I'm looking for Bootstrap. Like, oh, wait.

That's what it is. That's hilarious. So just for fun, I ran create React app. It's a basic kind of React app and ran it through. And it's missing a couple things like HTTPS and stuff like that. It's missing a manifest. It had a problem fetching the start URL. A couple little things,

but actually it looks like it's about halfway through. You got green checkboxes just out of the gate. And it does go ahead and set that viewport, those guys for you, the ones we just mentioned. So that's pretty nice. It also takes care of the next bullet point, which contains

some content when JavaScript is not available. So all you need is just like a little NoScript tag that says like, hey, you need JavaScript. Ideally, it could be even better. Maybe you can make some static content that is actually useful. But in order to check the box, all you need to have is something, even if it's just a link that says why you need JavaScript. So easy peasy. Nice. need to have is something even if it's just a link that says why you need javascript so easy pc nice and that that was it so we just hit all the 12 ones that can actually be that was it for all the ones that you can test for those are all the ones that have de facto like yes you are a pwa or

not now there are three more rules that there are not easy tests for. For any site on the interwebs. Yeah, and they're pretty big. But there's just some best practices, so we'll hit them real fast. Site works cross-browser. Good luck. Yeah, I mean, we're counting Mosaic. There's a ton of browsers out there.

Opera, Netscape, right? To say that your site works completely cross-browser, there's browsers that haven't been invented yet. So that's kind of a silly thing to say. So it's not something they can test for, but we can, you know, say that like this is something you should strive to meet. Okay. Now, hold on.

Because one of the browsers that you just named was Netscape. Yeah. Doesn't get anything to run on it now. Is that even still a thing? Like now I'm kind of curious. Netscape. Yeah. Doesn't get anything to run on it. Yeah. And even still a thing like now I'm kind of curious. I want to Google like, see, like I would almost be afraid if I could download it,

like what it might be now, but a good rule of thumb though would be what Firefox, Chrome and Safari, right? Like, I mean, you want to hit those three for sure. Even though I don't know that Safari is all that massive.

You left out edge. Well, you know, safari is all that massive you left out edge well you you know the funny part about that is you have seen the news right yeah yeah yeah yeah microsoft is going chromium based for their next browser right so they're bouncing all over the place so chromium slash chrome you should be good ish there yep ish well you can download nescape navigator allegedly I wonder if anyone does that because I'm sure it's just chock full of viruses. Don't do it. Yeah, I wouldn't do it. That's why I was saying I would be scared to even actually

download it. Oh man, as a side tangent, speaking of the viruses, I read an article the other day. Game of Thrones is getting ready to come back out with its final season, right? They said this article said that 20% of the viruses that are out there in like stolen video content are in Game of Thrones episodes.

And it's not the most pirated show out there, but it is the most virus laden one. Oh man, what was the most? Because I kind of have like my hopes of what the most virus-laden one. Oh, man. What was the most? Because I kind of have my hopes of what the most pirated one would be. What was the most pirated? I don't know. I don't know if it went into that, but it definitely did say, hey, beware. If you're out there trying to pirate some Game of Thrones, just beware because you might

be getting more than what you bargained for. Only because it would seem to be so fitting to the show. I was kind of hoping that the most pirated would be Mr. Robot. Ooh. Yeah, that would have been good. Silicon Valley,

man. Dude, I love that. That shows the best. All right. Sorry. So that was 13. Number 14 is page transitions.

Don't feel like they block. And that's that word feel don't feel like they block. And that's that word feel that's really important there. That's something if you ever click the link and like things go white or maybe you click a link and actually white would be better. You click a link and you're like, wait, did I click that or did I miss? You got to click it again and it loads or whatever. You misclicked something. And so they're basically advising.

They've got a nice big paragraph here on the kind of their advice but basically show a loading if you can transition to the next page maybe show what they call a skeleton screen which is kind of like throw some color up there you know throw some some like kind of stretched out blurred small images um get things moving so the user at least feels like they're going somewhere so they don't have that kind of moment of you know worrying whether or not they click the link i promise you elevate what you going to say again? What were you going to say? I was going to say, like, I promise you,

if you want to see the best example of this so that the transitions don't feel like they block on the network, Pinterest, man, I mean, they nailed it. Like you, you can scroll and scroll forever.

And it's just like the images just load up. And as soon as you're like, Oh, let me click that image. It just boom, full screen. You're already there with all the other suggestions. Like how did it do it so fast?

Yeah, I've heard, um, I know, uh, the guys on syntax, we're talking about PWAs, uh,

I don't know, back in November or something. And what they would talk about doing is like, if you click on a thumbnail or something, like rather than going and fetching the,ing the new big image version of that, like go ahead and just take the thumbnail that you've already got and use that and maybe blur it and stretch it. And so it kind of takes up the width that the larger image is going to occupy once it gets loaded. But this is like a nice kind of cheap and cool looking way of, you know,

using what you've already got in order to have an immediate transition. Yeah, but they're still getting all the thumbnails for the images that would show up on that page. But below the small point. Yep. And sometimes we'll even do things like like they'll start preloading. So if you like hover near an image, it might start going and grabbing the next one. Like I'm not sure what what they're doing here, but those are the kind of techniques that a lot of websites are doing. I can't

use Pinterest because I go there and it gives me 50 problems to log in or create an account. I use Chrome to delete all those, of course, but now I can't actually get to the pictures. Dang it. Well, I'm telling you, if you're listening, that's a stellar example of

.14. Yeah, they've done a nice job. And also, if you go to Pinterest, you should follow me because I've got a nice Transformers board. As one does. As one does. So the final, number number 15 each page has its own url you can imagine why this is kind of hard for them to test because how do you really say what's a page and what's not a page especially if you're in like a javascript heavy app but the idea there is that you're able to link and share and that's something we don't really touch on too much when we talked about

like native apps it's like if i've got like the Starbucks app or something and I like, I want to send you my favorite drink or, you know, the store location I'm at, that can be pretty awkward, especially if you don't have the Starbucks app on your phone. So it's up to those app developers just to kind of make that situation work and make that easy. But if you've just got a webpage, then I should be able to use a copy of whatever's in that URL and send it to you and assuming there's no user restrictions or anything you should be able to get that in the browser

of your choice you shouldn't have to have the app installed and same thing here so if each page has a URL I should be able to send you a link I should be able to copy it in any number of ways and send it to you and you should see the same thing that I'm seeing or else you should see something that lets you know why it's different. So now it's almost like it.

Cause that one kind of felt jam stacky to me. Yeah. That's the most ambiguous one is what's a page. Well, only because like, I remember when we were talking about jam stack, right? Like you could,

you could go to a page. Every page was already like pre-rendered, right? But then like if whatever your entry point was, like only the content would change, was actually being fetched. So, I mean, I know that these aren't the same topics, but yeah.

Yeah, in that case, yeah, it's confusing and the JavaScript apps have kind of made it more confusing, although better experiences, because now you've got the scenes where you just kind of throw whatever URL you want to show up in the address bar, and then the router's in charge of showing and grabbing whatever you need to do to make that look right to a person. But a lot of times, like you mentioned with the Jamstack thing, you're just updating a title and some text blocks. And to the user, it feels like a different page, but really it's the same files. It just kind of replaced some of the data in the middle. Well, I would imagine the query string will change on it,

and that might be good enough, right? Yep. As long as it's a unique overall URL, it should be fine, I would think. Yeah. But I have no experience. Oh, you have lots of experience. Not with this. Those are the three kind of manual checks that they recommend should be cross browser the page transition should feel fast and every

page should have its own url so good guidelines so why pwas yep final stretch here uh so you know we mentioned pwas off here a couple benefits bits and fits over like normal websites, like showing up in app stores or being installable, push notifications. And additionally, you know, some of the best practices are things you should be kind of doing anyway. So the question is then if you've got a website, if you've got a web application right now, why wouldn't you go the extra mile to make it a PWA? Well, really, is it a mile, though? It's more like, why wouldn't you go the extra distance to check your mailbox? Like, it's that close. It's really not a mile. You say that, but I haven't gotten my mail in at least two days. Wow. There's nothing in there.

That's fine. So, it's interesting. I mean, I think the answer would be like you know you said we have a wordpress site thanks for publicly saying that so that everybody will attack us now attack but i mean it does make it to where if you're using some sort of third-party system it might be a little bit more difficult right like i i actually i think we could do it pretty easily but if you don't completely control the source code, that does add an interesting challenge, right?

Yeah, and there's definitely applications. Like if you're going through, I don't know, some sort of service or whatever, or maybe some sort of older framework that doesn't support it and that kind of things. But when you look at those like four high-level kind of categories that we talked about, like should your site be fast and reliable? Well, yeah.

Should it be installable? Well, why not? Because it really is just a couple of small, you know, we need to manifest, we need a service worker, we need HTTPS. It's just so easy. And then finally, PWA optimized, same kind of deal. It's just so easy that it's not hard to do that unless, you know, aside from making your site responsive. So specific to your point about WordPress, though, I mean, like, there are dozens of plugins.

So WordPress itself, like, you can have a WordPress app or a site and make it a PWA. Oh, you can have a WordPress site and make it anything. Like, somebody's written a plugin to make WordPress do. Well, I mean, let's think about it though. Like even if you,

cause you might like, maybe you're listening and you're like, well, I really don't want, I don't feel comfortable installing a plugin for that. Right. I mean, how little we talked about,

like really the code that you have to write that we talked about was the, uh, the service worker, right. That might be the only new code that you might not already have because hopefully you're already responsive. So that's a lot.

That manifest, I mean, do we call JSON, do we call that writing code? I mean, maybe. I don't know. It kind of sets icons in a couple colors. Yeah, I mean, there's not really that much involved in it. So all it would take is write that service worker and make sure that that

little bit of code is included on every page. So, yeah, I mean, WordPress is probably a bad example because they really do make it easy to do stuff. Like if you have a template, usually there's like a pluggable head section at the top where you can put your

script tags for referencing your service worker and all that kind of stuff. And you, and you're, I think there's the viewport meta information. So yeah, you should be able to turn your entire site into a PWA without a plugin to Mike's point, right? So that should work. But maybe you're using some other software to generate your website and it's just not going to be as easy. Who knows? But yeah, I think to Joe's point is all these are like sort of really good practices anyways, right? Even if your goal wasn't to go and become an installable app, like it kind of makes sense to have a 200 if you're, well,

the 200 response doesn't make any sense if it's not installed because people wouldn't even be able to hit your site. Right. But, but like the HTTPS and all those other things, like that's just, that's good stuff. Yeah. I'm with you. So, you know,

like one of the questions that I had, like as I, as I was preparing for this episode and everything, like one of the thoughts that was going through my mind was like, how does this impact Apple and the app store? Right. Because they've made so much money in like how long would iPhone came out in 2007?

When did the app store come out? Like, you know, a year or two later. So over a decade now, they've just been like making a killing on the app store because they're getting like 30% of everything, right. Of every, of every, you know, if you, if, if the app store because they're getting like 30 percent of everything right of every of every you know if you if if the app has uh isn't free or subscriptions within the

apps yeah so now you have like microsoft right who's just adding adding these pwa apps to their app store and there's no charge there and if like like, let's, let's live in a world, let's pretend we live in a world where PWAs became the norm, right? Like this was the way things were done, right? You know, I guess the app store becomes, it goes away. Like, you know, they can't, they can't charge you for a link. Right. And then another random thought along that time before I opened it up, but like another random thought along that time before I opened it up, but like another random thought along that same lines too, is if you recall, like, is this maybe what Steve Jobs originally wanted when the iPhone was introduced? Because if you remember when

iPhone was originally released, there wasn't an API, there wasn't an app store, right? Like since the beginning of iPhone, it had the capability of Safari had the capability of when you would go to a web page, it would be like, add this to the home screen. Because that was the original intent, was that everything would just be web-based. It wasn't app-based.

Right. I did want to mention too, you can actually submit PWAs to the uh the apple app store you have to use xcode and there's actually a really great site pwabuilder.com which will take your url and we'll bundle it up for you for windows uh the apple app store uh the android and also just like the the mac whatever ios or still one of my tips of the week. I'm kind of upset about that. Oh, dang.

Sorry. But it still does require Xcode. But it is available and you could theoretically sell it, I suppose. Really? Like, okay, that's weird. I wasn't aware of that. Yeah, but it's still – Apple has a vested interest in keeping you in their app store. Right.

And they don't really want you looking outside, which is probably some of the reason behind them kind of dragging their feet on some of the features that would make it easier to use. I was going to say the same exact thing. I think that's why they have sort of deviated from the norm on these things. You know, I mean, again, I think going back to the whole thing and until they make it easier for the consumer to actually do this stuff, it's not going to be as big of a deal.

Remember when app stores were kind of new and novel and you would lay down in bed or whatever and be like, I'm just going to look for a game to buy or a productivity app. Let me see what's in the store. What's top selling? I used to do that a lot, but now not at all. Especially YouTube videos and stuff are cramming productivity apps

and games down my throat. I don't want to see any more mobile games please stop yeah yeah so it'd be interesting to see like in five years maybe less maybe more like where where is like something like that the apple app store right like did p p PWAs take over the world and, you know, just totally reinvent what we think of as an app store. Well, tell me this. I'm curious what you guys take on this. This whole episode has been about PWAs and why you might take your website and turn it into one, right? Because you sort of get this cool feature of an insoluble app just by meeting

some of these checkboxes, right? Would you, like, if you're going to set out to have some sort of cross-platform thing, would you go PWA first? Or would you look at something like Xamarin? Would you look at something like Flutter? Would you look at something like.NET Core? Like, what would be your, what would be your motivation, your gut on where you would start, I guess, is my question. So somebody said tomorrow, like, hey, here's the app idea. Go do it. What would your default decisions be for that? Right, right.

Like, are you going to be like, I want PWA? Are you going to be like, you know, I you going to be like yo i want to do this and you know xamarin or whatever like why why would you choose one over the other so who wants to go first i know my answer i know my answers five years ago it would have been 10 years ago would have been confusion five years ago would have been asp.net now it would be absolutely uh jamstack pwa no doubt i would absolutely go for the cdn hosting uh build whatever i can at uh build time do all the rendering up front that i can in order to get that stuff out onto static uh content delivery networks and also that ties in really great with pwas because i can install all that

static content and it just works great. I can make all that stuff available for you and not a whole lot of space since we're talking about a lot of text generally. So I think those technologies really jive together well. And I think that's the default choice for me by a long shot. You have to really convince me to do a native app over a website now. And if I'm doing a website, I might as well shoot for static. Interesting. Okay. What about you, Outlaw?

Yeah, I was going to say, like, you know, assuming, depending on the type of app, then I'm going to side with Joe and go the PWA route. Like, because why wouldn't you, right? Like, create the website and, you know, also add in these few requirements to make it PWA and be done with it. And now you have the best of all worlds on every platform. If I was given requirements that specifically required, you know, like on iOS, if it required metal in order for it to work, right? Then, okay, then at that point the decision was already made, so it's not even up to me, right? So maybe in like extreme, like if you

were trying to do some kind of game that super duper required some of those capabilities, then I guess... Machine learning. Well, but you could do TensorFlow.js. But it's going to be slower right it will be slower because it's interpreted i mean why would you even try to do like what are we talking about in that regard so because if you're talking about like trying to train a model on a phone you're pretty much already like limiting your expectations anyways. I mean, I'm not talking about capabilities,

but I'm just saying like you're limiting your, your expectations anyways. But I mean, that is an example of where, uh, you know, there's, you know,

take the Google approach versus Apple approach, right? Like TensorFlow, there is a JavaScript version of it. And Apple does have, uh, you know, uh,

machine learning capabilities in with uh ios so yep you know yeah all right so i'll give you my take and this is so this goes back to the survey like i'm probably going to pick something i haven't done just so i can learn something new right um but in a more serious fashion i half wonder if none of this is even going to be a thing with web assembly getting bigger good good point yeah and in complete honesty if you can create something that can get and this is where i think dot net is really freaking interesting nowadays, is you write something in.NET Core that can compile down to Mono, which is written on C, then that can be turned into WebAssembly,

and now you're running bare metal anyways. And, you know, the Microsoft.NET platform is really making some interesting decisions with how they're approaching things like with Blazor and all that kind of stuff, right? So maybe PWA is a day late, dollar short is what you're getting at? Or maybe it ties in with some of this stuff. I don't know. But, yeah, it's interesting because things are changing so fast right now. And there's so many technologies just kind of being flopped down all at the same time that it's hard for me to say. But I would think that I would probably at least look at what can target WebAssembly.

Because if it can run that, then, I mean, technically it could be a PWA. It could be a website. It could be whatever you want. I mean, heck, they got full-blown video games working on it right like uh I think tanks runs in WebAssembly so but I mean let's be clear though I mean just because we're talking about PWA nothing says that you couldn't have a WebAssembly app that was also a PWA absolutely and it would be running closer to bare metal right but? But so yeah, I mean, I don't know. That's the thing is, I want to say that Xamarin is really interesting to me,

but you know, I've looked at React Native in the past and it looked like a pain. Flutter, Flutter looks like it's iOS and Android only. So it's not truly cross platform, it's cross mobile. Like there's so many decision points with all these that PWA seems to hit a pretty good balance between all of them. So I'd be interested in it, but it'd be hard for me to say that I'd be jumping straight on that boat, you know? So what you're saying is it's, you know, PWA is a great choice. Otherwise, you know, WebAssembly and Blazor is, you know,

it was really strong competition there and maybe not even competition but works together so if you were to come up with say like a Blazor or something then you'd be in a great position to... Blazor Plot. Yeah, so I don't know, really cool stuff

and I mean, this was an interesting exercise because I didn't know this much about PWAs. And now I understand why it's kind of a cool rage. But I do feel like they need to fix some of this garbage. Yeah, Joe Zach has no tip of the week. I guess if you were to do a PWAB in Blazer, though, could you call it a P-Wab? A P-Wab Blazer?

P-W-A-B. P-Wab Blazer? No, no, no, just P-Wab? P-W-A-B. PWAB laser? No, no, no, no. Just PWAB. PWAB. PWAB. Yeah, man. I mean, if we're trying to make up terms here, why not?

All right. Let's buy the domain now. So we're going to have a bunch of links to some resources that we like for this episode. A bunch. Yeah, just a few. And with that, Joe will desperately try to search for his as we head into Alan's favorite portion

of the show. It's the tip of the week. Yeah, so unfortunately Joe stole my first one, but it's worth checking out. So pwabuilder.com actually has a thing where you can put in your website and it will try and bundle up your thing. Like I'm putting in coding blocks right now. I'm going to hit start and it will generate a manifest.

It'll generate a service worker. It'll check your security to make sure that you use an HTTPS and all that. So it will actually try and bundle up the application for you so that you can deploy it, which is really cool, right? Like I like not having to do that much work and that's amazing. So the next one that I think is really cool as well is, so we mentioned that the manifest files, you know, no big deal. There's only a few things there right until you start looking at the fact that android needs certain things and if you have different screen resolutions that you need different pixel densities for the images and all that there's another another website called real favicongenerator.net. And it sounds like it's all about favicons or

favicons, but it's not. You can actually have it generate your manifest file, which is really cool because you can point it at an image that you have on your local, right? Let's say that you created an SVG for your particular application. So ours would be like our little CB thing, right? It will actually go and generate the PNG files for the various different sized devices. And the cool part is it'll even let you set the background for each one of them, right? So iOS has a particular theme for their icons on their desktop. It'll allow you to tweak it for iOS. It'll allow you to tweak it for Android, allow you to tweak it for iOS. It'll allow you to tweak it for Android,

allow you to tweak it for windows. So, and it will even give you a visual representation of what those things look like after it generated them. So it's a really nice little checklist to see, Hey, did this turn out how I wanted it to onto every single platform? And it'll generate your manifest file for you. So it'll create your images, create your manifest. You can copy that stuff and put it directly in your project and you're good to go. So pretty cool stuff. Now here's a, here's a funny little bit though, related to your PWA builder. So I was like, Oh, I'm going to put in google.com and let it build, build my PWA google.com for all of their PWA efforts,

failed for the manifest and service worker. Awesome. According to PWA builder. Nice. Well, ours did too, so that's good. We're in good company. We are. It's so easy, but priorities.

But in fairness, the reason why we failed because we don't have a manifest file and we don't have a service worker file or any of that. Well, apparently there's a plug-in for it. Yeah, we just got to install super PWA. So maybe by the time you're listening to this, we'll have a PWA and everything will be different. Awesome. Cool. All right, Joe, I think it's your turn. All right. cool all right joe i think it's your turn yeah well um thanks to uh dave fullett for um sending

me a great recommendation here on the oh i forgot about that that's right that's right pulled it i pulled it off the last second here i was headed for the ground on yokes up dave mentioned uh you know i asked about a better system for a calendar i said that i couldn't find one that he sent me the international fixeded Calendar, which is a 13-month calendar with 28 days each. Because each month has 28 days, and then there's exactly one day left over that's not in any month to make things work. Every day of the year falls on the same day. So if your birthday is on Wednesday last year, it's on Wednesday for the rest of your life. So

it's a cool calendar. It's an international fixed calendar, 30 months. It's pretty cool. Let me see if I can figure out what they named the months. But I don't know that I want that though. I mean, do you? I mean, like if your birthday was on a Sunday, then I mean, there's going to be

sometimes that you're going to want that birthday on a, then I mean, there's going to be sometimes that you're going to want that birthday on a Friday. I mean, especially, you know, like that 21st birthday, you're going to want that to be on a good day, right? Yeah. But if your birthday is on a Saturday, your birthday is on Saturday, the rest of your life. Yeah. Yeah. So, if you were like, got one of the lucky days, sure. Yeah. Um, yeah. I can't, I can't argue with that. I did the extra month by the way is named soul and it basically is in between June and July.

I like how my logic was sound and you were just like, okay, that's it. Yeah. I was trying to argue with it. I was just thinking, you know. No, there is no argument to it. That's just the way it is. So what were the names of the other months? Everything else is the same. Oh, they kept all the other month names. Yep.

So if you tell me a date, I can tell you what month it will end up in. It's like my birthday would still be in June. I gotcha. Hey, wait. I think I've used Outlaw's tip before. I don't know. So let's find out. So, well, there's just two quick ones.

And we probably have mentioned some, but I thought like, okay, well, these are worth mentioning. So in our Slack channel, if you're not already part of our Slack channel, you're not already part of our slack channel you should become a part of our slack channel you can head to www.codingblocks.net slash slack uh and find the information there to join our slack but we have a tips and tools channel there and sean wrote in there was a conversation about like oh hey let hey, let me just create a fake email address for this other service. And Sean was like, hey, no, you don't have to do that. You could just add a plus and then some other, you know, word or whatever to your existing email address. And, you know, now you have this like, quote, fake new email address, right? So like if your email address was john at example.com,

then you could say john plus, I don't know, facebook at example.com. And that could be your Facebook login account, right? And it would just be for Facebook. So, you know, and we often talk about it as being part of the Gmail experience, but it was actually pointed out in our Slack community that that's actually part of the email standard. So I do want to point out here, I love the tip. I use it a lot, and it will also frustrate you to the ends of the earth because almost nobody uses the proper email validation, and it will fail on at least half of the sites out there. So to make matters worse, this is the part that's really frustrating is some places will use get URLs whenever they're doing things. And so it'll totally break when you go to try and log into something. So it's I love the tip.

It has probably bitten me as much as it's helped me over time. I've had better experience than you. Look, I'll give you a perfect example. I set this up. So you remember my VW folks, uh, my VW sports wagon I had, well, they had the buyback program and I was like, well, I don't want to get spam from these people. I want to know when it happened. So I had like, you know, my email plus VW at gmail.com. Right.

So I'm trying to get my rebate and it keeps failing and I call up customer service. So they're like, we don't know what's going on. And so I started digging through the chrome tools and i find that they were encoding the stuff going across and so it was breaking my email address so i had to troubleshoot their system to figure it out so i could get my money for the buyback so yeah man like there's so many times that i've had issues with it that it's like man i've almost stopped doing it that it's like, man, I've almost stopped doing it because it's such a pain. Yeah. I guess the takeaway there is use it sparingly on places where you don't care. Maybe if there's money involved, maybe that's an example of one where you do care,

you don't use it. Yeah. A lot of money, don't do it. I don't know. At any rate, it was worth reminding. And then another one that was also worth reminding in that same kind of vein was that um i think we've talked about this before but uh dave here you are again uh for the record i had my tip in here first from dave joe joe's stealing that one too so he's stealing everybody's tips but we've've talked about how you could snap your windows in like if you're in windows eight, seven, seven, eight, 10 you know, you could use like the window key and arrow keys to move the windows around. And now in like windows 10,

you can also like quarter it to one particular corner. So just thought it was worth the mention again, especially the fact that you could do the quarter quarter ring, because I don't believe that that was something that we had discussed previously at the time. I think when we had talked about this before, you could only split screen it to the right half or the left half of the screen, but that has since been improved. And there was a link that he provided that was like, oh, hey, here's all the information you need. So I thought it was worth a reminder. And you know, here's the tip I should have given. You should go follow Dave Follett over on dev.to. We talked about dev.to a lot tonight.

And Dave has written some really good posts over there. His latest post is actually four tips for workplace pranks, which I highly recommend. There's nothing dangerous in there. And he says some pretty cool stuff with googly eyes, which I've now purchased and I've been sneaking them onto statues around my house and stuff. It's fun when my wife finally finds them. So go follow Dave. Excellent. That's about it.

So today we talked about Puzz and all the reasons that you should go ahead and go that extra mile to make your website progressively enhanced with PWA as a progressive web application

so hopefully you're convinced and if not that's fine too alright well with that application. So hopefully you're convinced. And if not, that's fine too. All right. Well, with that, subscribe to us on iTunes, Spotify, Stitcher, and more using your favorite podcast app. And like Alan mentioned before, be sure to head to www.codingblocks.net slash review and leave us a review if you haven't already. And we would appreciate it if you shared us with a friend. Yep. And while you're up there, go ahead and check out our show notes, examples, discussions,

and more. And send your feedback questions and rants to Facebook. All right. And make sure to follow us on Twitter at CodingBox. Head over to codingbox.net where you can find all our social links at the top of the page.