Progressive Web Apps - PWA Roadshow

Progressive. Web apps seem to be the latest buzzword but what, does it mean I'm Pete. A developer, advocate at Google and in this video series you'll, learn what a progressive web app is why, it matters and how. You can build one in this. First video I'll cover, the key concepts, of a progressive, web app and how you can get started so, let's jump in. Web. Development has changed, a lot over the years when, Ajax, transformed. The web from, static, pages into, dynamic, interactive. Experiences. Users. Expectations. Went from clicking on the side of a map and waiting, seconds, for it to scroll to something, like the Google Maps experience, with live panning. And zooming you. Don't have to live with that horrible, click and. Wait. User experience. Unfortunately. The improvements, we've seen on the desktop, web haven't. Translated, as well to, the mobile web consider. This if I asked you to open Google, Maps on your phone would, you do it using the native app or through. The browser. Chances. Are you'd, use the native app. Mobile. Is the key factor driving, this revolution. We. Now use mobile devices more, than desktop computers, and, depending. On which stats you look at it's, been this way for more than two years on, mobile. Users. Spend most of their time in native, apps rather, than on the web in fact, they spend 87% of their time in native apps versus, only 13%. Of their time on the mobile web when. Asked, why users. Often say that, apps are more predictable, they're, easy to find on the home screen and feature. Push, notifications. That bring them back, so. Should, we abandon the web and go, build native apps of course. Not there's, a flipside to native app usage, app. Usage. Is highly, concentrated and, users, tend to only install, and use a few apps if you're, not one of those chosen apps too, bad, users. Have told us that they see native, apps as a big, commitment, in, space-time, and cost. According. To a recent study the average user installs, zero apps per, month zero. None. By. Contrast. Mobile. Users visit. Over a hundred, websites every month, this. Is the power of URLs, and the ephemerality. Of the, web. One. Way to think about the difference, between native. And web, apps is on, the capability axis. When. You tap on their icon native. Apps start. Quickly, they tend to work offline they. Can fill notifications. Sync, in the background, and have. Access to sensors like camera, and microphone, but. The reach is somewhat, limited requiring. A different, version for each platform. The. Web is safer. And its, permission, model is more respectful, of your privacy, but, without some of the same capabilities, it doesn't. Matter how many people can use it, we. Want to combine the capabilities.

And Experience, users. Are used to in native apps with, the reach of the web we. Want the best of both worlds a progressive. Web app is simply, that a great, user experience, that feels integrated. And earns a place on my home screen without, having to give up the reach to get it the. Term progressive Web Apps really. Just means radically. Improving, the quality of, your end-to-end user, experience, in, order. To do that we, need to focus on four things making. The app fast, making. The experience, more integrated. Ensuring. That it works reliably. And keeping. Users engaged, let's. Take a look at each of these properties in a little bit more depth. Users. Expect apps to load quickly and to have smooth, scrolling. Unfortunately. The web has a bad name for this especially, on mobile for. Now let's. Focus on load performance which, means making, sure that your web app loads, fast, now. This is a just esoteric, we all know that time is money, this. Chart shows just. How true that is, 20%, of users will, abandon, a site if it takes more than 3 seconds to load now, I could, make a joke about kids, today and short attention spans, but, I'm guilty, of this too other, studies. Show, even, worse results, after, 3 seconds. 53%. Of users will abandon, a site in short, speed. Kills. Users. Shouldn't have to reach through a browser tab to access your app in fact, the user shouldn't, even think about the fact that they're on the web instead. They, should be able to interact with it in the same way that they interact with all of the other apps on their device, they. Expect, to launch it from the same place they launched all of their other apps they. Expect to see it in the task list they. Expect, it to have all of the capabilities. And hardware. Access that, other apps have, web. Payments, something. That we'll cover in a future video is a good, example of keeping, a user in your flow instead. Of requiring the user to fill, out a complex, checkout, form the, payment, request API, simplifies. It down to a few taps and can even integrate, with other payment, apps like PayPal or Android, pay, another. Good example is, media, playback with.

