Tag Archives: chrome devtools

The Modern Mobile Web: State of the Union

Cross posted from the Chromium Blog

Posted by Rahul Roy-chowdhury, VP Product Management, Chrome
What a difference a year makes. Last year at Google I/O, we shared that the mobile web was open for business. New technologies such as AMP and Progressive Web Apps (PWAs) were bringing new capabilities, better performance, and a streamlined workflow to the mobile web.
Fast forward one year later: more than two billion AMP pages have been created and "PWA" has proved to be far more than a buzzword—it’s now the way that many businesses around the world are building for mobile devices. For more details, take a look at the video from Google I/O on the latest mobile web state of the union, or read below on how these technologies are making the modern mobile web mainstream.
Momentum
Summing up all the great success stories from around the world in a single post is a tall order, but here are some highlights.

To improve the performance of Wego's mobile site, the company built AMP pages using amp-install-serviceworker to transition to a fast PWA experience. Average page load time decreased from 12 seconds to less than one second, and conversion rates increased by 95%.


When Forbes rebuilt their mobile website as a PWA, they began by re-thinking what their experience could look like on a phone. Instead of minimally updating their underlying site, Forbes integrated PWA technologies to provide an immersive, app-like experience. They saw immediate improvements and engagement rates have more than doubled since launch.


Ola, the leading cab aggregator in India, built a PWA and noticed that 20% of users who book using their PWA had previously uninstalled their app. By reducing the amount of storage space needed, the PWA allowed them to effectively re-engage with users that otherwise would have been lost.
Another success story is Twitter Lite, a PWA which minimizes data usage, is resilient on unreliable mobile networks, and is less than 1MB of space on a device. Twitter's new mobile experience is also optimized for speed, with up to 30% faster launch times as well as quicker navigation throughout the site. They've found that users are spending 2.7x more time on site, and as a result are seeing 76% more tweets on the new PWA than their previous mobile site. Twitter is seeing incredible re-engagement with 1 million sessions initiated a day from icons added to the Android homescreen.
Polished Experiences
Users expect a lot from their mobile devices, and we've added tons of APIs over the past year to meet that demand. The mobile web can support more use cases and get more done than ever before. A few highlights:
  • Improved Add to Homescreen: Earlier this year we unveiled Improved Add to Homescreen, integrating PWAs much deeper into the Android operating system. Now, in addition to being displayed on the homescreen, PWAs are also displayed in the app launcher and Android settings alongside native apps, and can also open in response to users clicking links in Chrome or other apps.
  • Payments: Checkout can be a complicated process. To improve payment flows on the web, we launched a one-tap payment API called Payment Request. Using this API allows web apps to support credit cards and Google payment mechanisms such as Android Pay. We also just announced that it is now possible to integrate this API with additional payment apps.
  • Media Consumption: Over 70% of internet traffic is video. To allow great mobile web media experiences we have given the users more control over playback with the Media Session API, improved full screen playback with the Screen Orientation API, and we’re filling out features for offline with Background Fetch. To learn more, see our mobile web media best practices and see how the APIs can come together at our PWA for Media demo.
Tooling
We’ve also been working hard to improve and extend the set of tools that let you build engaging experiences on the web.
Lighthouse is a new automated tool for measuring the quality of a web experience. It runs nearly 100 audits against your web app, checking everything from page performance, to byte efficiency, to accessibility, and gives you a summary score. New integration with Chrome's DevTools means you’ll be able to run Lighthouse audits without leaving the browser.
Polymer 2.0 is the next major release of the Polymer library, re-built from the ground up to take advantage of the best new features of the modern web platform. This release uses new Web Component API’s that have shipped in Chrome and Safari. It’s completely modular and best of all - it’s now 10% faster and 80% smaller.
Chrome is committed to making sure that you can develop easily, engage with your users, and build a thriving business around the web. For the latest news, subscribe to our YouTube channel and follow us on Twitter @ChromiumDev.

Introducing Chrome Music Lab

Posted by Alex Chen, Coder and Designer, Google Creative Lab

This year, for Music in Our Schools Month, we wanted to help make learning about music a bit more accessible to everyone by using technology that’s open to everyone: the web. We built a set of experiments that let anyone explore how music works. It’s called Chrome Music Lab, and you can check it out at g.co/musiclab.


The experiments all use the Web Audio API, an open web standard that lets you create and manipulate sound right in the browser. In Chrome Music Lab, we’re using Web Audio to create interactive drum machines, pianos, synthesizers, and more. A few experiments also let you use the microphone input in Chrome through WebRTC. This lets you use your own voice or real sounds around you as part of the experiment.

The web has always been a space for open collaboration. Many of these experiments use grassroots efforts such as Tone JS, a framework built on top of the Web Audio API that makes it even easier to build interactive music experiences in the browser.

We’re also providing open-source code. So if one of our experiments sparks an idea, check out our repository and start building your own.

Get Ready for the Chrome Dev Summit 2015

Posted by Paul Kinlan, Chrome Developer Relations

The Chrome Dev Summit is almost here! We’ll kick off live from Mountain View, California at 9:00AM PT this coming Tuesday, November 17th. To get the most out of the event, make sure to check out the speaker list and talk schedule on our site.

Can’t join us in person? Don’t worry, we’ve got you covered! You can tune into the summit live on developer.chrome.com/devsummit. We will stream the keynote and all sessions over the course of the event. If you want us to send you a reminder to tune into the livestream, sign up here. We’ll also be publishing all of the talks as videos on the Chrome Developers YouTube Channel.

We’re looking forward to seeing you in person or remotely on Tuesday. Don’t forget to join the social conversations at #ChromeDevSummit!