[MUSIC]
>> We have what's called a starter.
If possible, we can see if we can try to
actually run one. What is the starter?
The starter kit is really
a complete PWA scaffolded app
that has already been set up with a service worker,
places for manifests, simple routes, users lit,
which is lightweight web components,
and is, we'll do one if
we have time depending on what you want to do.
We'll try to actually use it and run it through
their own report card will have really high score.
I think it's almost 100 like a score as well.
In a sense, you're getting out of the box a fully-featured route,
friendly PWA that you can then start scaffolding out.
If you're interested in what that looks like,
I actually am working on seeing
what it takes to deploy this to GitHub.
This is my version of what that looks like.
I had to tweak the colors a little
bit because the default colors could be read.
But you can see that it really just has a very simple routes.
Tells you what it's using.
Here is my kicker,
PWABuilder currently all the samples and all it using TypeScript.
That means I need to scale myself up on TypeScript.
>> I have a course for that.
>> Please, we need to do this.
What I did find is looking at the source it's
really and I think maybe Christopher
you will agree on this TypeScript is actually very
easy to read and understand.
It's figuring out what's happening where so this is the stack,
they use under the covers.
If you want to get started with PWA and just for the heck of it,
since this comes from the starter if we have time,
I'll show you how that's actually run.
But I'll show you what the score of this is.
This is the one I've deployed right to my GitHub endpoint.
If we actually look at this,
you'll see that it's score is super high,
so it comes out of the box compliant and all you need to do
is add in your code for
the different routes and then keep testing and so on.
PWA starter kit.
That's my first tip,
go check that out and
then let me see if there's one other thing I want to talk about.
It's in here. One of the reasons I'd looked
at this and I'd put them in the links at the bottom
of my favorite stuff is with PWABuilder there
are articles with example
apps that I think that really drew me to,
hey, we can use this and try to build something on it.
What I find one of them are because I guess it comes from Google.
I'm a Surface Duo fan so got to say this.
I thought this was pretty cool.
There are dual-screen APIs that through media queries,
you can create dual-screen behavior.
With PWABuilder, there was
a blog post shared on the Surface Duo blog
just a couple of months ago that walks
you through an example of an app that you can use,
starting with PWABuilder, a progressive web
app that is also configured to use
the dual-screen media queries and
build experience that is optimal for those devices.
Definitely check this article out and if you're interested in it,
they also have two other things.
What was worrying me about this is,
look at the date on this.
I'm like was it supposed to have been
published and I didn't know, do you see what I mean?
We're living in the future right here. But anyway.
>> At this point, what is time,
it could very well be July 15th today for all I know.
>> Hey, this is all I'm hearing from [inaudible].
We are all variants on it.
But what I love about this is,
with PWA starter they're using components,
so they actually have a PWA inking component that you can use to
do 2D drawing and those are little passion of mine.
One of the reasons I like
this starter kit is the samples they have,
they've a drawing app and inking app and a dual-screen app
so definitely go check those out that I can think of.
I was actually going to show you how to just quickly run
a PWA- Starter maybe we don't have time for that.
>> If it'll take two minutes,
you've got two minutes.
>> All right. We can do it very simply.
There are two ways to do it.
One is you can just go into this and I'm I logged in?
If you go into the PWABuilder,
the easiest way to do it is you just go into PWA-starter.
It's a template so you can literally
use this template little fork it and
give you the entire codebase and then all you have to do.
I've actually created version of it.
I've installed it, I'm going to download it from a zip file.
I'm going to just unzip that
and all you have to do it's as simple as this.
If you look at this,
there are just two steps.
Once you've downloaded this code
and by the way you got to look at it.
You go into this.
You just have to do npm install npm run dev.
Once you have dependencies met,
if you do and run dev actually launch it locally.
>> Carry on. Ignore me.
>> It's all there.
>> Yep.
>> They're done. Now if we do npm run dev,
I want to just show this to you because you'll
see the version that comes up.
If you see just launched it there.
Takes a minute, but this you see how the font colors are terrible.
This is why I might change a little bit, but that's it.
It's as simple as that and right now when you've got this running,
it has service workers installed anytime you
want to figure out what's the PWA support in yours,
you can go in here, look at Service Workers are running.
You can see that it's basically activated and running.
Manifests exist as even, I think,
screenshots does not specify
its size so that's something needs to be fixed,
but it's as simple as that.
You've got yourself a running PWA scaffold,
and now you can go in and start working on
an actual routes and component-based pages.