Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

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, AppRTC1.

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.

An online video conference chat in the browser2
Zoe doesn’t need to install anything to have an audio or video conference. (View large version3)

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 WebRTC4, 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.

Peer-to-peer explanation5
Using WebRTC for a peer-to-peer connection (View large version6)

This is powerful, but it’s supported only7 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 API8 (which is not supported9 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.

Media upload possibilities10
Zoe chooses to take a picture with her phone. (View large version11)

The HTML5 file input type has gotten a new attribute, named accept12.

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" id="image" 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" id="capture" name="capture" accept="image/*" capture="camera">

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

<input type="file" id = "video" name="video" accept="video/*" capture="camcorder">
<input type="file" id="audio" 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 inputs13.

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.

CSSgram14
This is what Una started doing with her CSSgram15. (View large version16)

There’s also a really fun guitar tuner17 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.

Guitar tuner in the browser18
(View large version19)

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.

Firefox, Safari and Chrome can all add a website to the home screen from the menu.20
A website can be added to the home screen from the menu in Firefox, Safari and Chrome. (View large version21)

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.

The favicon for my portfolio on different OS22
The favicon for my portfolio on different OS’. (View large version23)

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 Banner24. For the moment, the banner appears when users have visited a website at least twice, with at least five minutes having elapsed between visits.

Smart 'add to home screen banner' in Chrome25
While preparing for her talk, Zoe visits the conference’s website a lot. After a few visits, a small banners appears, telling her she can add the website to her home screen. (View large version26)

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 manifest27 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 Validator28 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 website29.

{
  "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 supported30 in Android WebView, Opera Mobile, Chrome for Android and apparently Firefox31 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 screen32 while a website loads.

Splash screen33
When Zoe is on a slow connection and is waiting for the website to load, she will see the icon of the conference, with an orange toolbar and a white background. (View large version34)

Customizing the Display Mode Link

With the display property35 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.
Display standalone versus browser36
"display": "browser" is on the left and "display": "standalone" is on the right for two different websites. (View large version37)

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"> tag38 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).

on iOS39
By default, the launched page opens full screen, but any other URLs open in a new tab. (View large version40)

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.

Archiduchesse41 matches the color of the browser’s tab to the color of the socks.

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.

Orange theme color42
"theme_color": "#133742" gives a nice orange color theme to my website. (View large version43)

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 RealFaviconGenerator44. 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.

notification dialog45
The first time Zoe clicks the notification button, the browser shows a dialog asking for access to send notifications for this domain. (View large version46)

Being Smart When Asking Permissions on Mobile Browsers Link

The Chromium team put out an interesting document titled “Best Practices for Push Notifications Permissions UX47.” 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.

Notification example48
Example of website notifications on Android (View large version49)

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 supported50 in Chrome, Firefox, Opera, Android browser and Chrome for Android (it is under consideration for WebKit), and the Push API is supported51 only in Firefox, Chrome and Chrome for Android 51.

Service workers52
Service workers (View large version53)

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:

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.

Service worker and offline access62
(View large version63)

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/io201664, 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à!

Google I/O demo65
Google I/O 2016 website demo66 (View large version67)

There are two other demos I really like:

  • Pokedex.org68
    An online index of Pokemon characters (predating PokemonGo!).
  • 204869
    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.

Offline website demo70
(View large version71)

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

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 Architecture75,” 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 Russell76 describes progressive web apps as “websites that took all the rights vitamins.”

According to Google’s documentation77, 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.

Explanation of application shell78
(Image: Addy Osmani and Matt Gaunt79) (View large version80)

Also, the people at Opera have put together a selection of progressive web apps81. 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 some82 debate83 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 portfolio84 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 Messenger85 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:

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.

Website gets darker92
The website’s visual theme changes to a darker color, so that people aren’t disturbed by a bright screen while listening to the talk. (View large version93)

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 API94 to access the intensity level measured by the device’s light sensors. At the time of writing, this is supported95 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 596,” so this is not for us today.

A cool Codepen demo97 for the Ambient Light Sensor API

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?

ConFoo feedback paper98
The ConFoo survey given to participants after each talk. (View large version99)

The Physical Web Applied to Conference Feedback Link

This is a good time to meet the “physical web.” Google has launched an initiative100 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.

URL broadcast101
The beacon is broadcasting. (View large version102)

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

Device catches the URL103
The user gets a notification on their device. (View large version104)

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.

The browser opens the URL105
The URL opens in a browser. (View large version106)

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 iOS107. 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 describes108 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 People109,” 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 Portland110. The Panic team built an interactive sign for its building, and people can go to a website111 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:

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 API116, 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 low117 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.

Geolocation dialog118
Zoe taps the button, a little dialog box appears at the bottom of the website, and she accepts. (View large version119)

With the Geolocation API120, 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 browser121 (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.

Battery-saving map122
A little alert informs Zoe about the change to the static map and lets her choose the dynamic map if she wants. (View large version123)

The Battery Status API124 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 demo125 for you to play with. The API is currently supported126 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 gave127, 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 top Tweet itShare on Facebook

Visual & UX Designer, Mobile enthusiast, I'm a geeky pixels coffee lover who also uses HTML and CSS as design tools. I love to share my knowledge through articles and conferences. You can find me on twitter and on my portfolio/blog.

  1. 1

    Thanks for sharing this with us!
    ‘Apple taught us, “There’s an app for that.” And we believed it.’ Honestly I never did and it’s good to see that browsers are catching up functionality-wise.
    If only more mobile browsers (I’m looking at Safari) would support push notifications.

    Kind regards and keep up the good work!

    2
  2. 2

    The proliferation of ads that take over the mobile browser have ruined the web experience for me.

    0
  3. 4

    Thank you for this very informative article. I have learnt a lot of new things from this.
    Appreciate your thoughts and insights!
    Bookmarking this article for future reference and ideas when I design.

    4
  4. 5

    Merci Stéphanie. I will definitely use your article. I was aware of most of these APIs but having all of that into one article is gold. I will use it firstly to keep learning by using your references. And secondly to help colleague what the browser can do for us.
    I would probably also mention Virtual Reality. This is now available on the browser and it is jaw dropping.
    Merci encore milles fois
    Nicolas

    0
  5. 7

    Been saying for years that Native Apps were going to fade away. The process of downloading/updating an app (not to mention the space/memory allocated for it) is just clunky and outdated.

    Once the CTA (chicago public transit) started using a web app with a convenient bookmark icon, it just made sense. Especially since I was able to bookmark the exact stop/train line that I had interest in checking at a glance. Just made sense, rather than launching an app, selecting a train color, selecting a stop, just to see the next arriving train…

    Thanks for the great article for insight on this avenue! (high-five)

    0
  6. 8

    Awesome article. Thanks!

    0
  7. 9

    Note – WebRTC is not under development in mobile Edge, it is only planned for desktop Edge. WebRTC and ORTC will be missing from mobile Edge in the forseeable future.

    You wrote that “Android browser” supports service worker. I would not mention it as a standard browser anymore.
    It might be a Chromium (or Android Webview) based browser that a vendor has elected to create, but there is no single “Android browser” anymore, as far as I know.

    Samsung has its own browser (which is a weird mesh of several Chrome versions) and stock (not the open source edition, obviously) Android pretty much comes with Chrome.

    Push notifications are coming to Edge, though.

    0
  8. 10

    So much good stuff laid out in this article and presented in an easily-digestible, well-written fashion!

    0
  9. 11

    It’s truly amazing to watch mobile development evolving at a blazing speed. It wasn’t so long ago that we put native apps at the very center of our mobile universe. And now, look, we are getting back to the good old browser! I believe the biggest challenge is to enable these heavy, feature-rich websites in the mobile app without really compromising user experience. And it seems like developers have already been coming up with feasible solutions. We at Iflexion, for example, developed an e-commerce web application for a furniture store in Seattle, which has fully replaced their legacy static website. As it was optimized for mobile devices and tablets, the company was able to reach wider audiences and thus boost sales significantly. So I think we all are on the way to a better mobile web here. PS. You can read more on our project here: https://www.iflexion.com/portfolio/online-furniture-store-rich-customization-options

    1
  10. 12

    Hi Stéphanie, thanks so much for all your efforts spent on this excellent series of articles. A very timely read over the Xmas break.

    I have a Knowledge Base/Note Taking Web app I’m developing, Clibu which is all Javascript and uses Node.js and MongoDB on the server.

    My plan has always been to enable Clibu to be used off-line and the developments with Service Workers and Progressive Web Apps will I’m sure help make this a reality.

    However it is all so new and there is so much to learn, so once again many thanks for your contribution.

    Have a great 2017,
    Neville

    0
  11. 13

    1. Perfect article. PDF converted and store. ;)

    2. I’ve always taken the bet that web will never die. Even though I’m (also) a mobile programmer, I knew web app development would have made its way, taking advantage of mobile development enhacement.

    3. Definitely, perfect article.

    0
  12. 14

    A rare case when I read such a long article to the very end and even felt disappointed that it was over. Very well-written!

    0
  13. 15

    Dan Dascalescu

    January 11, 2017 11:39 pm

    Nice article, Stephanie!

    Two issues:

    1. The sign.panic.com app is no longer a PWA
    2. There seems to be a missing picture after “this cute little turtle using only a website and Bluetooth connection:”

    0
  14. 16

    Joseph Saxan Rappai

    January 15, 2017 6:48 pm

    Awesome article. So much good stuff laid out in this article, I have learnt a lot of new things from this. Appreciate your thoughts and insights!

    0

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top