Links mentioned: Details automatically generated.
summary no summary yet
topics
  • progressive web app
  • web application
  • native applications
  • service worker
  • mobile device
  • icon
  • full screen
  • web dev
  • samsung galaxy folds
  • background sync
  • manifest json
transcript

Teams, were you take it out?

Welcome back.

That same old place, the chief for the number of all changed since you hung around, but those dreams have remained, and they turned around.

All the spot.

Welcome back.

Welcome back.

Welcome back.

Welcome back.

Welcome back.

Welcome back.

Welcome back.

All right, let us get this second break of this first Cipher underway.

Okay, so hopefully you all being productive.

Wish you much productivity was going to say.

Oh, yeah, so I am actually working on some post radio show promo stuff.

So like posting things to Twitter and Instagram it's for people to check out like the recordings and who we played and stuff.

So, and I am a little bit more to do because my coworker know my co-host he couldn't get off of work and so the stuff he does during the show I do now on Sunday after the show, so it just a little bit more.

It kind of sucks.

So I am reading I am going to redo the website for the radio show and to make it easier on everybody.

I am going to make it so that you can, it's a lot easier to do it during then.

So even if he's not there, I will still be able to do what he's doing.

And, so I don't have to do it later.

Can I much prefer to do everything during the live show, you know, I mean, so neither here, nor there some Randomness.

Alright, so hopefully you are making some progress on waivers that you work.

Hang on.

All right, so said I was going to talk about Progressive web apps and if you're not familiar, Progressive web apps, like the whole purpose is to make like web applications, feel more like native applications and giving it certain capabilities that were not available to the web, you know, as a whole.

So certain things.

So we will take a look at that.

But if you even let me, I want to make sure something because until it got worse.

Is the site that you're on is a progressive web app, and I am going to share my screen at some point, but want to make sure something like it's big enough application.

Yeah, there we go.

Cool.

Yes.

Yes.

All right.

Thank yeah, this should be good.

Yeah work.

Okay, so let me share my screen but Lenny.

All right.

So, now how you can tell like, if a website is a progressive web app is, if you look in the inspector, let me share my screen.

First, my going to need any audio, don't believe so.

Alright, cool.

Here we go.

All right, so you should be seeing the until it got worksite.

Right?

So you pull up the inspector tool, you know, you can just like, was it like control shift I or whatever it is on maxed but you can just do you can right-click and then say inspect and it will pull up this thing.

You're just side.

Cool.

Now, if you go to Applications because Progressive web apps application, go to this.

And if your site that On is like, a progressive web app.

At least in the beginning.

What have you?

You should see like a manifest file and service workers should pull up.

Something like it should say, an actual Source, service worker.

And so service, worker is kind of like the brains behind the scenes and it handles, a lot of different things, which is kind of cool.

So, like with, we will talk about it more, but, like, with Progressive web apps, you can do so many cool things like cash.

— certain files whatever so that it can pull from that cash.

And so that in loads faster.

That's one of the big things is that you want to load as fast as possible, which is a good thing to have on a website in general, you know, so this just helps with that.

It helps with like same thing similar to the cash like offline status.

So if your user of your application doesn't have Wi-Fi or connection to the internet, certain functions can still work of your application.

Certain things like, for example, like we couldn't do this video live broadcast.

If you didn't have internet, you know, I mean so certain things you can't, you know, work around but other things you'd be able to check out like, for example, for this front page, you'd still see the front page even if it was offline because it's all there.

All right.

But yeah, so the Manifest kind of tells the site tells the browser.

Like because another thing with pwas, to make it feel more app, like is that you can actually like on a mobile device.

You can actually in like install it like an application, like an app from app store and so will actually show up on your home screen and all the whole nine yards.

And so this the Manifest helps with how it should look when it's like installed.

And so like, here's like the Short name of it.

I don't have a description.

I drive should have a description either like where I should start.

So like it would start at the actual homepage if you wanted to start like it when they click your icon, on their home screen or whatever, where should what page should load?

So that's what that says, the theme color.

So like any theming and things that I ensure the background color, the orientation because you can have it if you want to do like horizontal.

But I think mine matches, whatever your phone or your device is doing.

And in the display show the full screen because you can make it seem like it's still in a browser with all the stuff that the browser, you're like the file, the creating a new tab, all the stuff you can make it show that, but I want it to look like an actual app.

