Progressive Web AMPs: the Story so Far (AMP Conf 2018)
So, my, name is Eric, as we. Mentioned and I'm gonna be joined by some other folks here, to talk about progressive web amps. Exciting. Pattern that we're seeing more and more of and I'm, excited to tell you about so. Here. Is a modern website that, you see up here it. Is fast. Its, well-designed. Its. Interactive, and, engaging all, the things that a modern website should, be and. In fact it's very engaging, users. Spend 40 percent more time on this premium site than. Compared, to the sort of free equivalent, on the same domain and. It's. Also made. With amp and PWA. Which. Means that, users are spending 40, percent more time aand on. The. PWA. A name combination. Than the sort of standard HTML. Combination, it's, hard to ascribe exactly, what percentage you're getting from. The. Different, content. Or. Whether it's the implementation, or the type of content, on there but, this, sort of PWA. And amp combination. This type of engagement, boost, is it's exactly, what you'd expect from. Progressive. Web apps and amp, combined, this kind of boost so. So. You're going back a little we. Introduced a lot of folks to the idea of combining, PWA, and amp last year at amp comp and since. Then the idea has matured quite, a bit. There. Have been challenges, for. This combination these. Are some of the bugs we've worked through some of the ones we still have to work through. But. It's been worth it for a handful of developers, who have actually, implemented, these patterns, in the wild. So. Let's review a little bit for folks who aren't actually all that familiar with what these these. Things are hopefully, you have an idea of what amp is but. I can give you a little bit more background on what the combo is and what PWA. Is as well so. To. Summarize the basics, of what amp gets you. It's. Basically, a, turnkey. Format. For, fast loading pages, with. Some really great UI out of the box or UX out of box, that's. Kind of the core value of amp so. It's PWA well there are a few more moving parts to PWA progressive, web apps, if. You imagine two. Axes. For. The X that would define the experience on mobile devices. On. One hand you might have reach how, many surfaces can your content show up on and, on. The other hand you might have capabilities. What's, the experience, that the users get when, they land there well. The mobile web has always done really well with reach I can, work across platforms on, mobile desktop, tablet, it can be embedded and, easily shared and. Also found via distribution, platforms, but, they haven't historically had the capabilities.
Of, Native. Apps which are very strong than the capability, side but often. Are sort of locked, in and these, experiences. That don't have as far, reach you have to go you have to download these things, well. PWA. Sits. In. A position where it combines the best of both worlds the capabilities. Of native, apps with the reach of the mobile web. Where. Those capabilities, boil, down to a number of advanced, platform, features like Add to Home screen push. Notifications. Caching. Abilities that make it possible for. Repeat. Visits to load quickly. And. Then also better reliability and, offline. Experiences. Better reliability and, limited connectivity, situations. And the, ability to have a completely, offline, experience, and. Ultimately. It's, important to remember, when. Explaining, these two technologies that in. The end we're really just talking about web pages. That. There's. Not there's. Some special things that, come from it but in the end it's the the, web pages that you know and love just with some extra kind of special sauce on it and. That. These two technologies, are just complementary. Ways of. Achieving different goals they, each have their own strengths. And, some. Weaknesses, as well but. It. Should be no surprise from the title of this talk, when. They're combined you get to enjoy, the benefits of each and. They do combine well. And. In. The end you get a feature-rich experience, that starts fast and stays, fast kind of the best of both worlds. All. Right so it, hasn't always been in, as, great a stated as it is as it is today. This combination, of bringing amp together with PWA and there, are a few reasons for that. Historically. There have been kind of these three main issues first. The, ecosystem. We. Don't yet have an ecosystem of tools and, templates, and services, the kind of things that would help folks the. Web of course has been around for a minute but the, combo. Amp. And, PWA, are relatively, new to the web the combo, is very very new. And. So we don't have everything that you might need quite yet however, in the, same way that amps start which, you might have seen, in slides earlier today, provides, a good starting place for folks, getting started with amp with, tools and templates. We. Also, envision. Having, similar. Tools and templates for, amp and PWA and that's something that we're starting to work on as well. Second. Templates. Are well and good if you have complete, control of your own site the ability to just. Take. These templates, wholesale or implement, things directly and just sort of throw them up on your site, but. Not, everyone has the flexibility, to do this folks are anchored in specific, technologies, that they're built on CMS's. And that kind of thing so it's not the reality for a lot of folks, which. Is why we're also working, with CMS's. And other platforms, to bring a lot of these capabilities, directly to them so. If you saw, the. Presentation, earlier today, the. WordPress presentation, that's great if you haven't I encourage, you to go check out the video of that too, a bit more of what we're doing there but, again basically. Just want to make these technologies, available to, a lot more folks so. Another, key, piece of the, problems, that we've experienced. With amp, and PW a combination, is that. When you combine two technologies, you're. Bound to have to iron out some of the kinks of an integration. So. A number of things didn't work quite right in shadow Dom here. Are some closed bugs. That. We eventually kind of fixed a lot of these didn't work at first but it sort of went through them and. There's still more to do there there edge cases that you run into when you combine these things and it's important, that we're sort of upfront, that there are challenges but. Even. If most folks are in a pretty good state right now as, it is. So. Finally. One. Thing that was really lacking in the ecosystem, was guidance if. You've looked at our Docs and been a little bit confused, as all. Mentioned he was, you're. Not alone it's. Great to have options to choose from but one piece of feedback we've gotten repeatedly, is. Not. What can we do what are a bunch of options that we could potentially do to combine amp and PWA but. What should, we do what do you recommend have. Been more familiar, with these technologies.
So. We've done a little bit of thinking about what a well-lit, path for amp and PWA would look like and I'm gonna proceed, through a little, bit of high-level. General, guidance that. We think offers the highest ROI. Per. Step as you go through some of the options for for, how to combine these technologies. And. Before, I get into the detailed, recommendation, I do want to add one thing if. You have amp. Pages if you're publishing amp pages and if, you also have a PWA, it doesn't matter what it what it's built on I it. Could be. You. Know an amp based PWA, it could be completely independent one. Thing that you should be doing if you're using a service worker in your PWA is, using an amp install, service worker on your, amp page. To, install to warm up the service worker in the background, so when folks land on your PW a from. Your n page they're, getting this experience. That's already warmed up. So. Yeah, basically do that thank us later it's, pretty trivial to, do. So. Yeah highly recommended, another. Kind. Of side note before I jump into the main recommendation. Is that you know your business what. I'm going to present is a sort of general recommendation. For folks that. We think will work in most, situations. But. There may be different, pieces different functionalities. Different ways of doing things that as the. Person, who knows the most about your business, you. Might, identify and, say like I think we would do this a little bit out of order I think you, know push notifications. Aren't super valuable for us but like an offline experience, is because, most of our users are, accessing. Content offline, and. You. Should remember that as we sort of walk through this but. Without. Further ado, the. High level recommendation, is to, build your site with amp. And. Yeah. That's sort of big step one and then. Step two is to progressively. Enhance with PWA and. This. Is a sort, of sequence, do, one, and then do two and. Step. One breaks down into a couple things when you're building your site with amp the, biggest benefit, that you're gonna get from amp is on. Your. Sort of entry, points. Entry. Points being where you get the biggest speed benefit, where distribution. Platforms, can do clever things to get additional speed benefit, and. These pages are, essentially, articles. Product, pages learn, more these sort of entry. Points that people land on from. Search. Social, sharing those types of distribution, platforms. And. So once you've done that basically. Build the rest of your site with a framework of your choice this. Could be an existing framework, out there it, could even be with amp if, your, site, is supported, with the features, that, you. Really need in an that's fantastic, and we obviously think that speed benefit you get from that is really. Really worth doing, but. It could also be vanilla, Jas, there, are a whole lot of options for how to how to do the rest of your site like these, more. Advanced, checkout. Pages that, type of thing. So. Then once you build your site with am progressively, enhancing, with PWA is is the, sort of next step and this. Breaks down into a few different things again this is a kind, of general, sequence. And. Again you, may want to do some out of order based on what your needs are what your business's, needs are but. Here. We go. So. Step, one would be basic, caching to load up to. Speed up the load time for pages and it, could include for instance caching, third-party, resources and, that type of thing with the serviceworker and, i. Brought up the serviceworker a couple, times with no context. I don't want to get too, deep into this because folks we've presented, about this before and I don't want to reiterate, for folks too much there's.
Not The best application. For amp might be possible, you can do some pretty cool things in amp. But. It's. Pretty complex and, uses canvas most of our clients, have a few, pages like this that use, allow. For rich, customization. Or. Have. Interactive, charts or have other components, that are going to be difficult, to convert. To amp we, wanted these pages to load into the app shell smoothly. Feel, like as part of the experience we didn't want it to be separate so our challenge was how do we load non-m pages, in the app she'll. Discover. Three options using, the shadow Dom, good. Old trusty iframe, and HTML. Imports. Shadow. Dom was the obvious first choice that's, how amp pages are loaded into the app shell and this, works this, is actually we have this working in production but there's a few things to be aware of the. First is the window, dot onload event, only. Fires once when you load the app shell it does not fire again, when you load child pages into, your shadow Dom so if you have scripts in your child page there. Depending on the onload function to, fire to, execute. Some code you, have to find another way to fire. That code. Mex. Is document, outright if any of the scripts that you're, in. Your child document. Use. Document, dot write that's gonna overwrite your app shell which is obviously very bad we, worked around this by overriding, the, document, dot write function, which is the fairly, common hack that a fair, amount of libraries, do it works pretty well. Next. Is any, references, to. Document. Dot body or head in your child document, are going to reference the head and body of your, app shell which. Is not the. End of the world the most common. Artifact. Of this is that scripts, add other, scripts, to the document, and so your app shell ends. Up with extra, scripts in it that are meant, to execute. Against the child document, these, scripts can do what they need to do they can still find what they need to find it works ok. What. We've done to work around this is we've marked everything we want to keep in our app shell with a specific class then. When we navigate, away from a non amp page we delete everything in the app shell that doesn't have our class to keep our app shell for being littered with scripts.
Loads Your amp pages. That's. Header and menu a nice thing about this. Technique is. We. Also no longer have to maintain the, mobile website there, might be a couple pages on the mobile website we need to maintain if they're not amp compatible, but, this is an easy way to, move. To canonical. Amp, this. Allows you to check to see if there's an amp version available and, load, it. Which. Reduces. The. Maintenance on your standard website since it's now just amp previously, before we start a building progressive web apps we'd have the standard mobile website and then the amps that we're showing in Google search we, had a design change we need to make it two places now, that we're using the amp pages everywhere it's reduced our maintenance. So. The last couple years we've. Had the same recurring. Question, come from our clients, or complaint. Come from our clients and that is they, see the majority of their traffic's on mobile Mobile, is the biggest growth opportunity, but the majority of their sales are coming from desktop, and, there's, a conversion. Rate Delta. Between, the two platforms and. It's. Been our goal to close that Delta and. For, the first time ever with progressive Web Apps we're seeing conversion rates that finally rival the desktop, and. It's no surprise it's, a it's a great solution has everything you'd want has all the benefits of a native app has, all been with the discoverability, and all the benefits of a mobile website the. Payments, are easy you can now tap the home screen it can open full screen it, can run offline it's. Super, fast, awesome, transitions, it really has everything you could want in a mobile experience. When. We launched this. Progressive. Web amp for our client car which I encourage you guys to check out carve calm it's probably the fastest. Ecommerce. Mobile, website you've ever seen. We. Did a two-month, AP, test where we directed, half of the mobile. Traffic to, the new progressive web app and the, other half the mobile traffic to they're really. Nice already, responsive. Magento. Mobile site and. The. Results were pretty impressive, we saw improvements. Across the board. An engagement. Pages. Per. Visit time. Per visit and the, most important metric conversion. Rate went up 75%, which, is bringing it close. To where the desktop conversion rate is. So. It's, been a fun. Ride. Thank. You guys very much, no, I'll head over to JVM. Yeah. Thank. You Paula Malta for having us here cm conference, in Amsterdam. So. We. Are from young format. We. Are.
We. Are the second largest independent. Agency, in Germany and we, are proud to be over 25 years old, but even prouder of all. The projects, with it already, so, check out our short, for real. Yes. That's me I'm Thomas, I'm one, of the managing director, at young vomit in Hamburg and I like single. Speed bikes and, road bikes and also, the album web. But. Today. I want, to talk about how, we have built a new BMW, com. So. What. A nice challenge, that, was my thought after, the client quarters, so, here at the m conference, we, want to show how we have built the new BMW comm. The. Job was to relaunch the BMW, comm website, completely. From the bottom as a new new digital, home for the brand, so. There's. A long project, history but, finally, we made some bold decisions, focusing. On a new platform with. Three goals make. It content driven, high-performance. And highly, innovative. So. Our first goal was. Conceptional. So we wanted to create a website that is user and content, focused. Content. That, pulls you in from, search social. And the open web saw. The right content, for every, for, every user. So. Both. Jesus guides, the user deep, into the, into. The website and content and spoiler. We invented the first M story module without the. Story. Component. So. But. The number one goal was really to make the website really, really fast and I'm, really proud of this goal because, after, 20. Years of fighting for it on every project it, was the first time that it was the number one goal. So. Following. BMW. Latest claim sheer, driving pleasure we would like to say speed. Matters more for sheer surfing. Pleasure, so. Nothing. Is more annoying that, a slow, and web ads. And a slow web, mobile experience. And. Speed. Also matters in the, sales funnel so, you. Definitely want, raise awareness with, a slow website. The. Next, main. Issue was innovation so but, innovation that, not does not always mean to do big things. For. Us the goal was to, bring the app user, experience. To, the mobile web so everything. Was the Sun and the. Next article only his wive away. So. As we. Started, to, think about the project we thought we, need three code bases, because. The, mobile and the responsive. Behavior was, so. Different and, we. Definitely want em for the first search access. So. We did some deep dives into, frameworks, check, out other for sites like The Guardian and. The. Deep dives into the M component, world and found a great set of components, but, with strict rules. Regarding. Third party our script, and the 50k, CSS, limit, so. At this stage of the project we, did not think about using, em as our, own search framework. And. In. That time period, I saw, miter talking. About a mix of amp and progressive. Web app in Hamburg and we. Figured out to met Paul, in, Berlin, and he is talking about pushing. These boundaries, easily, or the P, is already missing. But. Its. Meaning its amp and PD Abu a so we've, talked to Paul, about this combination and. How. We built the, canonical amp set the. Connection, with the progressive web app is what, pair will show you next. Hi. Everyone oh it's. My Khan yeah, okay, perfect, I'm Pia, senior developer on the team that built. The all-new BMW comm, content, marketing platform, and I'm, really, into electric, mobility as you can see here.
In The limitations, of a, 50 kilobyte, CSS. Boundary, can, be challenging, but, for me personally as, a developer, it. Rather felt like a. Tool. To, argue with designers, that it's, not just important, to improve, the look. And feel of the, site but build, a beautiful page, and at the same time remain, fast. The. Second pitfall is that you really have to check your limitations, so. Amp. As if, we use temp as a framework and with every framework you, apply you have to use the right tool, for the right job so, if your goal, is to build a. Single. Page application, then. It might, not be the right choice for you but. For. Us with, our content segment, and for content, marketing platform, it definitely was the right choice. The. Last part is. That. You. That, you're working on a living, project amp. During. Our time when we used amp it evolved, quite a bit we, ran, into issues and since. The. Verse the components, are updated. And you. Have a single version for. That you're embedding into your site the, code, can change and that, can render your, amp page invalid. At times but, as long, as you check, the release notes and maybe, include. Validation. Check in to you into, your tool chain then, you can prove and your, page, from becoming, invalid, and at the same time you still profit, from from, all the advancements, the empty actually does to the components, so your, page is, getting better and better and faster, without. You. Doing, any changes to it. So. To. Wrap, everything up I'll, hand. Back to Thomas. Yes. Thank you yeah. Yeah. So. We are almost almost finished, but to bring the project on point we have a small case with you for you to have. Everything, in it. How. Do you excite people for, a car brand but. Not interested, in cars at all by. Listening to their needs and telling. Them stories they, actually, want to hear data. Driven, entertaining. And, helpful, for. This purpose, we've, developed a central, stage a new, home, for the BMW brand the, all-new, BMW comm. For. A web experience, just as dynamic, as our cars we. Used Google's high-speed, amp framework, and. Dramatically, increased, performance and, thanks. To another web technology, called PWA, ultra. Smooth full screen videos enrich the experience and. The next great story is, only a swipe away. The. Result a. 30%. Higher click-through rate from google search and up, to three times faster website, loading compared, to competitors and, a. High, performance, experience that, you would only expect, from, a native app and, of. Course the, configurator, or a local test-drive, are, always just one click away the. All-new, BMW comm. The. World's fastest, automotive, content marketing, website. Yeah. So. Today, I want to thank our client, BMW, so specially, Christian, who. Was the best agile, product owner ever and Urich who made the, project possible and for sure so, much, laughs for all the passion from the best team at JVM, so these. People are happy to invite you to have a look to. The new new BMW, comm. Thank. You very much.