The (Not So) Secret Powers Of The Mobile Browser

Apple taught us, “There’s an app for that.” And we believed it. Why wouldn’t we? But time has passed since 2009. Our mobile users have gotten more mature and are starting to weigh having space for new photos against installing your big fat e-commerce app. Meanwhile, mobile browsers have also improved. New APIs are being supported, and they will bring native app-like functionality to the mobile browser.

We can now access video and audio and use WebRTC to build a live video-chat web apps directly in the browser, no native app or plugin required. We can build progressive web apps that bring users an almost native app experience, with a launch icon, notifications, offline support and more. Using geolocation, battery status, ambient light detection, Bluetooth and the physical web, we can even go beyond responsive web design and build websites that will automagically adapt to users’ needs and context.

To help us dig into this world of new (and not so new) functionality and to guide us through this journey in the world of “Everything is possible in a mobile browser,” I will illustrate this article with some fictional but plausible use cases. Dear reader, meet Zoe, my user. She’s around 30 and works as a developer in our industry in the very near future. She works all day long on a computer, so she doesn’t want to have one at home, and she uses her smartphone as a primary device to navigate the web.

Part 1: Accessing And Handling Images, Video And Audio Directly In The Browser Link

Video and Audio Conference in the Browser (With WebRTC) Link

Zoe is invited to speak at a conference. Instead of adding her on Skype, like people usually do, the conference organizers send Zoe a link to an online video and audio conference web app, AppRTC¹.

Zoe simply enters the correct room number. The browser asks her permission to access her camera and microphone, and that’s it: She gets connected with the other person. Zoe doesn’t need to install or update any additional plugin or app. Everything happens directly in the browser, no extra steps, no friction.

²

With a native app (especially on Android), you can ask users for a lot of permissions up front when they download your app. In the browser, users have to grant you access one API (i.e. one piece of functionality) at a time.

Using WebRTC⁴, you can open a direct real-time communication channel between two clients. You can then share sound, video and any other data directly between them.

⁵

This is powerful, but it’s supported only⁷ in Firefox and Chrome, and it’s under development for Edge and Safari. You will also need to access the video and audio streams. This can be done using the getUserMedia and Media Stream API⁸ (which is not supported⁹ in Internet Explorer or Safari).

Using this technology, we could imagine recreating a Google Hangouts or Facebook Messenger web app directly in the browser. The only thing missing would be access to the phone’s contacts. This is not currently possible from the browser with any kind of API.

Uploading a Picture From the Camera to the Browser Link

Zoe is asked by the conference’s organizers to fill her online bio for the conference. She logs into the website, goes to her account and finds the place to do so. When she taps on the “Update my picture” button, she can choose between taking a new picture with her camera or selecting a picture already taken. She chooses the first option and fills in her profile.

¹⁰

The HTML5 file input type has gotten a new attribute, named accept¹².

You can pass a comma-separated list of types of content files. On mobile, this would trigger a dialog in which users can chose between different content sources or direct access to the camera:

<input type="file" name="image" accept="image/*"> 

If you want the user to skip the selection dialog and directly access their camera to take a picture, you can add the capture attribute:

<input type="file" name="capture" accept="image/*" capture="camera"> 

This would also work if you want to capture video or audio:

<input type="file" name="video" accept="video/*" capture="camcorder"> <input type="file" name="audio" accept="audio/*" capture="microphone"> 

If you want to have fun on your phone, I’ve put together a little demo with all of these inputs¹³.

Now that we can directly access media (videos, images and audio) in the browser, a whole new world of possibilities has opened up. You could change your avatar right on the responsive website of any of your social media accounts, and you could take and upload photos and videos to your timeline instantly. If you want to sell your car or bike on Craigslist, you don’t need to take pictures of it and then upload them to your computer; you can create your ad and add the images right in your mobile browser.

Having Fun With Inputs Link

If we want to go one step further, we could imagine recreating an Instagram-type app directly in the browser using CSS3 filters and input type files.

¹⁴

There’s also a really fun guitar tuner¹⁷ web app that uses your microphone to make sure your guitar (or voice) is perfectly tuned. Pretty handy, isn’t it? Again, you don’t need to install anything.

¹⁸

Part 2: Enhancing A Conference Website Into A Web App Link

In this second part, I want to show you how we can enhance the user experience on a conference website. You might be familiar with the concept of progressive enhancement on the web. I encourage you to apply it to the techniques that follow: Make sure that all of the main functionality on your website is accessible and works on a wide range of mobile browsers, and then progressively enhance the website with launch icons, notifications and offline support to build a better experience on mobile devices that support it.

Installing And Launching The Website As A Progressive Web App Link

To access a website, most users either will already have it bookmarked and hidden in a sea of bookmark folders or will simply look for it on their favorite search engine. One of the main arguments in favor of apps is the launch icon: It’s already there, ready on the user’s home screen.

Favicon for the Home Screen Link