So none of that stuff around it.

Cool.

And then also you can the icon.

So the little icon that will show up on the person's home page.

And so you can kind of do that, and I am four different sizes cool.

All right, and then you have like the service worker.

And this basically tough.

So I haven't set it for like push notifications.

So that's how you all get the push notifications when we're live.

So if you, if you subscribe because if you go to the notify, notified that until it not works, you will see all the different, you know, the let me just go to it.

Here, open this.

By the way, it looks like the video stuff.

The archiving is working.

So that's awesome.

Cool.

So notify here called the notify will see ya notify.

You can see here.

We have all the difference upcoming things so you can actually subscribe.

And what happens is when the site is live on that day and that time period, you can get a notification and that's what this whole push thing is.

So I wanted.

So I can I think I can test it.

So, let me see if I can test it.

So let us try that and see what pops up.

Anything.

All right, guess not but then you can also sync stuff periodic sink.

So if you want to kind of like keep it fresh in the background like the information could do that cool.

Yeah.

A bunch of stuff.

I don't even know about cool.

So just to show if you want to check out if a website that you're on, it's also a progressive web app.

And also if you're on a mobile device, it may ask you to install it as well.

So like if you go to until it that works on your mobile device, I think depending on your usage.

Like if you go to it a few times A little thing at the bottom will pop up and say, hey, do you want to add this to your home screen?

I don't have that little icon there.

Little that icon.

All right, so that is all that great.

Cool now, so there's this website.

So I am by the way, I am going to put all the links that I mentioned.

I am going to add them to the video to the archive.

So you will be able to check it out.

So, cool.

All right.

Progressive web apps.

Yeah, so like on web dev.

They say it's websites that took all the right vitamins and this is a pretty good overview.

I dig it.

So I was looking around trying to find a thing that will different resources that will give you a good idea of what Progressive web apps are about.

And so say, it's so like they said, here in this collection.

You will learn what makes a progressive web app spec special, how they can affect your business and how to build them.

Cool.

So then, you know, things like that and so like I said, Making installable.

That's an important thing create an appetite user experience again, because the purpose is to make the web and Native applications be as close as possible.

And so there's that, and they have some Advanced topics and some case studies.

And so they kind of Step you through going.

Like, like we said, here's that web app manifest that tells the browser, how to handle your web application.

When it's installed.

You can create an offline fall back page.

I can say because offline is one of the teachers to do and then promoting pwa installation, like a little thing that pops up saying, hey, do you want to install this?

You want to be too annoying with that?

You know, I mean and then yeah, so then they have more things like how to make your PW.

If you like more like an app was cool that little badging icon.

So if your app like sounds like little notifications, if something happens, whatever that little icon, that a person going to stall again, like a little badge, like, you know, how like on your email or whatever has like the number or that's like a notification as a little Burr attached to the icon.

You can do the same thing.

Pretty cool.

And then also like the web share if you ever wanted to you know, how sometimes you can like share like a photo or a link to a certain application.

You can have your icon your application in that same tool tray thing that pops up that's pretty cool.

What else?

And then you can check to see if is installed and then a whole bunch of other stuff here.

So it's pretty good spot to kind of, get your feet, wet Progressive web apps.

So there's that one.

And then also came across this other site, like, last year, I think around Christmas time and is the pwa, pwa event, pwa Advent, but the A's are combined.

I don't know, but it's pwa.

Ve P.

Wa D ve NT dot div, and I am just Put that as a link.

So you all can check it out as well.

So you will be able to what just happened there.

That was weird.

It didn't copy the whole thing.

I mean II where the mouse three go.

There we go.

All right.

So let me add and now this one is pretty cool because each day it gives you like a new aspect or like something that pwa can accomplish, which is pretty cool.

So, let me add this save this and so it's the perfect Advent calendar.

For everyone who's excited about the web platform.

Take a look at all the great stuff.

The web has to offer and so let us just take a look at those lists cereal.

And so, yeah, like I said, the add to homescreen like the installing of your web application, the shortcuts service workers pretty powerful.

Like I said, it's kind like, the brains behind the scenes so you can do a lot of stuff.

The push notification stuff, the shake detection, which is pretty cool because this one is like, for like barcode readers, like, like, if you want to do like a barcode thing, there's like face detector.

