016: Microsoft | Bringing the Web and App Space Together
Stephanie Cox: I'm Stephanie Cox in this is Mobile Matters. Today, I'm joined by Jeff Burtoft at Microsoft. Jeff is the Principal Program Manager Lead at Microsoft and one of the big advocates for Progressive Web Apps there. In this episode, Jeff and I talked a lot about why Microsoft made Progressive Web Apps such a key component of its overall strategy, how you actually can get a PWA in the Microsoft Store, and what's next for PWAs to drive even further adoption. And make sure you stick around to the end where I’ll give my recap and top takeaways so that you can not only think about mobile differently but implemented effectively. Welcome to the show, Jeff.
Talk to me a little bit about how you first got started in tech.
Jeff Burtoft: So, you know, I actually started many, many, many years ago in audio recording and then somebody had to go to the website. So, I thought it would be cool to build a website and this is when I was in college and nobody who was a real serious programmer was doing web programming, at the time, it was just something that kids did. So, I did it and then I never stopped. It's just always been something that people have needed, companies have needed. So I've always had a job in it.
Stephanie Cox: That's really interesting. That's kind of actually how I got started in tech, too, is that my freshman year of college, somehow I got sucked into doing the website for the newspaper. I didn't know how to do it, here we are.
Jeff Burtoft: Yeah, so it was like an AV Club convert to web developer and then, after that I never even used my college degree because I didn't need it.
Stephanie Cox: I was introduced to you from Alex Russell when I was talking to him about Progressive Web Apps. He name-dropped you and said that you were one of the people that he got started kind of talking about this idea with. So, I'd love to hear more about really how you, kind of, got started with Progressive Web Apps and really what your history is there.
And so, I was going through this kind of stuff in my mind and trying to come up with some designs and most people inside of Microsoft at that point didn't quite get it. They were not thinking that way about apps. And so, I go to this conference and I don't remember what conference it was, I don't remember where it was. I think that it was one that was ran by Andrew Betz, if I remember right. But so, I go to this conference and one of the topics is IE8 or maybe it was a six. It was how to get rid of some version of IE. And so being an HTML5 evangelist. I'm up there, you know, talking about the things that Microsoft's doing to try to get people to move on from IE. And, this guy stands up on the other side of the room and he just is, passionately, at first, I thought he was arguing with me but then he's passionately, like agreed with me about these things that we need to do. And then he ended his statement with, "And that's why we built Chrome Frame." And I didn't know who this was and I'd never met him before. So, I did know Paul Irish, we had done conferences together and stuff. And so I talked to him and said, you need to introduce me to whoever this guy was because I don't think we disagree, I think we actually agree. And this is kind of fuzzy in my head but somehow we were at a bar. I think that's where the after-party was. And, Paul introduces me to Alex and so we immediately start talking about, you know, like the next steps and the next thing you know we're like drawing pictures on napkins. And trying to explain to each other how we think the Web should transform itself into a platform where you can run apps. And so, I'm sitting here with this guy from Google and it's like wow, we actually have this same idea. And it turned out, he wasn't on the other side of the fence he was thinking the same way I was. And so, that was kind of my first experience of working with someone at Google, like working with someone on the Chrome team to come up with some ideas. So, I kind of continued on. And we built out what we called hosted Web apps, which is the prequel to what we have as PWAs today. They were based off more of a custom manifest. We did not have service workers, but we had an outstanding app container that they ran in. And then, Google was building out what eventually became known as Progressive Web Apps and they started with service workers, and so Alex and I I think we kind of formed a bond from our original public debate. And, we just kind of started sharing ideas with each other, over the years, and talking about how, you know, we were making these changes here and they were making those changes there. Eventually, we totally got on board with taking service workers on and adopting service workers. And, they ended up doing the web APK, which was very similar to what our app container was like. And these things that we were kind of built-in parallel became one standard. And it just one of those places that just so awesome we can kind of put down the difference between the different goals we might have as the browser makes and think about doting a great experience for users that is standardized for developers, and that in my mind is how we got the PWAs today.
Stephanie Cox: That it's such a cool story!
Jeff Burtoft: Yeah! As Alex said, there's tons of other people who were out there like Andrew Bettz himself who is doing the Financial Times. They were using app cache basically to create what service workers does today. You know, there's people all over the place and, you know, Mozilla was doing the Firefox apps, which really kind of laid some foundations, too. People all over the place doing different things, that when once we start working together, it was boom it was standardized and we're kind of on the path that we have today.
Stephanie Cox: Would you say that Progressive Web Apps are really kind of like an evolution of really what web apps were and how they've kind of evolved from a technology perspective over the last decade?
Jeff Burtoft: Absolutely. I think that our history has been pointing us in this direction. If you look at things like even the web app manifest spec, it started out as part of a widget spec years ago. Then, it was deprecated and then we opened it back up. It's just one of those ideas that you couldn't keep down. And so, I think that this isn't something that's brand new. This is really just kind of a pinnacle of a bunch of technologies that have evolved together.
Stephanie Cox: When you think about Progressive Web Apps and compare them to kind of traditional web apps that we have been used to for a while, what do you think are the main differences?
Jeff Burtoft: Going back to the original discussion that we were having about web apps many years back, one of the things that Alex was really passionate about was keeping URL. One of the things that I was really passionate about was always up to date. And so you know today when we think about like web apps, those are things that are just part of being on the web today. And so, there's certain things that should definitely progress through an application, whether you're just a website or whether you're running in a Progressive Web App or anything in between. And so, you can't really draw a line in the sand and say, well you know this is the feature that makes it a Progressive Web App. You know it's really about looking at the Web and saying, hey there are all these really important things. And when you get enough of them together, the experience becomes an application. Like it's often hard to even define the difference between a web page and a web app, right? It's like, we're just kind of use them interchangeably. But, it's really about having the right technologies in place to be able to build an app experience.
Stephanie Cox: When you think about the benefits of PWAs, from a developer perspective what immediately comes to your mind?
Jeff Burtoft: We think a lot about the end-user experience. But, developers themselves have been looking for ways to participate in the app ecosystem and you can look at it from two different ways. You can say, well I want to be in the store and, I remember, if you even talking about like the Financial Times, they had a delivery over the web, but then they always had like a placeholder in a store, that kind of pointed people to their web app. And so, that's one of those things like developers, sometimes need to be able to participate in the app ecosystem. Like they need to just be able to say that they have an app and point people to an app store, and so Progressive Web Apps are powerful enough to handle that scenario. There's also sometimes a battle for just a spot on the home screen. Just a place where you can have a button, where you know a user is going to keep coming and engaging with your app. And so, Progressive Web Apps allow you to have your own space on the home screen. They allow you to be one of those first-class experiences that users expect. So, when a developer asks me "Why should I build a Progressive Web App?" One of the things that I try to take them back, is this. It's well let's look at the foundations of what a Progressive Web App. I mean, first of all, if you're not running on HTTPS, you should be, right? That's just kind of a given, at this point in time in the web developers’ career. But, let's talk about what service workers could do for you. Let's talk about the benefits that you can get there. Let's talk about what adding a manifest to your site could do for you and the benefits that you get there and kind of take them back through the process of the different pieces that build a Progressive Web App rather than just saying hey you should have a Progressive Web App because then you get X Y Z.
Stephanie Cox: So, what do you think the biggest challenges is as someone's considering you know whether or not to build their first PWA?
Jeff Burtoft: You know it kind of depends on the goals of the developer, because again, one of the great things about PWAs is that, it's helping different developers accomplish different goals. But, if you are comparing it to a native app and that's actually one of the strategies that we see more and more often. It's that we have this app and it's in this store, we have an Android app, we have an iOS app, we have a Windows app. We would really love to have one app that runs everywhere. And so, if you're comparing it to a strategy for native apps then you're basically looking at the value prop you get for a PWA and the value prop that you get for a native app. And it's a challenge sometimes to meet all of the goals that you get with a native. And, I can tell you that's one of those things that we at Microsoft are thinking about all the time and the folks at Google and Mozilla and Apple are thinking about all the time, is how can we make that experience on the web just like a native one? I mean, if you think about just even like with some of the new CSS specs that are coming up with the Houdini and paint API. They're designed around being able to create that same immersive experience for users that you can get on a native app. So, some developers when they're looking at their strategy from that perspective they've got to figure out can I meet the same goals, the same design principles, the same needs that I'm meeting with my native app? And if I can, totally, let's do Progressive Web Apps.
Stephanie Cox: If someone came to you and said, I really want to create a PWA for this specific use case, what's your best advice for them to get started? What questions would you ask them, what advice would you get?
Jeff Burtoft: That's a great question and I'm want to use this time for a shameless plug where I talk about the web tool that I work on myself which is called PWA Builder and the whole reason that we have that is to answer that specific question. We know that there are developers who have a web app today and they want it to be a PWA and they don't know how to do it. Or they want guidance or they want direction. And so, that's exactly what we do. We'll take your Web site in. We can build manifest for you, build service workers for you, we can help you get packages to publish to different stores if that's the goals that you're trying to get to. And we're even now, we're starting adding features that help you become more app-like to meet some of the app expectations that users have when they're using a PWA. So, that's where I direct them and my goal is that we can be that that launchpad for developers when they're making that transition. We've got some really cool companies who have partnered with us including Google and Mozilla and Samsung and other companies like that. But, for me, it's kind of been my passion for years and we're continuing to try to figure out new ways to help developers get going on PWAs.
Stephanie Cox: As you talk to developers and they use PWA Builder, what kind of feedback do you get from them?
Jeff Burtoft: The best feedback is when I get node feedback because that means everything just worked. And so that's kind of always nice, whenever we can look and say, Oh hey you know these apps are out there because of PDA Builder. And, one of the big feedbacks that we get is that PWAs are still not as simple as we would like them to be. And so, I think that's kind of some of our challenges going forward, both as browser makers and standards bodies and community frameworks. There's still more that we need to do. The manifest is very powerful, but I think there's a lot of potential that hasn't gone into that yet. I think there's still a lot of things that we're using other manifests for or we're using metatags for where we're even using permissions for. A permission request where that could all be done in the manifest. And, I think it would just make a simpler experience for developers. Service workers also a place where a lot of developers can get discouraged. We try to offer some really basic service worker options and we're gonna start adding a few more that have a little bit more complexity. But, our goal was always to give you one or two pieces of functionality that will pretty much work without editing, and then as you grow, you can build on top of that.
But, we think there's still some stuff that can happen in service workers that we're starting to see every developer do. That we can standardize so that it just happens automatically for developers. So, as we get that feedback from users that they have challenges with this or they have challenges with that. Sometimes it's just a challenge explaining what a PWA is. We try to try to get our heads together with the other developers who are contributing to it and see if we can figure out a way to solve that with the tool. Sometimes, we can't. Sometimes, it's just something that's takes something bigger. And that's when we move in the standard bodies and things like that. I love the challenge of trying to find the gaps that we have in the platform today and solve them with a tool, and then the ultimate affirmation is when you build something into a tool, and then it gets adopted and standardized and turned into a standard that works everywhere.
Stephanie Cox: I know you're at Microsoft and they have really bought in, a ton to PWAs and made a big push as their overall strategy. Can you talk to me a little bit about, just from Microsoft perspective, how you think about Progressive Web Apps and why that's been so core to really what you guys are doing?
Jeff Burtoft: Yes. This goes back to Windows 8. Windows 8 is when we started looking at the Web as a first-class platform. And that's kind of a term that we throw around at Microsoft "first-class platform". But what that means is that you should be able to build an app with the web and a user should just see it as an app. So, I'll be frank with you one of the challenges that we've always had, is getting developers to do something specifically for Windows. And it's not necessarily a bad challenge to have because, really, we are looking more and more for Hey, how can we standardize what we're asking web developers to do? But on Windows, moving from that hosted web app world, where the hosted Web app was a first-class platform on windows. Into the space where now the standard a Progressive Web App is a first-class app on the Windows platform is really opened up the platform for developers and then, of course, in turn for users.
There are a couple developers and companies who have been really vocal about their experience of bringing PWAs to windows. And Twitter is always one that we go back to because they're a leader in the PWA space, for sure. They were one of the first apps out there to release a PWA. And so, when we look at that Twitter, about a year ago, was maintaining both the Windows app and a progressive web app. And we sat down with them and they kind of had this idea of saying, well what if we just had the progressive web app? And that is what our app was on Windows. It started a really great step in their app lifeform because suddenly the windows app was always up to date with what was happening on the web because the PWA was always up to date. We started getting new functionality that we were able to do on a PWA on windows that couldn't, or wasn't, being done on the old Windows app. And so, we started it as the improved experience for users. We started to see a better, more focused team at Twitter and suddenly like Microsoft's goals of getting people to build PWAs and Twitter's goal of building a PWA started aligning. We've seen many companies since then start bringing their PWAs. Just a few weeks ago, we welcomed Hulu on to the platform with their PWA and it's just awesome to see these experiences out there replacing what was traditionally a native application and users totally embracing it and totally accepting it and having great things to say about it. So from our perspective at Microsoft, we see that and we're like, there is a world where there's always going to be a native application need. If a web app can do everything that your native app can do, then you're doing your native app wrong. You always have access to more performance and more APIs in that layer. And so, this world where we have these powerful native apps and then we have this whole army of Progressive Web Apps out there filling the rest of the gaps, really becomes a complete platform for our users. And as we continue to grow in that space, we've talked a little bit about our next step of also doing the install from a browser for Progressive Web Apps. So we’re opening the opportunities of where PWAs can be installed. I think it's just going to make a really solid app ecosystem for our users in the future. And we're also doing it in a way that supports the approaches that developers have been taking to build applications for years.
Stephanie Cox: That is great to hear, at least from my perspective, because I'm a big fan of everything that comes with Progressive Web Apps and everything that you guys are doing. So for those people who aren't very familiar can you explain a little bit about how PWAs work in your store?
Jeff Burtoft: The essence of PWA is you have an HTTPS app that can work offline and can manage its own traffic, and then is driven by something that is called a W3C manifest. That manifest is really just a collection of metadata that tells your operating system what this app should look like, how it should behave. So things like icons that should be used in start menus, things like splash screens, theme colors, and those type of things. Well, those were the same type of things that we used to ask for for a Windows app. So, there is a really simple way to just take your PWA and put it into the Windows Store. The very first step is you build a PWA. And so, that's where you need a manifest, you need to have service workers or some robust you know offline support there. PWAs should be cross-platform. So, it's something that you need to test in all your browsers. You need to test it on your Android phone and your iOS phone, on your Windows tablet and your Windows PC. But a PWA just works everywhere. Then to get your PWA listed in the store, we do have one additional step right now and you can just do that through PWA Builder. Where it gives you a, what we call, an AppX package that gets submitted to the store. Now submitting to the store, like that part is pretty simple, but to me, the store is really where you then go and build the listing page that you have for your PWA. And that's really kind of the big step that we want you to take. We have looked many times at ways that we can go and automatically publish apps to the store and everything, but what we've found is whenever there wasn't that developer clear intent where they went and added a description and screenshots and age ratings and those type of things. It's much better when they just go to the the the dev center and do it themselves.
So that's what it takes to get your PWA. It's just a PWA, but then you go to the Dev Center, put the package that gets spit out of PWA voter up there and then you fill out your information for that store listing page. It's much like what you would do today if you're going to do a Chrome extension in the Chrome app store or something like that. And then we'll see where that goes in the future. Like I said, we're always looking for ways to simplify and make those processes easier today than they are today.
Stephanie Cox: So speaking of that, what do you think is next for PWAs, in general?
Jeff Burtoft: That's a great question. There is clearly work that needs to be done on today's PWAs. I mentioned there's still some tasks that are not as straightforward as they could be for web developers. So today, there's still just a lot of work that we need to do on what we have out there. The next thing is, is that there's a lot of functionality that we hear from developers that they are missing from the cross-platform aspect of PWAs. So one of those things is on Windows, one of the things that we've kind of tested out is giving Fio access to PWAs. And so, we have like some video services that will use that to store offline content for viewing when you're not connected to the Internet. And, it's something that works in conjunction with their service workers so that you're able to load up your page and then load a video file from your local hard drive and play it offline. Those type API are missing from the standardized web. And so, there's already some discussions in the inside of Chromium today to ways that we can make that happen. But, some of those features are going to be the next frontier for PWAs where we're able to enable experiences that can't quite be done yet today, cross-platform. There's still things to batching and jump lists that we've had discussions with other browser makers about that are just kind of standard in applications but aren't yet there in PWAs. And I think that those type of new application layers are what's in the immediate future for PWAs. And, you know, I do have some ideas for what I think are really the next chapter, the next chapter. But, I probably need to save that for an undisclosed bar and an undisclosed city, you know, with Alex into some napkins and some yelling and some hugging and all those type of things to figure out before I put him out there.
Stephanie Cox: I love that you're already thinking about that! Like not just what snacks, but what's next.
Jeff Burtoft: It's, just like I said, I mean this is kind of my whole life. I've kind of been thinking about bringing these spaces together, the web and the app space. And, when we start to see computing growing so quickly and in new areas with new inputs and stuff like that. You just have to wonder, it's like how is the Web going to change with that? And so, I think there is going to be some exciting things that we can do to the Web that keeps it really connected to what's happening in computing today.
Stephanie Cox: So, I know you mentioned Twitter as a great PWA example. Do you have any other favorites that you just really love what they're doing?
Jeff Burtoft: You're making me choose between my children? Is that what you're doing, telling me to choose which one?
Stephanie Cox: Well, all of them equally. You could pick a couple.
Jeff Burtoft: I'll tell you, I've loved what Starbucks has been doing for the last couple years. The experience that they're building for ordering online and, just the approach to simplicity that they've taken is really inspiring. And I'll give you an example. They you know when you order a drink with the PWA, they just they have a barcode. That's your payment account and that's cached offline with a service worker. And then it's what you used to pay, wherever you go into the store and they scan it. So, even if you don't have Internet connection in the store, your scans still works but that could have been really complex. I could've used a web service, caching a request inside of a service worker, then waiting for a reconnection to send that request through, and then a confirmation response. But instead, they used a barcode and it's one of those things. They just have a nice, light PWA that works whether you're online or off. So I, myself, I live in South Texas and I live in a little town called Miko, which is southwest of Austin, west of San Antonio, and I know what it's like to not have Internet connection. It's quite common. If I drive outside of my wifi area, then it stops. And so, I can't understate enough how much the ability to work offline aids in experience. So what they've done is definitely one of my favorites. If I had to choose another one it would probably be Pinterest. They've been very public about the work that they're doing in the PWA space. And Zach has gone out and really kind of talked a lot about what they've tried, what worked and didn't work and he's gone out to developer conferences and everything and shared that and that's always appreciated. And, seeing them take on the app-like experience and the attention to detail, it's not just a mobile web page that has a service worker behind it. It's a real app experience and like as a Pinterest user it's something that you've kind of grown to expect. Pinterest is just a well-refined experience on a native app and so taking that same approach with their PWA, I think really is going to set them up for success. And I think it's a good kind of a lighthouse example for other developers to go out there and make sure that their PWAs are meeting that same quality level.
Stephanie Cox: Ever since Alex Russel mentioned Jeff’s name to me during our interview earlier this year I knew I had to have him on the podcast. And his interview you guys was chuck-full of great stories and information and I hope you felt the same. Personally, I loved hearing about how he first met Alex and how they talked about the future of the web at a bar while they're writing concepts on napkins. You can't make that stuff up. This story plus all the others he shared are just a prime example of how beneficial it is for various individuals within the development community and really any community for that matter, to come together, share their ideas and push the entire industry forward. Now, let's get to my favorite part of the show where we take the education and apply it to your business. There are so many great insights my conversation with Jeff that can really help transform how you think about mobile. Let's dive into my top three takeaways.
First, Progressive Web Apps are really an evolution from web apps that we've all used for more than a decade. In fact, Steve Jobs first introduced the concept of a web app in 2007 when he introduced the iPhone. It was actually his “one more thing”. Now, we all know that Apple obviously went a different direction a year later with the App Store but the technology behind web apps didn't go away and many developers have been successful using them for many, many years now. And PWAs are just an evolution of this concept and I really liked how Jeff explained it. They’re really a pinnacle of technologies that have evolved together to get us where we are today. And what's really exciting for me is the standards of PWAs are constantly evolving. There's definitely more to come in terms of functionality in the near future as well as the long-term.
Next, one of the common questions that gets asked a ton about PWAs is will they show up in the App Store? And for those of you, that really want to have your app appear in an app store, good news: for Microsoft as Jeff mentioned you could actually get it listed in Microsoft store. To get your PWA the Microsoft store you're probably going to want to start by going to PWAbuilder.com to get the package that you need to get it uploaded in the dev center there and then you're going to fill out your store listing page and that's going to be similar to what you've done potentially with a Chrome extension in the Chrome App Store.
Now, let's talk Google one of the exciting announcements from Google recently was around trusted web activities and that's going to make it easier to get PWAs into the Google Play Store too. So now we're talking about PWAs be available in both Microsoft and the Google Play app stores, so what about Apple? Well, unfortunately, Apple hasn't really made it easy for PWAs to be in the app store yet, but there are people that sticking PWAs in a native app shell and then making those discoverable in the App Store, so that is one option, but I'm really looking forward to when Apple makes it a lot easier to get PWAs in there.
Finally, if you're looking to get started with a PWA for the first time then you really need to check out PWAbuilder.com. I know Jeff’s a little biased because he's responsible for the tool but it truly is a great resource for getting your feet wet with PWAs. It's designed to answer all of your initial questions you may have when exploring a PWA for the first time and it’s a good launchpad for developers as they start making the transition to PWAs.
But most importantly you really need to consider what you're trying to accomplish with your PWA before you get started. What are the goals? What is the functionality that you want to include? All of that's really important in deciding whether or not a PWA is the right choice for your business. And if after you answer all those questions that is, there are great resources out there like PWAbuilder.com and others that will really help you figure out how to get started. And make sure you check out next week's episode when we're talking to another leader at Microsoft more about Progressive Web Apps, the concept of progressive enhancement, and so much more. If you enjoyed this episode, then you're going to love what we have in store for you next week.
I'm Stephanie Cox and you've been listening to Mobile Matters. If you haven't yet, be sure to subscribe, rate, and review this podcast. Until then be sure to visit Lumavate.com and subscribe to get more access to thought leaders, best practices, and all things mobile.