The Media session, API you, can provide metadata, about what's currently playing and even, handle, media related events from the user if the. Screen is locked the user can quickly see what song is playing and maybe. Skip to the next song users. Don't expect the web to work without a network connection and, often. They don't even bother to try when it's a slow or intermittent. Connection, we. Need to, change that, perception. Web. Apps must. Be reliable. When. A user taps on home screen icon they expect, it to load instantly, and reliably. Apps, launched, from the home screen should, never, show, the dinosaur. Thinking. Back to the 90s when the web grew up this. Is how, we got online going. Online meant, putting the whole house, in the online mode I remember. Having to yell upstairs, don't, pick up the phone and if someone did it would kill my connection, we. Used to know when, we were online but. Now in the broadband, era we don't even think about it desktop. Connectivity. Is just. Always there. We've. Become used to always being online and when, we're not and, we see this cute little dinosaur. It's, a disaster. Mobile. Phones aren't always online maybe. You've turned on airplane mode or your, subway stop doesn't, have service and even. When you have four bars you, might not have a live connection, but. It's not just the no, connection. That breaks the users trust it's. Slow, and intermittent. Connections, that affect users just, as much. Still. Mobile, apps never, show, the dinosaur, nothing. On my home screen shows, this in. Order. For a web app to earn, its, place on, the home screen we need to make them reliable, even when the network isn't an. Engaging. App goes beyond functional, and ensures, that the whole experience, is delightful. Making, it easy for the user to do what they need to do using. Features, like web Plus it's always, up to date, notifications. Keep the user informed, an engaging. App uses, the right capabilities, at the right, time in a beautiful, way one. Example push, notifications. They've, existed for a while but, I'm really excited that we finally have access to them as web developers, and they. Even work when the browser is closed on. Mobile. Devices. Notifications. Are a fundamental. Part of turning, a monthly, active, user into. A daily, active user, so. Enough, exposition, let's. Take a look at Twitter light a progressive. Web app designed. To deliver a more robust, experience, with, explicit, goals for instant, loading, increasing. User engagement, and lower. Data consumption, the. Twitter light progressive, web app combines, the best of the modern web. And native, features it, became the default mobile, web experience for, all users in April, of 2017. On the. First load it looks and behaves like any normal, web app this. Is a well designed mobile experience, smooth, scrolling, responsive. Design all of the rest when. I revisit, the site chrome, prompts. Me with an add to homescreen banner making, it easy for me to add it to my homescreen when. I click add a little toast pops up letting, me know it's been added to my homescreen in a. Future, version of Chrome progressive. Web Apps will also, be added to the task launcher, let's. See how it looks. There. It is on the home screen tapping. The icon starts. It immediately showing, a splash screen well things are loaded then, it launches. Into a full screen experience. It. Feels, like all of the other installed, apps on my phone even clicking, on the task manager shows. It as a top-level, app using, the icon, app name, and colors, defined, in the manifest. Being. In the users field view is very, important, for reengagement, shortly. After launching Twitter Lite they were seeing over 1 million. Launches. From the home screen every. Single day, Twitter. Implemented. Web push notifications. That work the same as those from their native app and arrived, even, if the user's browser is closed. Users. Are prompted, to enable notifications. Or can. Go into the settings and enable notifications. Their. Notifications. Appear on the locked home screen and when I click on the notification, I'm taken, directly, to the relevant place making, it easy for me to reply, like, or retweet. Something, when. Tweeting, users, have access to all the same features they expect, they can take pictures attach photos they've already taken and so forth it, was pretty cool to see Twitter demo this at their launch event where, they posted, a tweet with an image, in about, a second, and got hundreds, of likes all will, still onstage. Reaching. A broad set of users is important. For Twitter especially those. In emerging, markets where lower download, speeds and less, powerful, mobile, our common, Twitter. Light helps, reach this audience more, effectively, by making, Twitter faster, and easier, to use on low bandwidth, connections, Twitter. Light is only about 600 K over the wire versus, almost. 24. Megabytes. To install, the native Android app and for. Twitter who, measures, their success, in the number of tweets and pages.

Viewed Per session, their, progressive, web app has been a flyaway, success, with, a 75%. Increase in tweet sent and, 65%. More, page views, today. Twitter. Lite has more active, users than any other, Twitter, client, Twitter. Lite is fast it launches, as a full screen app from my home screen it's reliable, working no matter what my network connection, is and it's, engaging. Service. Workers is one of the new platform, api's, that's, behind, many of the new capabilities, that I've been talking about the. Traditional web model requires. The browser to go to the network for every. Single, request, and. If, the network is down everything, fails and you get that famous, dinosaur. But. You don't always need, to traverse, the network every, single time the, service worker can cache all of the resources needed for your page it, gives you full control to manage the cache and allows. You to decide when, to hit the cache and when, to hit the network, service. Workers can handle more than just network requests, they can handle system level, notifications. Like post messages, a push. Message is just another, type of request that the Service Worker services. When. A message comes in it wakes, up the service worker then, calls, its own push handler. Earlier. This year lancome. Launched, a new progressive web app compared. To their previous, mobile experience, time, to interactive, dropped, by 84%, leading. To a 15%, decrease, in their bounce rates to. Re-engage with users lancome. Added web push notifications. Alerting, users about, exclusive, promotions product. Releases and to, reconnect, with shoppers, who have abandoned, their carts this. Strategy, has delivered an 18%, open, right on mobile and conversion. Rates on abandoned. Carts have increased, by 8%. The. New strategy also delivered, a much better experience across. Platforms. IOS. Is, important. To Lancome and 65%. Of, all users, landing. On their progressive web app are on iPhones, with. Their new PWA, Lancome. Saw, 53%. Increase in session, lengths and a 10% decrease, and bounce rate among iPhone users, despite. The fact that some features, were, unavailable, to them all. Told, the progressive, web app has been a tremendous. Success driving. A 17%. Increase in conversions. Lyft. Also, launched their new mobile site as a progressive, web app with, the needs of emerging. Market. Users, in mind in, emerging. Markets where you can't take bandwidth, or even, connectivity. For granted, it's, even, harder, for your audience to get into your app instead. Of making a simple landing, page that asks, the user to, install something, their. Progressive, web app is a feature, complete, version of lyft just, without the install step, remember. The goal isn't to, get the user to install your app it's, to get them to use your service the. Word progressive and progressive, web apps isn't, there accidentally. Focusing. On the end-to-end user, experience, will have a dramatic impact on your business even, for users who can't experience, the full power of progressive, web apps because, they're on a device, that doesn't fully support, service workers a. Progressive. Web app doesn't have to be a huge undertaking so. How, do you, get started, well. First. And foremost you, need, security. That. Means serving, your site from a secure, origin, everything. Must be served via HTTPS. It's. Like table, stakes for your progressive web app in fact for many new and even some old powerful.