Now, imagine that you could do the same for a website and launch it from the home screen, like you would do for any native app. Most modern browsers have this option available in a menu.

²⁰

You’ll need some extra files and size to satisfy the range of browsers out there on the market, but this will work on iOS, Android (Chrome, Opera and Firefox) and Edge for mobile.

²²

Chrome’s App Install Banner Link

Not a lot of users know that they can add a website directly to their home screen. To make this functionality more discoverable, Chrome 42+ introduced the App Install Banner²⁴. For the moment, the banner appears when users have visited a website at least twice, with at least five minutes having elapsed between visits.

²⁵

Your website also has to meet a few technical criteria to trigger this banner, including having a service worker, being served over HTTPS (which we’ll get to later) and having a valid web app manifest file.

The Web App Manifest File Link

Specified by the W3C, a web app manifest²⁷ is a simple JSON file that enables a developer to control a lot of things about their web app, including its name, icon, launch screen and theme colors, as well as how they want it to launch. Web Manifest Validator²⁸ is a little online tool that will help you to validate the file. Once it’s created, you will need to link it to your website²⁹.

{ "short_name" : "SuperConf", "name": "SuperConf, an amazing conference", // Defines a default URL to launch "start_url": "/index.html", "icons": [ { "src": "launchicon.png", "sizes": "96x96", "type": "image/png" } // Other icons go here ], // Launches the website without a URL bar "display": "standalone", // Provides a site-wide theme color "theme_color": "#fa9c00", // Provides a background color for the launch screen "background_color":"#ffffff" } 

It’s currently supported³⁰ in Android WebView, Opera Mobile, Chrome for Android and apparently Firefox³¹ as well.

Splash Screen Link

Starting in Chrome 47+, browsers use the manifest’s theme_color, background_color, name and icons to automatically generate a launch screen³² while a website loads.

³³

Customizing the Display Mode Link

With the display property³⁵ in the manifest file, a developer can choose how they want the website to launch once it has been added to the home screen:

• "display": "standalone" launches the website in full-screen mode, without any URL bar (currently supported in Chrome and Opera).
• "display": "browser" launches the website in the conventional mode, with the URL bar visible.

³⁶

The W3C also specifies fullscreen mode, which launches a website using the entirety of the available display area on a mobile device, and minimal-ui mode, which gives the user access to a minimal set of UI elements. Neither seems to be supported anywhere yet.

Developers can also force an orientation with "orientation": "landscape" or "orientation": "portrait", but unless you are building a video game, you might not want to use it.

Be Careful With meta name="apple-mobile-web-app-capable" on iOS Link

Display mode isn’t supported on iOS. The <meta name="apple-mobile-web-app-capable"> tag³⁸ might look like it does the same thing, but it doesn’t. It will work on a web app with no links (AJAX-loaded content, for instance), but as soon as you use this on a traditional website, things get ugly. When the user launches the website from the launch icon, it will open full screen, but as soon as they tap on a link, it will open in a new tab in Safari. To prevent this, you will need some JavaScript to override the click event (which does not sound ideal).

³⁹

Changing the Color of the URL Bar Link

Another fun thing you can do to delight users is to change the color of the URL bar. To change it for every page, you can use the HTML meta tag:

<meta name="theme-color" content="#db5945"> 

Here in France, we have a nice website that sells socks… only socks — but it does it quite well. Part of its success is due to the wide range of sock colors. And the color of the URL bar on every page matches the color of the displayed socks. This is one of those little details that can delight users and contribute to a fun overall experience.

Using the manifest.json file, you can also provide a site-wide theme color: "theme_color": "#133742".

Users will see this color in the URL bar as well as in the Android bar at the top when the website is in browser mode. It will also be used for the top bar of the splash screen, as seen before, and when the tab is displayed in a stack of many other tabs in multitasking mode.

⁴²

One Tool to Generate Them All Link

If you want to provide a nice experience, there’s a lot to do and to think about, including making a lot of different sizes of icons for different operating systems. Some nice person has built a cool little tool named RealFaviconGenerator⁴⁴. Feed it your favicon, and you’ll get a nice interface to play with and to tweak all of the things just mentioned. Grab the ZIP file, and voilà!

Notification Access Link

Zoe checks the program before the conference. From the little icon next to each talk, she understands that she can add a talk that she wants to attend to her schedule. A subscription button appears under each talk’s description, with short text explaining that users who have subscribed to the talk will get a notification 10 minutes before the talk starts, even if their browser is closed. Users must allow access through a browser dialog.

⁴⁵

Being Smart When Asking Permissions on Mobile Browsers Link

The Chromium team put out an interesting document titled “Best Practices for Push Notifications Permissions UX⁴⁷.” Users need to understand what they will gain from giving you access to their notifications. Explain why you need this access, and put it in context. I’m seeing more and more websites and blogs asking to send notifications the first time a user arrives on the home page. As a user, I might have arrived on a blog by following a link on Twitter and might not know what the blog is about, so I’m going to need more context before accepting notifications (if I ever do accept them). In the browser, when a user denies access, the website will not be able to ask for it again (unless the user goes into the website settings). So, be smart about when and where you ask. This is a general rule for all permissions, by the way (media, notifications, geolocation, etc.).

Integrating Notifications in the OS Link

The conference day has finally arrived, and Zoe is getting a coffee when her phone vibrates. Even though the website and web app are closed, she has just gotten a notification directly on her locked phone, telling her that the first talk she has subscribed to will be starting in 10 minutes.

⁴⁸

Mobile browser notifications can compete with native notifications because they get integrated directly in the notification center of the operating system. This means that they will get displayed outside of the browser or web app, even if it is closed. It will appear in the operating system’s notification center and will be displayed on the lock screen of the phone as well. Notifications in Chrome can also be shown in the desktop notification center of Windows 10 and Mac OS X.

Meet the Push API and Service Workers Link

A service worker is JavaScript that runs in the background once installed. It acts as a sort of small proxy, pushing notifications to the browser. The Push API is part of the family of service worker technologies. Once activated on the page, the service worker receives the push message, and then it is up to you how to notify the user (for example, using push messages or one-page notifications). A the time of writing, service workers are supported⁵⁰ in Chrome, Firefox, Opera, Android browser and Chrome for Android (it is under consideration for WebKit), and the Push API is supported⁵¹ only in Firefox, Chrome and Chrome for Android 51.

⁵²

In short, to make notifications work, you will need:

• HTTPS on your server,
• a declaration of a service worker,
• the Push API,
• the user’s acceptance.

That’s as far as my technical skill goes. If you want to go deeper, here are a few resources from people far more qualified on the topic than me:

• Notification Generator⁵⁴, Simple Push Demo⁵⁵ and Try Web Push⁵⁶
  To test notifications.
• “Service Workers: An Introduction⁵⁷,” Matt Gaunt, Google Developers
• “Beyond Offline⁵⁸,” Salva, Mozilla Hacks
  
  Discusses other cool things you can do with service workers.
• “Web Push Notifications: Timely, Relevant, and Precise⁵⁹,” Joseph Medley, Google Developers
• “Using the Push API⁶⁰,” Mozilla Developer Network
  
  A long but interesting article.
• Is ServiceWorker Ready?⁶¹, Jake Archibald
  
  To check the status of browser support.

Offline Access Link

Zoe might not have noticed, but the conference’s schedule was cached offline while she was browsing. This means that, even if she doesn’t always have an Internet connection during the conference, she can still visit the website.

⁶²

This magic happens again with service workers. A service worker can intercept the user’s request and provide cached files to display the page faster, with or without a connection. The browser will first look for the cached files, instead of requesting the ones on the server. It can then also check whether the files need to be updated by looking for file modifications in the background. You can use this to make your website work offline, but you can also use it to cache part of the website — the user interface, if you like — to make it load faster.

I imagined all kinds of scenarios for Zoe when I was preparing for the ConFoo conference in March 2016. I wanted to create a demo page, but then in June I saw that Google I/O implemented everything I imagined, so I’ll let you play with that demo instead. Open your mobile browser, go to events.google.com/io2016⁶⁴, navigate to the schedule, and add some events to your list (you might need to log in with a Google account first). Then, add the website to your home screen, close Chrome, and launch the website from the home screen icon. Keep on adding things to your list. Switch to airplane mode, and you should see a short explanation that the connection has been lost and that changes will be synchronized with the server once you are back online. Add some more talks to the list, go back online, and voilà!

⁶⁵

There are two other demos I really like:

• Pokedex.org⁶⁸
  An online index of Pokemon characters (predating PokemonGo!).
• 2048⁶⁹
  A fun game that has saved me from boredom during hours of air travel.

Again, open the website, load it to your home screen, switch to airplane mode, and then come back.

⁷⁰

If you want to go deeper in the code, I would recommend the following reading:

• “Create a Really, Really Simple Offline Page Using Service Workers⁷²,” Dean Hume
• “Offline Storage for Progressive Web Apps⁷³,” Addy Osmani
• “Making a Simple Site Work Offline With ServiceWorker⁷⁴,” Nicolas Bevacqua, CSS-Tricks

Going Full Steam: Progressive Web App Link

I’ve described how to enhance a website to add some native-like functionality. You could go one step further with a full-on progressive web app. In their article “Instant Loading Web Apps With an Application Shell Architecture⁷⁵,” Addy Osmani and Matt Gaunt refer to a progressive web app as a web app that “can progressively change with use and user consent to give the user a more native-app-like experience.” They cite an article in which Alex Russell⁷⁶ describes progressive web apps as “websites that took all the rights vitamins.”

According to Google’s documentation⁷⁷, progressive web apps are:

• Progressive
  
  They work for every user, regardless of browser choice, because they’re built with progressive enhancement as a core tenet. This bring us back to what I said at the beginning of this section: Make sure your website works even if all of this fancy new technology is not supported, and treat all of this as progressive enhancement.
• Responsive
  
  They fit any form factor: desktop, mobile, tablet and whatever is next.
• Connectivity-independent
  
  They can be enhanced with service workers to work offline or on a slow network.
• Fresh
  
  They are always up to date, thanks to the service worker updating process.
• Safe
  
  They must be served via HTTPS to prevent snooping and to ensure that content hasn’t been tampered with.
• Discoverable
  
  They are identifiable as “applications” thanks to the manifest file and the service worker registration.scope, which allows search engines to find them (like any normal old-school website).
• Re-engageable
  
  They make re-engagement easy through features such as push notifications. Again, for me, this is not mandatory, and you might want to be careful with it.
• Installable
  
  They allow users to keep the apps they find most useful on their home screen, without the hassle of an app store.
• Linkable
  
  They can easily be shared via a URL and do not require complex installation.
• App-like
  
  They feel like an app to the user, with app-style interactions and navigation, because they’re built on the application shell model.

The last point about the application shell is where it gets really interesting and where progressive web apps bridge the gap between classic responsive websites and native apps. If you’ve created a native app, this should ring some bells. In a native app, the user would download the full UI (icons, fonts, etc.) when they install the app. Then, when they launch the app, the content is loaded from the server.

The concept of the application shell is pretty similar: It is the minimum HTML, CSS and JavaScript required to create your UI, the “chrome” of your interface. You would cache this to make the app load quickly. Then, the rest of the content would get dynamically loaded to populate the different views.

⁷⁸

Also, the people at Opera have put together a selection of progressive web apps⁸¹. If you want a taste of what progressive web apps can do, you’ll find demos and inspiration there.

With Great Power… Link

… comes great responsibility. There’s currently some⁸²debate⁸³ in the community about progressive web apps. Here are a few of the issues people are worrying about:

• Is it really a good idea to hide URLs in a progressive web app? Developers have the choice, but it looked like Chrome was kind of in favor of standalone mode. And how are you supposed to share content? (Those awful share buttons might make a big comeback.)
• A lot of current implementations seem to concentrate on the app part and forget the web part. Are we going to revert to dedicated mobile websites and desktop websites? I’m really looking forward to seeing more responsive and progressively enhanced demos.
• Loading the application shell is like loading the chrome before the content, whereas many people want a “content-first” approach. Will users have to wait for your content to load even once the interface is already displayed?

If you ask me, not every website should be a progressive web app. For instance, transforming my portfolio⁸⁴ into a progressive web app was pretty silly, but I did it for a demo; like many people in the industry, my portfolio is also a little playground. In truth, nobody (except maybe my mum) would install my portfolio as an app on their phone. And that’s totally fine, because let’s face it: My portfolio isn’t really app-ish.

So, I guess a progressive web app would be a great idea for websites that users visit on a regular basis, such as news websites and blogs (which is the criterion Chrome uses in determining whether to show the install banner), e-commerce and restaurant-delivery websites (from which users might order regularly), and anything task-oriented (i.e. app-ish). I would add social networks such as Facebook to the list, but building a progressive web app is far less interesting to those companies than building a native one — how are they supposed to collect and sell all of their users’ data if users can only access their services in the browser?

The thing about Facebook is that its mobile website works pretty well. But as soon as you try to view your messages, the website tries to open the Messenger app. Fun fact: Facebook has built a really nice responsive website for Messenger⁸⁵ that works on desktop. You can shrink it to a mobile-ish size, and it still works. But as soon as you visit it on a mobile device (or with a mobile user agent), you get the mobile version of the website telling you that you need to install the app. So, when it comes to mobile apps versus progressive web apps (or responsive websites), even though we now have the tools and technology to build a lot of things in a mobile browser, there will always be different factors at play in the decisions of how to implement a service. The fact that you can’t access a phone’s address book from the browser is another piece of the puzzle.

To go deeper in this topic, you might want to read the following:

• “A Beginner’s Guide to Progressive Web Apps⁸⁶,” Kevin Farrugia, Smashing Magazine
• “How We Made the RioRun Progressive Web App⁸⁷,” Rich Harris, The Guardian
• “Progressive Web Apps⁸⁸” (conference slides), Nolan Lawson
• “Progressive Web App: A New Way to Experience Mobile⁸⁹,” Amar Nagaram, Flipkart
• “Washington Post Unveils ‘Lightning-Fast’ Mobile Website⁹⁰,” The Wall Street Journal
• “Designing Responsive Progressive Web Apps⁹¹,” Jason Grigsby, Cloud Four

Part 3: Adapting The Website Or Web App To A User’s Current Needs And Context Link

Mobile devices are now equipped with a lot of different sensors that can get us a lot of information about our users (for best or worse). In this last part of the article, we will focus on how to enhance a website or web app for the user’s current needs, situation and context.

Ambient Light Detection Link

Back to Zoe for a moment. Thanks to the notification that popped up on her phone, she gets to the first talk in her schedule on time. She sits down in one of those comfortable theater chairs, and the room gets dark as the talk is about to start. She visits the conference website one last time before putting her phone away.

⁹²

Using the light sensors on the device, we can adapt the luminosity or contrast of a website to the ambient light. Apart from making a website darker when the user is in a dark room, this could have a lot of practical applications. Many of the websites that my company builds get used in a private room (or on a couch), but that’s not the case for a lot of the professional products and interfaces I build. Those need to be used “in the field” — outside, inside, on rainy days, on sunny days, anything you can imagine.

For example, I was working on a crane-monitoring interface. The interface works in a Chrome browser on both desktop and tablet. The operator needs to see alerts when the wind is blowing too fast in order to change the cranes’ mode so that they don’t fall or collide with each other. The mobile device could be used in a really dark environment, or a lot of light might shine through the window directly onto the operator’s desk. Using ambient light sensors, we could maintain the contrast of the interface when there is too much light in the room, so that people monitoring the cranes will always be able to see alerts if something goes wrong.

In theory, there are two ways to do this. You could use the Ambient Light Sensor API⁹⁴ to access the intensity level measured by the device’s light sensors. At the time of writing, this is supported⁹⁵ only in Edge and Firefox for the desktop. A light-level query was expected in the “Media Queries Level 4” specification, but it seems to have been deferred to “Media Queries Level 5⁹⁶,” so this is not for us today.

Enhance Conference Feedback Using Bluetooth URL Transfer Link

When a talk ends, it’s usually feedback time. When I was at ConFoo, the conference organizers had participants fill out a short form at the end of each talk. Then, a team would collect the forms, read them, scan them and send them to me with an average grade. This was awesome; I got all of the feedback one hour after my talk. But I’m guessing it was also a lot of work for the staff. Let’s see how we can enhance this using Bluetooth, URLs and smartphones, shall we?

⁹⁸

The Physical Web Applied to Conference Feedback Link

This is a good time to meet the “physical web.” Google has launched an initiative¹⁰⁰ to “enable quick and seamless interactions with physical objects and locations.” The idea is to take advantage of the power of the web — hence, the URLs to share content and to allow users to interact with objects and locations in their surroundings without having to install anything. If you must, you could think of this as QR codes on steroids. Bluetooth beacons will broadcast URLs, and users’ phones in the vicinity will be able to catch those URLs and directly open websites or web applications.

Back to Zoe and our conference. A Bluetooth low-energy (BLE) beacon supporting the Eddystone protocol specification is embedded in the conference poster next to the door.

¹⁰¹

A little notification tells Zoe that a URL is being broadcast nearby, which her browser can scan and display.

¹⁰³

Zoe opens the URL directly in her browser and fills in the feedback form online. Staff are no longer required to scan the forms, and the organizers can do this for every talk.

¹⁰⁵

For this to work, users need to activate the physical web in the browser and also enable Bluetooth. The physical web is not activated by default (for now). It can be activated on Chrome for both Android and iOS¹⁰⁷. The physical web has been supported in Chrome for iOS since July 2015, and is available on Chrome for Android in version 49+ and on devices running Kit Kat (4.4) and above.

What Happens Next Is Simply the Web Link

The great thing about this is that you could integrate a beacon into almost anything: a street poster, a dog collar, a rental bike or a rental car. The idea is to use this for small interactions for which you would not really consider building a native app, but for which you could easily create a web page. In a video introduction to the physical web, Scott Jenson describes¹⁰⁸ an interesting way to pay for a parking meter.

The physical web is about getting URLs to phones. What happens next is simply the web.

This is where things get exciting! In her talk “The Internet of Things Is for People¹⁰⁹,” Stephanie Rieger explains how you can do a lot of useful stuff by combining a URL with a place (no need for geolocation — you’ve got a beacon here, remember) and a time (i.e. when the URL is triggered); for example, allowing the user to dig deeper into useful and relevant content. You have the exact context of the user; so, you can trigger a URL for content that adapts accordingly to the situation — an amazing, progressively enhanced experience tailored to the user’s needs. Bring service workers, WebRTC, notifications, progressive web apps and all of the technologies discussed earlier into the mix, and this, my dear designer and developer friends, is going to be powerful!

Another interesting example from Stephanie’s conference slides is Panic’s corporate sign in Portland¹¹⁰. The Panic team built an interactive sign for its building, and people can go to a website¹¹¹ to change its color. How cool is that? The website is even a progressive web app. It’s fun to change the colors from where I live and imagine them changing on the building, but I’m a little far away. Many people walking around the area might not even be aware of this fun trick. With the physical web, we imagine that Panic could broadcast the URL of its fun little web app around the building, so that passersby can discover it.

If you are looking for more fun ideas for the physical web, check these out:

• “Create a Beacon-Enabled Treasure Box¹¹²,” Jen Looper, Hackster
• “Physical Web Candy Machine¹¹³,” Eric Ely, Hackster
• “Disney’s Fun Wheel Challenge Hands-On: Makes Waiting Fun¹¹⁴,” Roy Choi, TechnoBuffalo
  
  Not the physical web, but something similar: Disney’s Fun Wheel Challenge game is available via a URL over Wi-Fi, so that people can have fun while waiting in line for a ride. No app required!
• “Physical Web¹¹⁵” (conference slides), Jeff Prestes

More Fun With the Web Bluetooth API Link

The physical web is but one attempt to play with Bluetooth and browsers. There’s also the Web Bluetooth API¹¹⁶, which will allow web applications and websites to access services exposed by devices. This means that in the future, we will be able to directly connect and control objects (watches, sensors, smart thermostats, etc.) to a browser through Bluetooth. I say “in the future” because browser support is pretty low¹¹⁷ at the moment: Chrome, with a flag. Eventually, we will be able to do really fun things directly in the browser, like change the colors and the mood of this cute little turtle using only a website and Bluetooth connection:

Geolocation And Battery Status Link

The conference ends a few hours later. Zoe is tired and decides to use the bike-rental service Velibre to get back to her hotel.

Adapting the Website to the User’s Location Link

Zoe arrives on Velibre’s website. A big button says “Find my location,” and a little snippet explains to Zoe that she will be able to find bike-rental stations nearby once she grants the website access to her location.

¹¹⁸

With the Geolocation API¹²⁰, we can access the user’s current static location and also monitor changes in location when they move. Basically, you could do a lot of geolocation-related things that native apps do, directly in the browser. This is pretty well supported in every mobile browser¹²¹ (except for Opera mini). Remember that, in the browser, users have to grant access first. So, you might want to make clear why you need their location. Asking it when the user first visits the website is not the best idea. Again, always ask in context, and explain what the user will gain.

And don’t forget to progressively enhance. A lot can go wrong with geolocation: The user might not see the dialog box (which I’ve seen with my own eyes in user-testing sessions), GPS might not be available, or the user simply might not grant access. Always provide a fallback. It could be as simple as a free-text input field that the user can fill in with their current (or desired) location. Also, don’t assume that users always want a given service at their current location; let them change the location. There was a cinema app that relied only on the user’s current location to provide a schedule of movies. This is great if the user wants to see something nearby, but it doesn’t work so well if they are looking for something to watch on a trip out of town. Don’t assume the user’s intention, and use these technologies as enhancements, not defaults.

Adapting to Battery Level Link

It was a really long day. Zoe used her phone a lot, and her battery is almost dead. She taps on Velibre’s button to ask for the closest bike station. The website detects that her battery is really low and loads a static map instead of an interactive one in order to save a bit of power.

¹²²

The Battery Status API¹²⁴ give you access to the battery level of the device. To be responsible, we could, say, propose fewer battery-consuming resources when the battery is low. This would be really useful for battery-draining functions such as GPS, peer-to-peer connections and animation. Codepen has a demo¹²⁵ for you to play with. The API is currently supported¹²⁶ in Chrome, Firefox and Opera for the desktop and in the latest version of Chrome for Android.

Conclusion Link

In this article, which is inspired by a talk I gave¹²⁷, I wanted to present you with some APIs, some technologies and some of the cool things you can do with them to make your users’ lives easier. The future of the mobile browser is bright, shiny and fun. We can and will be able to build incredibly powerful things with web technologies.

In terms of mobile support for these technologies and APIs, it looks like the Android teams, followed by Firefox, Opera and Microsoft, are currently most focused on taking web apps to the next level and providing a more powerful experience for mobile browser users. iOS, on the other hand, is still far behind. Its lack of support for service workers might be the biggest issue here. If we truly want to be able to fill the gap between natives apps and mobile browsers, we need the notifications and offline functionality provided by service workers.

The big picture is complicated by more than just browser support. What would Apple gain by letting developers build web apps that don’t need to go in the App Store? Apple’s business model is tightly linked to iOS native applications? There’s an app for everything, right?

Is iOS holding us back? I don’t think so. We don’t need to embrace these new APIs and technologies as if they were supported everywhere. Building progressive web apps means building with performance in mind, while still providing a great mobile experience for users on all platforms and browsers. Make sure that users with devices that don’t support everything do not get frustrated with a blank page.

I’m just a designer, only one part of the whole chain. Now it’s your turn to build, to play, to share amazing websites and web apps!

(da, il, al)

Footnotes Link

1. 1 https://apprtc.appspot.com/
2. 2 https://www.smashingmagazine.com/wp-content/uploads/2016/11/webrtcchat-large-opt.jpg
3. 3 https://www.smashingmagazine.com/wp-content/uploads/2016/11/webrtcchat-large-opt.jpg
4. 4 http://w3c.github.io/webrtc-pc/
5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/11/ptop-large-opt.jpg
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/11/ptop-large-opt.jpg
7. 7 http://caniuse.com/#feat=rtcpeerconnection
8. 8 https://www.w3.org/TR/mediacapture-streams/
9. 9 http://caniuse.com/#feat=stream
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/11/media-upload-large-opt.jpg
11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/11/media-upload-large-opt.jpg
12. 12 http://www.wufoo.com/html5/attributes/20-accept.html
13. 13 http://codepen.io/stephaniewalter/full/xZoxOb/
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/11/cssgram-large-opt.jpg
15. 15 https://una.im/CSSgram/
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/11/cssgram-large-opt.jpg
17. 17 https://guitar-tuner.appspot.com/
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/11/guitartuner-large-opt.jpg
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/11/guitartuner-large-opt.jpg
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/11/add-to-home-button-large-opt.jpg
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/11/add-to-home-button-large-opt.jpg
22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/11/launch-icon-large-opt.jpg
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/11/launch-icon-large-opt.jpg
24. 24 https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android
25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/11/add-to-hom-large-opt.jpg
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/11/add-to-hom-large-opt.jpg
27. 27 https://w3c.github.io/manifest/
28. 28 https://manifest-validator.appspot.com/
29. 29 https://developers.google.com/web/updates/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-38-for-Android#telling_the_browser_about_your_manifest
30. 30 https://developer.mozilla.org/en-US/docs/Web/Manifest
31. 31 https://developers.google.com/web/updates/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-38-for-Android#what_every_developer_should_do_today
32. 32 https://developers.google.com/web/updates/2015/10/splashscreen
33. 33 https://www.smashingmagazine.com/wp-content/uploads/2016/11/splashscreen-large-opt.jpg
34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/11/splashscreen-large-opt.jpg
35. 35 https://w3c.github.io/manifest/#dfn-display-mode
36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/11/display-mode-large-opt.jpg
37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/11/display-mode-large-opt.jpg
38. 38 https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
39. 39 https://www.smashingmagazine.com/wp-content/uploads/2016/11/apple-launch-large-opt.jpg
40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/11/apple-launch-large-opt.jpg
41. 41 http://www.archiduchesse.com/
42. 42 https://www.smashingmagazine.com/wp-content/uploads/2016/11/theme-color-large-opt.jpg
43. 43 https://www.smashingmagazine.com/wp-content/uploads/2016/11/theme-color-large-opt.jpg
44. 44 http://realfavicongenerator.net/
45. 45 https://www.smashingmagazine.com/wp-content/uploads/2016/11/notification-dial-large-opt.jpg
46. 46 https://www.smashingmagazine.com/wp-content/uploads/2016/11/notification-dial-large-opt.jpg
47. 47 https://docs.google.com/document/d/1WNPIS_2F0eyDm5SS2E6LZ_75tk6XtBSnR1xNjWJ_DPE/edit#heading=h.v5v9jr5n9i1w
48. 48 https://www.smashingmagazine.com/wp-content/uploads/2016/11/notifications-large-opt.jpg
49. 49 https://www.smashingmagazine.com/wp-content/uploads/2016/11/notifications-large-opt.jpg
50. 50 http://caniuse.com/#feat=serviceworkers
51. 51 http://caniuse.com/#feat=push-api
52. 52 https://www.smashingmagazine.com/wp-content/uploads/2016/11/service-worker-large-opt.jpg
53. 53 https://www.smashingmagazine.com/wp-content/uploads/2016/11/service-worker-large-opt.jpg
54. 54 https://tests.peter.sh/notification-generator/
55. 55 https://simple-push-demo.appspot.com/
56. 56 http://goroost.com/try-web-push
57. 57 http://www.html5rocks.com/en/tutorials/service-worker/introduction/
58. 58 https://hacks.mozilla.org/2015/12/beyond-offline/
59. 59 https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/
60. 60 https://developer.mozilla.org/en-US/docs/Web/API/Push_API/Using_the_Push_API
61. 61 https://jakearchibald.github.io/isserviceworkerready/
62. 62 https://www.smashingmagazine.com/wp-content/uploads/2016/11/service-worker-offline-large-opt.jpg
63. 63 https://www.smashingmagazine.com/wp-content/uploads/2016/11/service-worker-offline-large-opt.jpg
64. 64 https://events.google.com/io2016/
65. 65 https://www.smashingmagazine.com/wp-content/uploads/2016/11/google-io-large-opt.jpg
66. 66 https://events.google.com/io2016/
67. 67 https://www.smashingmagazine.com/wp-content/uploads/2016/11/google-io-large-opt.jpg
68. 68 https://www.pokedex.org
69. 69 https://2048-opera-pwa.surge.sh/
70. 70 https://www.smashingmagazine.com/wp-content/uploads/2016/11/pwa-example-large-opt.jpg
71. 71 https://www.smashingmagazine.com/wp-content/uploads/2016/11/pwa-example-large-opt.jpg
72. 72 http://www.deanhume.com/Home/BlogPost/create-a-really–really-simple-offline-page-using-service-workers/10135
73. 73 https://medium.com/dev-channel/offline-storage-for-progressive-web-apps-70d52695513c#.89q94e79i
74. 74 https://css-tricks.com/serviceworker-for-offline/
75. 75 https://medium.com/google-developers/instant-loading-web-apps-with-an-application-shell-architecture-7c0c2f10c73#.50aqnknm7
76. 76 https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
77. 77 https://developers.google.com/web/progressive-web-apps/
78. 78 https://www.smashingmagazine.com/wp-content/uploads/2016/11/application-shell-large-opt.jpg
79. 79 https://medium.com/google-developers/instant-loading-web-apps-with-an-application-shell-architecture-7c0c2f10c73#.p9tdc6jg8
80. 80 https://www.smashingmagazine.com/wp-content/uploads/2016/11/application-shell-large-opt.jpg
81. 81 https://pwa.rocks/
82. 82 https://adactio.com/journal/10708
83. 83 https://www.kryogenix.org/days/2016/05/24/the-importance-of-urls/
84. 84 https://www.stephaniewalter.fr/
85. 85 https://www.messenger.com/
86. 86 https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/
87. 87 https://www.theguardian.com/info/developer-blog/2016/aug/19/how-we-made-the-riorun-progressive-web-app
88. 88 http://nolanlawson.github.io/pwas-2016-05/#/
89. 89 http://tech-blog.flipkart.net/2015/11/progressive-web-app/
90. 90 http://www.wsj.com/articles/washington-post-unveils-lightning-fast-mobile-website-1473152456
91. 91 https://cloudfour.com/thinks/designing-responsive-progressive-web-apps/
92. 92 https://www.smashingmagazine.com/wp-content/uploads/2016/11/ambient-light-large-opt.jpg
93. 93 https://www.smashingmagazine.com/wp-content/uploads/2016/11/ambient-light-large-opt.jpg
94. 94 https://www.w3.org/TR/ambient-light/
95. 95 http://caniuse.com/#feat=ambient-light
96. 96 https://github.com/w3c/ambient-light/issues/12
97. 97 http://codepen.io/WhatWebCanDo/pen/OyWZqY
98. 98 https://www.smashingmagazine.com/wp-content/uploads/2016/11/confoo-survey-large-opt.jpg
99. 99 https://www.smashingmagazine.com/wp-content/uploads/2016/11/confoo-survey-large-opt.jpg
100. 100 https://google.github.io/physical-web/
101. 101 https://www.smashingmagazine.com/wp-content/uploads/2016/11/pw-01-large-opt.jpg
102. 102 https://www.smashingmagazine.com/wp-content/uploads/2016/11/pw-01-large-opt.jpg
103. 103 https://www.smashingmagazine.com/wp-content/uploads/2016/11/pw-02-large-opt.jpg
104. 104 https://www.smashingmagazine.com/wp-content/uploads/2016/11/pw-02-large-opt.jpg
105. 105 https://www.smashingmagazine.com/wp-content/uploads/2016/11/pw-03-large-opt.jpg
106. 106 https://www.smashingmagazine.com/wp-content/uploads/2016/11/pw-03-large-opt.jpg
107. 107 https://google.github.io/physical-web/try-physical-web
108. 108 https://youtu.be/1yaLPRgtlR0?t=1m26s
109. 109 http://www.slideshare.net/yiibu/the-internet-of-things-is-for-people
110. 110 https://panic.com/blog/the-panic-sign/
111. 111 https://sign.panic.com/
112. 112 https://www.hackster.io/agent-hawking-1/create-a-beacon-enabled-treasure-box-085314
113. 113 https://www.hackster.io/eely22/physical-web-controlled-candy-machine-ce6711
114. 114 http://www.technobuffalo.com/videos/disney-fun-wheel-challenge-world-of-color-hands-on/
115. 115 http://www.slideshare.net/jeffprestes/physical-web-62013819
116. 116 https://webbluetoothcg.github.io/web-bluetooth/
117. 117 http://caniuse.com/#feat=web-bluetooth
118. 118 https://www.smashingmagazine.com/wp-content/uploads/2016/11/gelocation-large-opt.jpg
119. 119 https://www.smashingmagazine.com/wp-content/uploads/2016/11/gelocation-large-opt.jpg
120. 120 https://www.w3.org/TR/geolocation-API/
121. 121 http://caniuse.com/#feat=geolocation
122. 122 https://www.smashingmagazine.com/wp-content/uploads/2016/11/battery-large-opt.jpg
123. 123 https://www.smashingmagazine.com/wp-content/uploads/2016/11/battery-large-opt.jpg
124. 124 https://www.w3.org/TR/battery-status/
125. 125 http://codepen.io/WhatWebCanDo/pen/epvKNB
126. 126 http://caniuse.com/#feat=battery-status
127. 127 https://blog.stephaniewalter.fr/en/forget-apps-future-mobile-browser-nightlybuild-2016-conference/

↑ Back to topTweet itShare on Facebook