So, yeah, like I said, there's a barcode thing.

The text detector is pretty cool.

I think is limited.

I think so, you can check it out for Also gives you a good amount.

Like, even code samples, code Snippets of what you can do and stuff.

And it will give you like a link again, webdev.

So it's pretty good resource.

So this is a kind of cool thing.

Oh, and see this post message want to talk about that in the next Cypher, whatever.

Because that's for my current project.

I think I am going to have to use that.

So but yeah, so this is pretty cool.

I am excited about this trip detection.

What else?

And then give you like an overview of service workers in general?

So it's a cool thing to kind of like walk through and build and see the different things.

You can do.

Vibrations as well.

So like when you can make it by your phone or whatever vibrate a certain way and stuff dual screen support, which is cool because I got the Samsung Galaxy folds, easy fold, three, whatever.

But yeah, and then yeah, a lot.

Stuff.

So there's that one.

And then also if you want to see what else the web is capable of there's a site called what web can do dot today.

So I am going to copy that and paste that also into the list of links.

Make sure I got all them.

Yes.

And this one is just shows all the different features that's available on the web and it's pretty amazing.

So let us take a quick look.

So like seamless experience.

Like we said, offline mode, background sync, inter-app sharing and that's going from like sharing a link from one place to another app or what have you payments credentials, task scheduling push messages, local notifications.

Like there's so much cool stuff that can be done on the web.

Let us see.

Oh, so, Or distribution, not testable.

And that oh, because well, I think now, I think you can take your web through the something with a manifest Json, Json file, the web manifest at manifest.

I think you can get them installed into the Google Play Store.

I think so, there's that.

Let us see.

Let us see, let us do it.

So, like access to the camera Vance, camera controls recording.

So you do all that from the web, who, like I said, the vibrations online State.

A lot of cool stuff.

Stuff that you can do file access is another big one.

Touch gestures geolocation, but not geofencing yet.

So you can see the device motion and the position.

So, it's pretty cool.

You get a lot of stuff here.

You can kind of check out, and then if you click one, gives you more information about that API.

So, yeah pwas, pretty awesome.

Also, a lot of like Frameworks like cuz I use sapper with felt or whatever and that One automatically creates like a service worker for you because it one of his goals is to, you know, load as fast as possible.

And so a lot of times those type of framework, so I think I have never done it but probably like next and next we will probably also do the same thing and I believe angular would do that as well because again, it helps things move a lot faster.

And so those Frameworks want to help things move a lot faster as well.

So they will incorporate think as far as installing and stuff.

I am not sure.

Those are you may have to bring that yourself?

But yeah, that's everything I can cram into this short break as far as pwas.

Hopefully, you dig it.

Also, there is a pwa summit, a virtual conference to help everyone succeed with pwas happening on October 6th and 7th, so you can just click at web dev.

Included web dev, right?

Yes, I did.

So, you will be able to just click that get a free ticket, but you know what?

Let me just actually go and add this.

Also, to the set of Link's just in case, if that's not there anymore.

All right, cool.

So yeah, that's pretty much everything.

So if you ever want to go and check out some of the cool stuff happening within pwas and stuff.

I always suggest, you know, checking out meetups and conferences and where the talking about it.

So, yeah, I think that's it for that.

Cool.

Stop sharing my screen.

And yeah, I think that's going to be at.

So again, thank you all.

I am going to send you back so you can get back to work.

And again, if we don't have any show-and-tell like people folks coming up and I totally forgot to enable speech recognition.

Oh, I am a horrible person.

But if we don't have anyone, we're going to go over a group who have played on the show before I think they're two active now separately.

They're pretty active but to get Weather has been, I think a couple of years, but we will take a look at their website.

And that's a pretty cool.

So let us get into this goodness.

I am sent you all back on your way again.

Thanks for hanging out.

I got to get back to some radio show.

Host promo stuff.

Got sent out these emails and things.

So, alright.

I think that's it.

Cool.

Let me get you back.

Thank you all once again for hanging out, share my screen.

Definitely want audio for this.

Cool, and yeah, we back.

Thanks again for hanging out and cool.

See you later.

Shouts.

Anthony Cruz, AKA butter chairs call.

Thank you.

All right.

Y'all be easy.

See you.

All right.