Introducing Progressive Web Apps and the new Office app (PWA)

Introducing Progressive Web Apps and the new Office app (PWA)


– 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)

2 Comments

Leave a Reply

Your email address will not be published.


*