Progressive Web Apps - PWA Roadshow

Progressive Web Apps - PWA Roadshow

Show Video

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 14:31

Show Video

Comments:

Great work Pete! PWA are the awesome! A lot of documentation on https://developers.google.com/web/fundamentals/

Apple watching this and laughing.. ha ha .

I wish everybody everywhere would just do Progressive Web Apps

I want to like this, but this guy is trying too hard. Like he's whining about Facebook stealing all of Google's attention. Lol, poor corporate baby. And oh, PWA doesn't work on iPhones. No go.

No, why not? They're just websites, so they work just fine on any device with a browser. You may not get exactly the same features, but it's still a good web experience. And Apple is working on implementing service workers, so that'll start to work on iOS devices in a future update.

Nice wrapping the whole PWA in single video

Fly away success... your puns slay me man lol

Thanks - I tend to like bad jokes. I'd tell you a joke about pizza, but it's too cheesy!

That's a stiff explanation

Awesome!

10:14 I ❤️ PWAs

Nice Video! airberlin is broke btw ;)

D'oh!

Google is completely confusing us they are building android instant app and at the same time pwa

the problem is that PWA is still green, it's meant to be cross plataform, no just a google thing. For example, I read somewhere that windows 10 will allow you to install PWA sometime in the future. I think Google and Microsoft figure out they cant compete with Apple, even when they have less users they spent way more, so companies prioritize their IOS app over their Android and Windows ones.

Instant app also cache data and loads much faster than pwa second time.

It makes me want to create PWAs but the questions I always ask to me to create a PWA, how long does it take and how many people are involved in creating them?

It's building a really good web experience, so it really depends on your team and what you set the goals to be.

FYI AirBerlin is bankrupt and has closed down... (without refunding any tickets). So you might trigger a lot of EU fliers with that PWA celebration ;)

Pete LePage ahh that makes sense :D still lives the bit about twitter!!!

D'oh, we recorded these a few months ago. :(

I like this guy.

Thanks to show me the great things!

Is that the "Welcome To The Jungle" intro?

Thanks, Looking forward to your next videos!

WOW!!

This seems like an interesting topic but I can't stand the way this guy talks. Re record this with a better actor and I'll watch it

Pete is nice man, just a regular dude. Give him some constructive feedback though!

actually I like this guy

What about it bugs you? Always looking for constructive feedback to do better!

It's easy to criticize, so you can always shoot your own better version. He isn't a fellow stand-up comic, btw.

He's not an actor. He says at the beginning he's a developer advocate. Are you usually triggered by how people talk?

I was thinking the same thing, then scrolled down an saw this comment. To me, it sounds like this guy is trying too hard to sell something. I reminds me of something you would see on a home shopping TV channel.

I didn't mind, maybe you have a problem?

+1

How to become a progressive web app developer... Full tutorial need...

thank you, by the way, links don´t work because the last ")", if you omit that, it works

Thank you. A recommendation, you should put a space after the url and before the closing parenthesis

We have an instructor lead training program (https://developers.google.com/web/ilt/pwa/), a Udacity course (https://www.udacity.com/course/intro-to-progressive-web-apps--ud811) and a quick code lab (https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/) that you can run through!

Learn Polymer. Easy as that.

Cool

321bluff don't think Win win for everyone what about native developer who invested lot of time and work.

danesh Khan u can launch pwa to 6 platforms with a single click. Thats pwa. Less development, more ad revenue for google. Win win for everyone.

Then i hope Google and Apple have some plan for their app developer community which is really huge and i am also a part of it as a Android developer.

Apple will also adopt PWAs from what I've read.

Don't get me wrong, PWA have come a long way and can already do a lot but sensor wise they are still are not as good as native apps. Also it's very hard to do always smooth running (complex) animations on mobile.

I'll buy in when google makes a pwa youtube or google map app.

18:03 Airberlin? Oeps! ;-)) This video is clearly recorded a long time ago!

@Gary F Don't try to be such Apple fan boy ;-)) You will get PWA's also!

Ok Fandroid.

Great work Pete! PWA are awesome! A lot of documentation on https://developers.google.com/web/fundamentals/

Super nice introduction to PWA.

Progressive Web Apps An Ultimate Web Design Trend (2018) advanced reference link https://goo.gl/K57UNk

Awesome, we're working on it already! https://thenextweb.com/apps/2017/12/14/googles-lightweight-maps-go-is-just-a-progressive-web-app-heres-how-to-try-it/

like if PWA was not a buzzword already, let's add FIRE to fire it up. Great video, love the real world examples and metrics

Emilio Garza All Google services, banks social media shopping sites have PWA and I like it

olx pe bech de!

Great video and very good explanations! Thanks!!!!

Jacob Tran totally agree. I’ve built a bunch of pwa’s for iOS for many years, and panic with every new big iOS release as something will not work

"The average user installs zero apps per month. By contrast, mobile users visit over 100 websites every month" This is obviously not a comparable stat. These users might be going to the same websites they always do every month, which is comparable to using all the same apps that they already had installed. No new apps installed = no new websites visited.

this is something that apple scared of...as more ppl using web app, the less ppl will download app from store and they will not able to charge fee from the developer...

Great video. These are indeed some good examples of PWAs. Since this video was posted, even more big services that we used to think of as "app-only" have released their own progressive web apps. For an updated list of these PWAs, I recommend checking out Appsco.pe (https://appsco.pe).

you can watch in 1.25x speed and he will sound better

Not so fast... I am making my PWA and I found it AS SMOOTH as a native App... And I am only using Angular 5...

lol

Lol it's bizarre that it bothers you so much that you can't watch. He does put extra emphasis into his words, but I found that made it easier to follow. I think the issue you're getting to is due more to the format of the video. It's done a lot like a sales pitch, with a bunch of case studies, stats, but without any cons. He just narrated to suit that usual style I think. Maybe you prefer a less formal, more casual, conversational form of narration.

AI+PWA+BOTS+VA= APP KILLERS?

Could someone please address the elephant in the room with regards to PWAs: browser performance vs native UI. This brave new world homescreen-browser-apps reminds me alot of an old friend- Hybrid apps, which were largely thrown out due to sub par performance. It seems a bit disingenuous that this is being totally ignored.

Is the Angular the best framework to build PWA ?

D-Did I just get Rickrolled ????

they work with ios 11.3 and major, right?

look at the camera pete

True but the idea behind PWA is to give a development path for the bulk of people who want an app presence on the phone for their company -- sensors are not needed in the majority of the market that wants an app. The small business flower shop around the corner doesn't need the sensor functionality, and now, they no longer need an expensive app developer who costs a lot because they have that programming range, so they can have an app just like the bigger enterprise businesses. This is a big deal and I hope it takes off.

There is a most advanced PWA system thats was there even before the term itself appeared, BEFORE that 2015 letter outlining what it should be! The Mobsted platform runs millions of accounts already, but for larger corps and is only now making rounds with general public - https://www.youtube.com/watch?v=d9pkgu-46Qo&t=3s

Other news