 Good afternoon. Thank you all for being here. You're almost through day one of FIO, so we're really, really glad that you're here. I'm Arjun. I work on the product partnerships team here at Google. And I support Chrome. Our goal is to help developers, like all of you, build great websites so you can be successful and make those experiences for everyone everywhere. While framing the context of this talk, I was naturally inclined towards anchoring it on the core benefits of the web. It's massive reach, frictionless access, and the fact that a website just works no matter where you are. You could be on the fastest internet connection, or you could be busy playing the often dyno game. It just works. And yes, this is what has kept the foundation of the web solid and steady for over 30 years. But there's so much pathbreaking development that's happened in the past few years with service workers and progressive web apps or PWAs. Things are changing. Just by making small changes, developers across the world are seeing that they're delighting their users, they're finding new ones, and they're ultimately seeing great results. Here are some examples of this. Tokopedia, the biggest marketplace platform in Indonesia, is seeing that by using a combination of AMP and PWA, they're seeing five times higher conversions on their website. And if, like me, you enjoy listening to music, you can do that on Spotify, on a Chromebook, on their progressive web app, on desktop, and they're seeing higher engagements from these installed PWAs. In Brazil, Terra or Teha, a news publisher has seen that users are sharing more articles after they implemented the web share API. And Buker or Buesha, I might have missed that up. I apologize to anyone who speaks German, but a leading German books and media retailer has a top-performing PWA, and they use trusted web activities as a building block for their pre-store experience. These core values of universal reach and reliability, when you combine them with the new superpowers, they can help you solve real-world problems for all your users. Let's walk you through my daily routine as an example. So the first thing I do when I wake up, even before the caffeine kicks in, I check my email, messages, what's going on in the world, what's happening back home in India. And sometime during the day, I hit my lowest productivity R. And after a heavy lunch, I go on to social media, and I ask some very profound questions. That's still bothering me, by the way. And then once I go home, I obviously sit on my couch and I'm binge-watching the latest episodes of some show. That's a crazy routine. It goes against everything they tell you about digital well-being, so please remember to hit pause every once in a while. Here's a quote from someone who lives and breathes the internet. The point is, I'm in this business, but when I wear my user hat on as a user, all I want is a fast, seamless experience. I don't care how I would have consumed that news, those tweets, or those shows. I just want it to be seamless. As developers, all of you have a choice. Which of the superpowers will you use that will delight your users? You have different locations that your users are present in, different markets mature, emerging markets, different connection types, low-end devices, the fastest smartphones. You're building for everyone, and so it's important to keep that in mind as you look to be successful in the long term. There are developers amongst you who've made some great choices to delight their users. Let's talk about Twitter's web experience. I remember when Twitter shipped their PWA two years ago, it was a turning point in the broader adoption of PWAs. I'd heard many reviews about the Twitter experience, the new PWA being light, fast, and everybody was just really happy using it, and not all these people worked at Google. These folks used the new capabilities of the web across mobile and desktop, and they're able to do this all in one code base, which has resulted in business outcomes. Sometimes, a focus on performance can make all the difference. The Times Group, the largest media conglomerate in India, has seen that by just having a laser-sharp focus on performance, a lighthouse score that is always at 100, they're seeing business outcomes, and they're doing this in a remarkable way. And then finally, Hulu, an online streaming service, identified an opportunity that was almost entirely based on user feedback. The users were saying things about a great website, but they were complaining about it not being installable, and so they brought the two worlds together, built a desktop PWA, and it's not been too long, but they're already seeing great business results. Wouldn't it be cool if these companies were here to tell you their stories in their own words? So as you applaud me for my genius setup, please welcome Jesser and Charlie to tell you about Twitter. My name is Jesser, and I'm a product manager on the web team at Twitter. And my name's Charlie. I'm one of the engineers who helped build Twitter's new PWA. And we are very excited to be here today to talk about Twitter's journey of building one universal web app to serve people in both emerging and mature markets. So Twitter is the platform to find out what's happening. Our mission is to serve the public conversation. That starts with giving everyone the access to create and share ideas and information instantly. One of the ways we aim to do this is by building experiences that are available to people no matter what device they use. So we were here in 2017 to talk about one of those experiences, our mobile website that we had just launched as a PWA. But a lot has changed since then. Twitter's PWA has grown since 2017 and is also more powerful now. We're available on almost every browser and almost every operating system. This wide reach spans a huge diversity of use cases, customers and devices. So this for us prompted a fundamental shift in how we build our web experiences. We viewed our Twitter users as our customers. And we wanted to ensure we were building a universal app that was responsive to their diverse needs. One of the major benefits of building a universal app is that it allows us to build once and ship to everyone in one single code base. Our users benefit from regular updates and consistency across platforms, which makes a better Twitter experience overall. And organizationally, this allows us to move faster as a team and have more focus on the things that matter most to our users. So in order to achieve our vision of building a universal app, we needed to extend the functionality of our PWA to all devices. There are a lot of devices out there, some of which are on the screen. And the team brainstormed dozens of things that we needed to improve. We built our roadmap by launching smaller units of work and getting public feedback at each step of the way to help us iterate and improve on the user experience. We started with the mobile logged in experience and have worked our way through replacing some of our legacy desktop apps with the PWA. At each milestone, we considered, what was unique about the set of customers that we were adding? How did they access Twitter differently? And how can we meet their needs through the web product? In particular, when we did research across devices and markets, we found a difference between mobile and desktop use cases. Mobile web is expected to be fast, lightweight, and cost-effective. People tend to use mobile web when they're on the go or looking for quick information on Twitter. Desktop web, on the other hand, is expected to be more powerful, task-driven, and additive to the mobile experience. People tend to use desktop web in a stationary setting with more time and intent to consume and create conversation on Twitter. So given the differences that we saw between mobile web and desktop web, we needed to pick one as a starting point. We know that the majority of our users on Twitter use mobile devices to access the public conversation every day. So with that in mind, we decided to start with mobile first. It offered the largest opportunity for growth for us and also the most room to improve technically. We know that there are several barriers to using Twitter on mobile, including poor connectivity, slow mobile networks, expensive data plans, and also low storage on devices. So in 2017, we launched our first iteration of the PWA, branded as Twitter Lite. It was faster, lighter, and engaging, giving our users the best Twitter experience at a lower cost, hence the name Lite. In order to serve the global conversation, we need to make sure that Twitter is available to everyone and our PWA is helping us do just that. And since then, we've been growing Twitter's user base with the help of the PWA. Tweets sent from the PWA have increased by nearly three times since the launch. And our users love the PWA as well. They're each using it for different reasons, from data constraints to storage constraints. We wanted to increase the discoverability of the PWA, so we decided to list it in the Play Store, which is where our users went to look for apps. Since it was 2017, we did this via a WebView wrapper, which helped us achieve the level of discoverability we were looking for and essentially reach our users. When we did this, the install size was much smaller than our Twitter for Android app, which was a huge win for our data and storage constrained customers. We also saw over 5 million installs of the app from the Play Store since launch, which increased the number of people who have the PWA on their device. So by listening in the Play Store, we were able to increase discoverability, which allowed us to reach more people and grow our user base. Listing it in the Play Store also gave us visibility into how our users perceived our app at scale. The reviews and ratings across countries and languages increased our ability to find gaps in the user experience. That's especially important when you're building a global product from San Francisco like we are. And today there are a lot more options for distribution. We started with Add to Home Screen, used a WebView wrapper to bring our PWA to the Play Store, and have also used PWA Builder to bring PWA to the Windows desktop. We're now exploring using trusted Web activity as a building block instead of the WebView. All these options mean that whenever a customer looks for Twitter, there's a way to install it and keep it on their device to help us grow our user base. So all these distribution mechanisms mean there's even more ways to access the Twitter PWA. And as Jessra mentioned, we want to think about how our customers are different. But technically we can go one step further and think about how their devices are different as well. Though we started by building the mobile experience, our goal has always been to create a richer, faster experience for all of our users. And today I want to talk about how we did that for desktop from a technical perspective. So this is the traditional way that you might start thinking about how to create a responsive experience for your users. You'd segment the desktop users on one side and the mobile users on the other. But this method doesn't really capture the level of nuance that exists in the world today. Many people use physical keyboards with their phones or live in places where wired internet, as you might have on a desktop, is actually slower or more expensive than their wireless connection. Instead, we thought about our users and their devices in a different way. Instead of looking at a device level, we broke down the properties of their devices and treated them as parameters into our application. And I think that this is a really great way to think about your PWA and how you build it. What's the output of an app when the internet is 2G? How does usability change when a mouse or a keyboard is detected? What about if the device is low on memory or it just doesn't have a lot of memory to start with? Using these techniques is one of the reasons we decided to keep DataSaver available on the new Twitter.com desktop site. We recognize that there are many people in the world who can benefit from this, even if they're on a larger screen experience. Perhaps the most important tool to help us make these changes wasn't even a web API. It was actually a design pattern. Our awesome designers have worked tirelessly to help us standardize the way we use small repeated elements across the site, like the button you see here. And it means that anytime we're working on a new page or a new feature, the method for implementing this is not only very clear design-wise, but it's well documented and easy to drop in code-wise as well. And what I've discovered is that the concept of progressive enhancement, it really lends itself to merging components and parameters. On Twitter, we have a ton of floating action buttons, and these allow you to do things like compose a tweet, reply to someone, or create a new list. And anytime we use these throughout our code base, it's always the same single component. So when we worked on bringing our PWA to feature phones, like you see here, or other smaller devices, we found the floating action button was often in the way. It was too big, it was hard to get to without touch and support. And so instead of using that button, we used a smaller action bar, and this was powered by the extra physical keys that those smaller devices have. So I wanna show you how easy this was to do. We use React at Twitter, so that's what I'm showing here, but you could do this with any component-based framework. The gist is that we have our floating action button component, and if we detect that the user agent is a feature phone, we instead simply render a soft button bar. And what's fun is that this is really the code we use. We have a few more properties, but it is this easy to alter functionality throughout the entire website, and I think that this is a really neat example of progressive enhancement, because it helps the developer make things more easily and provides benefit to your users as well. And we use this pattern to help us create better desktop experiences. For instance, when using an overflow menu, on mobile, you see it as an action sheet, while on desktop, it presents instead as a dropdown. On larger screen devices, we can take advantage of all that extra screen real estate to show related content alongside a screen. This adds on top of the mobile experience. We can even go one step further and show two screens side by side, like your DM inbox and a particular message view from your DMs. This makes navigation easier and more powerful for our users. Finally, because we've been iteratively experimenting with desktop, we got feedback along the way that the widescreen design didn't take full advantage of all the things that make desktop unique and powerful compared to mobile. Based on this, we've been experimenting with newer designs that allow easier access to features customers care about, like lists, bookmarks, and more to come. So we hope our journey can inspire you to build a single code-based PWA, and we have a few tips we hope to help get you started. First, progressive enhancement isn't just about the APIs you use. It's for the way you design, the way you roadmap, and the way you think about your product as well. Next, make sure to get your core experience right first. Ensure that the code that everyone sees is the very best code that you write. Also, think not just about the users, but their devices and the properties of those devices. And finally, use those properties to create a responsive experience that adapts to the diverse needs of each user. So Jester and I didn't do this alone. It takes a village to make something this large, so a huge thanks to the entire team back at Twitter. As you might have noticed, a few of them are in the room today, and so we look forward to hearing from you. We really love working on this PWA, and we truly hope that you enjoy using it. And now, I'd like to welcome Rudra on stage to tell you more about how Time's Internet builds for their users in India. Thank you, Charlie. That was great show. Hi, everyone. Namaste from India. I'm Rudra Kasturi. I'm a growth at Time's Group. I'm very excited to be here to share Time's web success story with all of you. At Time's Group, we build products for all segment of users as we touch their lives in every day in different ways. Some of these are just not products, but iconic brands in their own right. Our business is large and spread across multiple use cases like news, languages, music, OTT. You name it. At Time's Group, we have a business around it. Now, this comes with huge growth opportunities and unique challenges. A recent study states that Internet users in India will almost double alongside smartphones' growth in next three to four years. But the reality is, majority of these users are on slow connections, on low-end devices, with low storage capacity. And if those constraints weren't enough, language is also a key consideration when building for these users. There are over 200 languages spoken in Indian subcontinent with different scripts and dialects. We have seen our Hindi users have surpassed English and are growing at 94% here on Earth. This is where we have identified a huge opportunity. As I said earlier, at Time's Group, we build products for everyone. So we focused on improving the user experience on our Hindi property now bar at times, or we love to call it as NBT. NBT has been delighting users since 1947 and today we proudly serve 65 million users on web. But most of these users are in small cities with poor connectivity. Keeping this in mind, we build NBT PWA, which is fast, light, and reliable. My team contributes to the growth and revenue for the company, so our PWA is built on two pillars, performance and engagement. Performance is critical for all businesses in India and of course across the world. For every second delay on page load, we lose substantial traffic. So we have performance budget, which ensures we don't exceed JS limit on each page. We have a maximum JS bundle size and total image weight and a specific load time to ensure our time to interact and to always stay under five seconds on most of the networks. And we also have a system in place if any of these limits has crossed, we have an electric system that triggers and identify the issue and we quickly implement to fix it. As an example, we use webpack bundle analyzer that helped us to reduce our JS file size by 70% over the past few months. As a media site, we depend heavily on images. So we used intersection observer to prioritize and lazy load images, ensuring the right images are loading on the right time. And we don't want our users to see any blank screen or an offline dyno when they're offline. So we have used caching strategies using Workbox so user can still consume top 20 stories on NBT when they're offline. With all the great efforts, we launched NBT PWA super fast, super light and instant loading. I love this screenshot. And we use Lighthouse as a source of truth to measure this performance. And now our pages are super fast. Now we want to ensure that our users to stay engaged more and consume more content. Keeping this in mind, we used active home screen prompt that waits to prompt the user when they're most likely to install, typically during breaking news or big events in India like elections, budget, old cupricate, and so on. We want to earn the love of our users so we let them experience our PWA first before asking them to install it. And the best part are marketing teams don't have to spend a thing. They don't have to spend a thing here. Because our average spend to install an Android app is range between 4,200 rupees, depends on the quality of the user you acquire, which is about a dollar or so, PWA installs are absolutely free. And the biggest achievement with this is we have driven engagement higher by almost 50%. And finally, we used WebShare API that triggers the Android native share dialogue to give users control over how and where the data is shared. Since launching it, we have seen increase of 24% coming users coming to NBT via the shared post. With all of these, we have seen incredible wins on NBT PWA. We saw a stunning 72% increase in acquiring new users. And we achieved our engagement goals by increasing the average time spent by 31%. Which means the users are sticking around for longer sessions, watching more videos, and consuming more content. And finally, I love this slide. There was a clear revenue impact for NBT as we recorded 59% increase in our network revenue. There is no magic... There is no magic bullet here. Keeping performance and engagement as a key focus areas, we are able to achieve these results. Also, we did the impossible. I'm sure most of you know Alex Russel, the tech lead for PWA. When he saw NBT PWA trace, he went and tweeted this. Thank you, Alex. So if you're wondering where we want to take our development effort next, with incredible wins from NBT, we have launched PWA in six more languages, Telugu, Tamil, Marathi, Malayalam, Kannada and Bengali languages. And across multiple brands, such as the Economic Times, the biggest business news in the country, Ghana, our music streaming service, Dynote, our table reservation service, and many more. We strive to be at the forefront of web development, so we have used trusted web activities as a building block for our Android offering. Ladies and gentlemen, I'm super excited to announce on this stage for the first time, NBT 2.0. Attracting and retaining app users is a tough problem for users on low-end devices with low storage capacity. In such scenarios, smaller apps seal the deal. Using trusted web activities, we have created a lighter experience for the users on low-end devices. We are now able to offer an experience that is less than 1.2 MB and five times faster to install. You can all catch this lighter experience on Web Sandbox. Please don't miss it. And finally, I would not have this opportunity to present these amazing business outcomes if it hadn't been for the team. A huge thanks to all of them on the screen and the Google team who helped us to achieve these results for the behind the screen. Now, I would like to call on stage Matt from Hulu to explain PWA's success story on the desktop. Thank you, Rudra. Good afternoon, everyone. My name is Matt Doyle, and I'm a product manager at Hulu. Hulu is the fastest-growing streaming service offering live and on-man TV and movies in the US with over 28 million subscribers. We are home to acclaimed Emmy award-winning Hulu original series, The Handmaid's Tale, an Oscar-nominated documentary film, Mining the Gap. My team's mission at Hulu is to ensure that the Hulu experience is especially tailored to every single device that we're on, whether it's the TV in your living room, the computer you're using right now, or the phone in your pocket. And today, I'm going to talk to you about Hulu on desktop. In September of last year, we relaunched Hulu.com. It was built from the ground up with a brand-new UI and a modern tech stack using Node and Next.js. And just last month, we were awarded the 2019 People's Voice Webby Award for Best Media Streaming Website. As we heard from Twitter, the beauty of developing for web is to build once and ship to everyone. So, my team's work was done, right? Well, not quite. It turns out, we didn't quite ship to everyone. You see, we developed a universal Windows platform application for desktop in 2015. And since then, it's gone largely untouched. It was built on our old stack, lacked a ton of features, didn't have live TV, and the reviews weren't that great. But if there was one positive that we could take away from what our viewers were saying about our legacy app, it was that our new website was better. At Hulu, we actually saw this as an opportunity to try something new. And that's what I'm going to talk to you about today. We began by asking ourselves, why did our viewers keep coming back to this legacy application, even though it lacked so many features? Well, simply put, it was installable. Hulu viewers loved having their favorite TV shows and movies just to tap or click away without having to go through their browser. And we know that having Hulu on a user's home screen drives repeat visits and increased engagement. This is when we had our light bulb moment. Desktop PWA. Leveraging the fundamental PWA components would allow us to replace the legacy app and would also allow us to iteratively test PWA without rolling out to all of our viewers. So where do we start? Well, we chose to start small. A basic PWA made up of a web app manifest and a service worker. Simple enough, right, just two things? Well, we actually found there quite a few challenges in these two components. Here's some decisions that we made that might help you when you approach your own PWAs. The first was scope. We used the ability to set the scope of our service worker to allow us to incrementally roll out our PWA. We scope the server worker to its own path at hulu.com at slash app. Then we pointed a native app wrapper to this path. This allowed us to seamlessly migrate users from the legacy app to the new Hulu desktop PWA without impacting the entirety of hulu.com. Here's what that looks like in our web app manifest. We plan to continue to utilize this approach to incrementally test PWA through the web browser as well and it's an approach that all of you can take to roll out PWA to your users. Second, service worker installation. We had to decide when service worker installs would become effective. Since tab hoarding is pretty common on desktop and I know some of you are guilty of this up here, we chose to skip the waiting phase. Here's what it looks like in our service worker. Choosing skip waiting ensured that the latest version of the service worker was installed even when users don't close their tabs. We referred to the service worker lifecycle developer documentation to pick the approach that was best for us. And finally, caching. The caching strategy is gonna determine what the offline experience looks like for your users. Do you wanna show them a cached version of your homepage or display something completely different when your users are offline? At hulu, we have a live TV service and it's important that the data that we display to our users is fresh all the time. So at hulu, we took a network only approach for domains associated with these services. This approach works really well for items with no offline equivalent. When building your own PWAs, it's important to select the caching strategy that works best for your application. And at hulu, we continue to explore new avenues to provide the right offline experience for our viewers without negatively impacting the timeliness they expect from a live TV service. So now, the big question. How long did all of this take? Well, getting to a baseline PWA took just one developer only two weeks to research, build, QA, and release. That's just one sprint from my team. We literally couldn't have done it any faster than this. And this is what it looks like. Once installed, the hulu PWA behaves just like any other application and now it's just a tap or click away. No need to sift through a forest of tabs. And we were able to deliver this experience to our viewers with very little effort and consolidate another code base in the process. Now, when we ship a feature on hulu.com, we can say we can truly build once and ship to everyone on desktop. And since launching the PWA in January, it's been doing great. In just three short months, we successfully migrated 96% of all of our legacy app users to the new hulu PWA. We saw a 27% increase in return visitors and a 5.5% increase in engagement. But I'll tell you, the best thing was that our viewers are loving the app. At hulu, we care about every single one of our viewers and feedback like this is better than any other KPI. Discoverability of desktop PWA has never been easier. Current hulu subscribers can try the PWA today. PWA today by visiting hulu.com slash app using Chrome. Simply click on the add to home screen prompt to add hulu to your computer. And soon, you'll be able to add PWA's directly from the OmniBox in Chrome. All of this has given us the confidence to invest further in PWA technology at hulu. And in the coming months, we're gonna be adding support for push notifications, media keys and media session API, and an enhanced offline experience. Because although we all love trying to beat our high score on the Dino game, we think that we have an opportunity to provide an even better offline experience for hulu subscribers enabled by PWA technology. We're gonna use offline as a way to drive awareness for the latest hulu original series. And we're going to experiment with offline media caching to provide trailer playback, even when a user doesn't have an internet connection. At hulu, we are just getting started with PWA. And we look forward to bringing all of these features and more to our viewers soon. And finally, I wanted to give a big thanks to the entire hulu web team, without whom we couldn't have delivered this amazing experience for our viewers. Thank you all so much. And back to Anshal to wrap it up. Summarizing months of hard work in just 10 minutes is no easy task. So as a measure of how amazing they work, can you please give them a loud cheer and a huge round of applause. Lighthouse score 1,000. I'm sure you've been listening intently for the past 30 minutes. That was a lot of information, and so I'm gonna quickly recap for you. Take your phones out, take photographs, and if you're watching us on the live stream screenshots. Twitter showed us that by building a responsive experience in one code base, you lower development costs, you create engineering velocity, you increase the number of tweets that they had sent by almost three times. This is a direct business outcome for Twitter. Times builds for the next billion users with a laser-sharp focus and performance and a tracking system that breaks if you don't hit that 100 on Lighthouse. They've successfully earned the love of their users. Across different languages, their PWA has contributed to 59% increase in ad network revenue, a direct business outcome. And finally, if there's one thing you take away from what Matt said, listen to what your users are saying. They might be giving you some feedback that might really be helpful for you as you make development choices. So look at your legacy apps, some that you might have ignored for a while. Use the web superpowers and create delightful experiences just like Hulu's PWA on desktop. It's still early days, but Hulu's PWA is loved by their users and they're seeing an increase in 27% for return visitors. And engagement is also on the rise at about 5.5%. It's just been a few months. These are direct business outcomes for Hulu. And finally, as a user, it's not that I don't care. I trust you to make the right choices so I can have a delightful daily routine. I can continue asking profound questions. So thank you very much. Take a look at your business, see how PWA's can help you. We've got material when you're ready up on web.dev. So this is a good one to take a photograph of. Audit your site, Lighthouse helps you test against various benchmarks. Or just come talk to us at the web sandbox. And if you're watching online, you can leave a comment or a question below and we'll get back to you. Can't wait to see what you all build. Thank you very much.