- Coming up, we'll explore progressive web apps or PWAs.
A new class of apps that deliver native platform experiences
to enhance performance, resilience,
installation, and engagement with apps.
And we are going to also take a look
at where to find PWAs as well as
one of the most recent additions the brand new Office app.
(upbeat electronic music)
- I'm joined today by Aaron Gustafson
from the Edge PWA team.
Welcome!
- Thank you so much for having me.
So your team is really building
the integration for PWA at Microsoft
I know there's a lot of people
that are new to Progressive Web Apps.
Can we start by explaining what PWAs are and how they work?
- Sure, so Progressive Web Apps are an evolution
of the experiences you can build on the web.
They start with a great user experience
and then are optimized for performance,
resilience, installation, and ultimately
better user engagement.
These can be anything from a blog,
like mine, which is shown here
or an online magazine like you can see with Forbes
or a fully fledged app, such as Twitter.
Now, browser experiences have been a great option
for writing once and publishing everywhere experiences,
which is why this is such a powerful technology.
- Right, but a lot of people might assume the experience
if it's still delivered by a web app
will be a lesser experience than a fully installed,
kind of native Windows app.
- Absolutely, but a lot of that's changed.
Especially, over the last decade.
For example, did you know your browser
can actually tap into biometrics
to let you log into a website using Windows Hello.
That's the Web Authentication Spec or Web Authen.
You can also integrate with OS level payment systems.
I love to point folks to What Web Can Do Today
to get a sense of what's available
in their browser right now.
And all of that awesomeness is available to PWAs.
- Right, and PWAs even take this to a further level
because they can actually behave
and look like a native app.
- Naturally they run in the browser, as you would expect.
But, they aren't stuck there.
So you could install them from a store.
So for instance, I have the Twitter app up right now
in the Microsoft Store and you can see
it appears alongside other apps within the store.
Right?
Now, the Twitter app itself caches stuff offline.
Right?
It appears alongside other apps, as we just saw.
And it works like a native app too
with notifications and jump lists.
And there's even this awesome thing
you can actually do sharing directly from your file manager
into the Twitter app just using the share charm
and that's something you wouldn't
traditionally be able to via website.
And a lot of this PWA goodness, caching,
and offline push notifications and stuff
it's made possible by a technology called Service Workers,
which debuted in the Windows Spring Creators Update,
which is also known as Redstone Four.
- Right, now you're talking about Service Worker here.
How does that technology then improve performance
and resilience compared to a typical web app.
- So a Service Worker is an independent Java Script worker
that manages the interactions between
the network, your app, and the local cache.
Now, in the traditional web sense, without a service worker,
the browser actually has to make requests to the server
for absolutely every resource that it needs to get.
Right? - Right.
- Or it can check and see if the browser has
already cached a particular resource.
But, the developer didn't have
any control over this interaction.
So because connections were limited
we tended to distribute our assets
across a bunch of servers in a CDN.
Right?
To make sure stuff arrived more quickly,
but we were still dependent on that critical thing;
the network.
Right?
If we had no network then all of a sudden
our app was dead in the water.
- Yep.
- But with a service worker you actually control
all of the network requests and the cache completely.
So for instance, you could pre-cache every resource
that you have that's critical to rendering your site,
your CSS, your Java Script images, that sort of stuff.
And then when the browser goes to request those resources
you just reply from the cache
and never touch the network at all.
And the service worker basically acts like a middle man.
And alternately, if you had some critical stuff
that you needed to go to the network first
you could do that and then cache the stale version of it,
so that if you were offline later on,
you get the stale version at least,
which is better than nothing.
Right?
- Okay, so how do you decide then
what the service worker is actually caching?
- So every project is different
and is going to have different needs.
And that's part of the reason that the service worker
makes use of very low level APIs.
There's the Fetch API, which is used for network requests
and then there's the cache API
that handles, well cache access.
Right?
So with these tools you can pretty much build
any sort of scenario that you want to.
So, you can even get really granular with it.
And I'll show you an example of that in a moment.
But you can look at URLs and say
I only want to do this certain caching
situation for particular directories.
And then, I want to do something else
in this other directory.
I want to go to the network first
or I want to go to the cache first, et cetera, et cetera.
- Right.
- You can even get specific about the kind of files
that you want to deal with.
So I've got an example up here on my screen,
where it's actually checking to see if I'm making a request
for a JPEG or a PNG file on my local server.
And then, if I test to see that
the browser actually supports WebP.
So that has traditionally has been Chrome,
though Firefox and Edge now support it as well.
It can actually swamp that request
for the JPEG or the PNG and respond with the WebP version.
Which is kind of crazy and a little bit overkill
probably for a lot of sites, but if you're trying to shave
every little bit of bandwidth off that you can
WebPs are much smaller than JPEG and PNG files
and so that can be a kind of neat thing to do.
- So all of that really makes sense
in terms of performance and resilience,
but what I really wanted to show
was a brand new member of the PWA family:
the brand new Office app.
Now when we had Katie Kivett on the show
a couple months back she showed the updates to Office.com.
And it's really using fluent design principals
and all brand new design.
You can check out that show at the link below.
- Right.
And the underpinnings of the Office.com experience
also leverage a service worker
and provide additional code to build up
that PWA-based experience.
- Right and here you can see that I've got
the PWA app pinned to my task bar.
I've already opened that in this case.
So let's go ahead and have a look at what that app does.
So here I'm going to pull them both side by side.
The PWA app on the right and the browser
Office.com experience on the left.
Now when I maximize the screen you can see
it's got all of the same kind of experiences
that we saw in the browser before.
So when I look at, for example,
the different app icons I can launch.
Here are the rich local clients
Were, in this case, right from the PWA Office app.
And there you can see I've launched Word.
Now the nice thing is if I don't have Office installed,
in this case I've actually installed Office in a way
that doesn't have Excel locally installed.
When I launch that and open up a blank workbook
it's going to go back to the web
and you see it here on the left side of the screen.
Opening up Excel Online.
So, regardless if I've got the apps
all installed local or not
it's going to be able to handle that situation.
Now if I go back into the Office app.
Here you can see all of the different things beyond
even just the apps that I have locally installed.
I can even do things like pin, not just the Office apps,
but also third-party apps or line-of-business apps.
So here I've got Box, Contoso Sales, and LinkedIn
pinned here, right into my apps experience.
So let me go back into the home screen of this app.
And now I'm going to actually show you
some other things about the app.
Because remember when Katie was on
it wasn't just about getting to your Office experiences,
but also personalizing the experience.
Like we see here with Contoso logo
and everything in the top nav bar.
And also importantly getting back to your files
and everything that really you need to work on
as fast as possible.
So here you can see all my recent documents.
I can see things, for example, if I want to go into things
that are shared or pinned for me.
And even search, in this case I can search for
all the sites, people, files and apps.
If I type in, remember that, line-of-business app,
the Contoso Sales one, it will even pull that up
straight from the PWA experience.
So pretty rich in terms of all the things I can do here.
Now I want to do something crazy though,
and actually disconnect it from the internet.
And to do that I'm going to go into airplane mode.
So now that I'm in airplane mode
you can tell I've got no internet connectivity.
I'm going to actually close the app.
And I'm going to reopen the app.
And now let's see what happens cause I'm on a web app.
And now when it reopens, you'll see
that I still have all of my app icons.
Of course, I can launch everything locally,
as you would expect.
I've got all of my thumbnails,
everything was cached using the service worker.
Everything is there ready for me to be able to use.
And now, here's something really cool that I like.
So I'm using OneDrive, I'm syncing to my local file system.
I can even open a file that's stored in
OneDrive for Business straight from the Office app
and it's able to resolve that link.
Open the document up in this case
even though I have no network connectivity on this machine.
So in this case I would install the Progressive Web App,
by the way, from the Microsoft store,
but does PWA offer different installation options?
- Yeah, so you can publish PWAs to stores
like you would normal PC software or mobile platforms.
And in this case, you can see that we have the Twitter app,
you've the Office app in the Microsoft store.
But you can also install directly from the browser,
which is pretty awesome.
- Right, but are there any limitations
in terms of browser support?
- So currently browser-based installation
is available on Android via Chrome
and Firefox, Opera, and Samsung Internet.
Chrome also supports desktop installation
on Linux, Windows, and in beta, on macOS as well.
And the next version of Edge, which will be Chromium-based,
will actually also support installation
directly from the browser.
- So in our case the Office app, for example,
it looks native, it can be pinned,
we can launch desktop apps and files,
but what are some of the other types of integration
that we can do using PWA apps?
- So I mentioned that there are standards based APIs,
but PWAs installed from the store on Windows
actually gets supercharged with some of the same APIs
that are available to UWP apps.
So they can access things like local settings,
connect to hardware, integrate pretty deeply with the OS.
So let's take another look at the Twitter app.
- Okay.
- So they were an early adopter of PWAs
and they were actually are first major PWA
to land in the Microsoft store.
So here you can see Twitter.com
using the kind of the normal light, gray, and white theme.
Right?
- And this is the local app open right?
- Yes, this is the local app open.
So if I take that and I close it
and then I go into the system preferences
and I switch my computer into dark mode.
If I were then to open up the Twitter app again.
And I'm going to go ahead and compose a new tweet.
You'll see it launches the app and...
Hey!
The app is actually in dark mode
and it's got the matching styles.
They call it night mode.
But it picks up on the fact that Windows is in dark mode
and automatically makes it match.
- Very cool.
- Yeah, so this is a great example of that.
There was also the example I showed earlier
with the share charm.
And of course PWAs can access other things
like your microphone, your camera,
Windows Hello, Microsoft Pay,
those sorts of things that we've talked about.
And as a developer you can actually test to see
what capabilities are available in each platform.
And then add those as enhancements
to the overall experience.
So you could have a normal log-in form
and then if you're able to use Windows Hello
you could upgrade the experience
to allow somebody to log-in via..
- Alright, so now that you've mentioned developers
I'm going to get you in trouble here.
Why don't you show what a developer needs to do
to actually get all of this up and running
and kind of how you build one of these?
- Sure, sure!
So I'm going to demo this in PWA builder,
which is a tool build by a colleague.
But all of the steps that I'm going to walk through here
could easily done by hand in the IDA of your choice.
- Okay.
- But this is really just for simplicity.
So I'm going to take the TechCommunity website,
which is available techcommunity.microsoft.com.
And I'm going to pwabuilder.com
and drop that URL into the main form here
and click Get started.
Now the PWA builder site is going to go
and it's going to read information
from the TechCommunity site and it's going to build
kind of a scaffolded W3C manifest.
So this is called a web app manifest.
And you can kind of see that on the right hand side there.
There is basically an adjacent object with a bunch of keys.
I'm going to make a couple of updates here.
So I'm going to change this to being called TechCommunity.
And then I'm going to change
the short name just to TechComm.
And then I'm going to scroll down a little bit here
and I'm going to change the language to English,
since that's the primary language of the site.
And for display there are a bunch
of different display modes.
So you can have full screen, you can have
something stand alone, which is what Twitter is.
I'm going to choose minimal UI,
which will give you basic browser...
Basic browser controls, but not all of the browser Chrome.
- Right.
- So just back and forward - Like back button
and that's it. - Yeah, exactly.
And then I'm going to set a custom color as the background
cause I'm not a huge black fan.
So I'm going to do a nice gray
that I've become obsessed with.
So next I'm going ahead and I'm going to
add a custom icon to this.
So I can choose to upload an image.
I've already got the Microsoft logo on here.
So I'm going to go ahead
and choose that from the file picker, I'll drop it in,
and then the site will actually take that image
and generate all of the different icon sizes that it needs
for every platform that you would potentially
want to deliver a PWA to, which is pretty cool.
- Very cool.
- And you can see that has dropped it in here.
And then, we could either download the manifest
at this point if we wanted to and just move on
or I can go to the next step.
And I'll be able to download the manifest later.
So the next step is actually to choose
what sort of service worker recipe I want to use for this.
And, there are a couple of options on the PWA builder site
that can kind of get you started.
So the first one is just having a basic offline page,
but you could also have a copy
of every page that the user views.
I'm going to actually choose an offline copy
with a backup of the offline page as well.
So any page you visit will actually be cached,
but if it can't hit that page on the network
it will fall back, if it doesn't have any cache
it will fall back to that offline page.
- Okay.
- And then I'm going to hit next step again.
And then what I get here is
the final screen within PWA builder.
So it's just a three step process.
And I can choose to download
all of the web code that I just generated.
So that's the web app manifest
as well as the service worker files
that I need to put onto my website.
So I can go ahead and hit save on that.
But beyond that, you also have the ability
to choose to download a package that you can side load
into your Windows machine, which is pretty cool.
- Now just to be clear, you kind of want to do
the web thing first and then load the Windows app, right?
- Yeah, yeah ideally if I had access
to the TechCommunity site I would take the files
that I've generated here and I'd go ahead
and upload them to the server - Right.
- But I can just test out what it would look like
if I was to deliver the TechCommunity site
as a PWA in the Microsoft store.
- Alright let's do it.
- So yeah, I can go ahead and build the package
and PWA builder will build up the AppX package that I need.
Or MSIX as the new format it's going to be called.
So I'm going to go ahead and save that.
I've actually gone ahead, I've already got a copy of it
here locally on the machine.
So I'm going to go ahead and actually jump into PowerShell.
- Because now you've gotta side load the AppX package.
- Yeah, you have to side load the AppX package.
The computer needs to be in developer mode
to be able to do this,
and there's some permissions things as well.
- Right.
- So I'm going to go ahead and traverse into the package.
So this is the Windows 10 package in that PWA zip file.
And then I'm going to go ahead and do this test install.
It's going to prompt me:
do you really want to run this?
Yes, I want to run this.
- So go ahead and.. - That's the point, right?
- Yeah exactly.
So it's going to go through the process of doing that.
And now it says app is installed.
And so if I open up the start menu
you can see we have the TechCommunity site right there.
Launch it, we have our beautiful Microsoft logo in there.
And hey!
There's the TechCommunity site.
Right? - Encapsulated ready to go
as a PWA app and you can see it's even...
There's an icon on the task bar
- Yep! - So it is an app now?
- Yeah!
- Now by the way the Office app
is going to replace My Office in the store
and it's launching today.
So just search for Office.
Now if you're a developer,
what's the best place to get started?
- So the Microsoft Developer documentation
actually has some great information about how to build
PWAs, and of course there's the UWP documentation
if you want to start using some of those with RTAPIs.
Just make sure that you switch
the language preference to JavaScript.
- That's right and thanks for joining us today Aaron.
And, by the way, if you haven't hit
the subscribe to our channel button yet,
do that right now.
And also, keep watching Microsoft Mechanics
for the latest tech updates.
Thanks for watching and we'll see you next time.
(upbeat electronic music)