[Music] good afternoon thank you all for being here you’re almost through day one a file so we really really glad that you’re here i mantle 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 Dino 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 path prating development that’s happened in the far past few years with service workers and progressive web apps or pwace 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 it’s seeing that by using a combination of amp and PWA they’re seeing five times higher conversions on their website and it’s 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 pwace in Brazil Tara ortega a new pub news publisher has seen that users are sharing more articles after they implemented the web share API and buco of boosha boosha I might have missed that up and I apologize to anybody who speaks German but a leading German works in media has a top-performing PWA and they use trusted web activities as a building block for their priests or experience these core values of universal reach and reliability when you combine them with the new super pass 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 lord lowest productivity R and after a heavy lunch they go onto 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 assumption that’s a crazy routine it goes against everything they tell you about the true 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 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 faster 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 PW a two years ago it was a turning point in the broader adoption of pwace I 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 wrote the largest media conglomerate in India has seen that by just having a laser sharp focus on performance a lighthouse core that is always at hundred 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 now they’re 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 set up please welcome Jessa and Charlie to tell you about Twitter [Applause] hi everyone my name is Jess ER and I’m a product manager on the web team at Twitter my name is 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 progress or 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 can 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 PWI 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 spends 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’ve used our Twitter users as our customers and we wanted to ensure we were building and 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 codebase 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 feed back 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 PW I am 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 goal 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 start decided to start with mobile first it offered the largest room for growth for a largest opportunity for growth for us and also the room – 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 slow storage on devices so in 2017 we launched our first iteration of the PWA branded as twitter light it was faster lighter and engaging giving our users the best Twitter experience at a lower cost hence the name white 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 you adjust that and since then we’ve been growing Twitter’s user base with the help of the PWI 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 PDA 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 five million installs of the app from the Play Store since launch which increased the number of PETA 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 listed again 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 homescreen used a webview wrapper to bring our PW to the Play Store and I’ve also used PW a builder to bring PW a 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 it’s gesture mentions 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 that 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 data saver 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 it an 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 merge in 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 codebase 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 touched and support and so instead of using that button we used the smaller action bar and this was powered by the extra physical keys that those smaller devices have so I want to 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 is a drop-down 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 codebase PWA and we have a few tips we hope that helped get you started first progressive enhancement isn’t just about the API as you use its 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 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 gesture and I didn’t do this alone it takes a village to make something that’s 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 all 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 times internet builds for their users in India hi everyone namaste from India I am Rudra Kasturi I’m grow today x group I’m very excited to be here to share times web success story with all of you at times group we build products for all segments of users as we touch their lives in everyday in different ways some of these are just not product 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 times 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 were an inner 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 a surpassed English and are growing at 94% Iranian this is where we have identified a huge opportunity as I said earlier at times group we build products for everyone so we focused on improving the user experience on our Hindi property no bar at times or we love to call it as an BT and BT 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 NBD 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 but every second delay on page load will lose substantial traffic so we have performance budget which ensures we don’t exceed jeaious 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 – always stays under 5 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% or 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 word box so user can still consume top 20 stories on NBT when they’re offline with all the great efforts we launched NV tpw a super fast super light and instant loading I love the screen shot and we use lighthouse as a source of truth to measure this performance and now our producer super fast now we want to ensure that our users to stays engage more and consume more content keeping this in mind we used add to homescreen prom 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 Caprica and so on we want to earn the love of our users so we let them experience rpw first before asking them to install it and the best part our marketing teams don’t have to spend a thing they don’t have to spend it again because our average time spent average spend to install an Android app is ranged between forty two hundred rupees depends on the quality of the user you acquired which is about a dollar or so PW installs are absolutely free and the biggest achievement with this is we have driven engagement higher by almost 50% and finally we used web share API that triggers the Android native share dialog to give users control over how and where the data shared since launching it we have seen increase of 24% coming users coming to NBD why are they shared post with all of these we have seen incredible wins on NB tpw we saw a stunning 72% increase in acquiring new users and we achieved our engagement goals by increasing the average time spent by that one percent which means the users are sticking around for longer sessions watching more videos and consuming more content and finally I love this light there was a clear revenue impact for MBT as we recorded 59 percent increase in our network arena there is no magic will 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 Russell that take late for PWA when he saw NB tpw a trace he went on Twitter this thank you Alex so if you’re wondering where we want to take our development effort next with incredible bills from NBD we have launched TWA in six more languages telugu tamil merle 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 dine out 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 days for the first time NBT 2.0 [Applause] attracting and retaining abusers 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 cache his later experience on web sandbox please don’t miss it and finally I would not have this opportunity to present these amazing business outcomes if we didn’t have been for the team a huge thanks to all of them on the screen and the Google team who helped us to achieve these rails for the behind the screen now would like to call onstage Matt from Hulu to explain PW a success story on the desktop Thank You rudra good afternoon everyone my name is matt oil and i’m a product manager at hulu hulu is the fastest growing streaming service offering live and on-demand TV and movies in the US with over 28 million subscribers we’re 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 gonna 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 in a modern tech stack using node in next j/s and just last month we were rewarded the 2019 People’s Voice web or 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 gonna 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 a tap or click away without having a bill to 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 lightbulb moment desktop PWA leveraging the fundamental PWA components would allow us to replace the legacy app and when 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 serviceworker simple enough right just two things well we actually found there quite a few challenges challenges in these two components here are some decisions that we made that might help you and when you approach your own pwace the first was scope we use the ability to set the scope of our serviceworker to allow us to incrementally roll out our PWA we scope the server worker to its own path at hulu.com at slash out 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 serviceworker installation we had to decide when server service worker installs would have 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 serviceworker choosing skip waiting ensured that the latest version of the serviceworker was installed even when users don’t close their tabs we refer to the serviceworker lifecycle developer documentation to pick the approach that was best for us and finally caching the caching strategy is going to determine what the offline experience looks like for your users do you want to 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 Hulu we took a network only approach four domains associated with these services this approach works really well for items with no offline equivalent when building your own pwace 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 in it 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 for 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 codebase 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 percent increase in engagement but I’ll tell you the best thing was that our our viewers are loving that at Hulu we care about every single one of our viewers and feedback like this is better than any other KPI discoverability of desktop pwace has never been easier current Hulu subscribers can try the PW 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 pwace directly from the omnibox in Chrome all of this has given us the confidence to invest further and PWA technology at hulu and in the coming months we’re going to be adding a support for push notifications media key is a media session api and an enhanced offline experience because although we all love trying to beat our high score on the dyno game we think that we have an opportunity to provide an even better offline experience for hulu subscribers enabled by PWA technology we’re going to 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 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 reviewers thank you all so much and back to us all 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 were can you please give them a loud cheer and a huge round of applause lighthouse tour 1000 I’m sure you’ve been listening intently for the past 30 minutes that was a lot of information and so I’m going to quickly recap for you take your phones out take photographs and if you are watching us on the live stream screenshots Twitter showed us that by building a responsive experience in one codebase you lower development costs you create engineering velocity and you increase the number of tweets that they had sent by almost three times this is a direct business outcome for Twitter x builds for the next billion users with a laser sharp focus on performance and a tracking system that breaks if you don’t hit that hundred 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 in ads we’ll make development choices so look at your legacy apps some that you might have ignored for a while use the web superpowers and create lightful 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 an engagement is also on the rise at about five and a half percent it’s 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 PW is can help you we’ve got material when you’re ready up on webdev so the exact this is a good one to take a photograph of or did your site lighthouse helps you test against various benchmarks or just come talk to us at the web sound rocks 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 will thank you very much [Applause] [Music]