Web Api's like, geolocation it now, requires, a secure origin, you. May know the green lock from the URL bar the, green lock indicates. That there's a secure, connection between, the site and the, user having. A secure connection really, means three things the. User can trust that the site is actually you they. Can be assured that no one has tampered, with a page and that. No one is listening in, on the connection, the. Web has tremendous, reach and it's, frictionless, so, keeping, users safe, is hugely, important. Once. You're serving everything from a secure origin, you're ready to begin your journey of, building a progressive, web app there, are plenty, of ways to get started but, they can be summarized, in these three approaches, building. From the ground up, starting. With a simple version and. Focusing. On a single feature each. Of these make, sense in a different, scenario. Starting. From the ground up makes, the most sense when, a site is about to go through a redesign if you're, starting from scratch anyways, it makes, sense to build in progressive. Web a penis, from, the beginning, this. Approach, enables. You to easily use, the app shell pattern and take. Advantage of the power of serviceworkers. OLX. Is one, of the largest online destinations, for classified, ads in India providing. Communities, and high-growth, markets with a vibrant, online marketplace. They. Look to progressive, web app technologies. To provide a faster, loading immersive. And app-like, experience. After, launching. The progressive, web app the time until the page becomes interactive fell. By 23%. With, a corresponding. 80 percent, drop in bounce rates. OLX. Also, wanted to re-engage, mobile, users just, as they would on their mobile, app. This. Meant taking advantage, of capabilities. Like push notifications and. Add to Home screen these. Two updates increased. Engagement by. 250. Percent. Monetization. Also. Improved with ads, loading faster the click-through rate has increased by, a hundred and forty, six percent of course. Not, everyone, can take this approach, starting. From scratch often, isn't realistic, the. Second, approach is to build a simple version of the site the, light or mobile version, and choose to optimize, around a specific, section, or user, journey, an. Example. Of this approach is airberlin. Their. Schedule, and demand didn't, make it possible to start from scratch so instead, they, focused, on the post booking, experience. Their. User journey is one you might be familiar with you're, at the airport and you want quick access to, your itinerary details. Destination. Information and above, all else the, boarding pass their. Progressive, web app heavily. Leverages, caching, to ensure that it loads super fast and works, reliably from. The time the user taps on the home screen icon, until the boarding passes up is less, than a second and it. Works even without an internet connection. The. Final, strategy is to, define a specific, feature to focus on pick. One feature where you can have high impact and focus, on that this. Is frequently, the approach needed, at large companies, where, you may not have the backing to start from scratch or even. Build a separate simple version for. Example the weather company has been interested, in progressive, web app technologies. For, quite some time but, they needed to prioritize. Based on what they believed would be highest impact, for their users and their. Business, they. Decided, that the most impactful, feature was, notifications. They, decided, to focus on a single feature with, web puss and they went big, rolling, out notifications.

Globally. In over, 60, languages. Users. On their mobile web app can subscribe, to multiple. Types of notifications, just like on their native app this. Success, sets, them up on their journey to build a full progressive, web app experience in, the. First three months of rolling out web push weather, saw over a million, opt-ins. Web. Push notifications. Allow, weather to reach a whole new audience with. The same set of notifications. As their, native app users, as you, think about your journey do, what makes sense for your users your, site and your, company, speaking. Of we've, been so, excited to, see the incredible, momentum on progressive, web apps around the world large. Companies, such as we go Expedia. And trivago, have all rolled out successful. Progressive, Web Apps publishers. Like info Bay and Forbes, have launched progressive, web apps and Forbes. Has seen a doubling of user engagement since, their launch ecommerce. Sites such as Fandango. Alibaba. And Rakuten. Have all invested, in progressive, web apps even. New services, like ride-sharing companies. That we might think of as app only, are getting, in on the action, lyft, rolled out their progressive, web app last fall and Ola cabs, the largest, ride-sharing service, in India has, just launched their progressive, web app this. Is just a sample of some of the folks who are shipping, or actively, working on progressive, web apps every. One of these companies has had their own path for, how they're investing, on the mobile web and starting. Down the path progressive. Web apps in the. Next couple of videos Mariko. And I will show you how you can build progressive, web apps that are fast integrated. Reliable, and engaging. Then. Once, you've completed the videos we have a collection, of code labs that you can use to put your newfound. Knowledge to, work I hope. These videos and the accompanying code labs leave you inspired, and confident. About building, progressive, web apps with. That thanks, let's, jump into the next video building. Integrated, experiences.

2018-02-25 15:31

Other news