“Lie-fi can actually be worse than offline; at least if a device is definitely offline, your JavaScript can take appropriate evasive action.“ — Sam Dutton, Developer Advocate for Google Chrome, “Understanding Low Bandwidth and High Latency,” Web Fundamentals.

When your phone or tablet is online, everything works great. All your mobile apps run smoothly, easily accessing all your precious information.

But sometimes you have to return to the dark ages of the offline world. Here is where your mobile apps struggle to survive. Making apps run well with no connectivity is a major challenge. Some data will have to be stored in the device, the device has to process that data, and then there’s all the user experience agony (for more details, check out this great article).

Then, there’s the limbo between online and offline: Lie-fi.

Lie-fi is slang, so I have turned to Urban Dictionary for the definition (punctuation and spelling cleanup is mine):

“When your phone or tablet indicates that you are connected to a wireless network; however, you are still unable to load web pages or use any internet services with your device.”

A picture is worth a thousand words:

We’ve been looking into Lie-Fi and we’ve learned that there are ways to make sure your mobile app users don’t get fooled again.

First, Some Tips

How can mobile apps address Lie-fi? Here are a few tips.

1. Detect Lie-Fi

Your device is fooling you, indicating that there is network but nothing will work. What if you could detect Lie-fi and inform your user about it?

If you are building hybrid apps, check Offline.js. In addition to detecting regular offline conditions, it periodically checks for connectivity by pinging the back-end server.

Offline.js fancy connection detection (Source)

2. Use Short Timeouts

When your app is communicating with the server, you don’t want to keep your users waiting forever for requests that will never finish. Consider having short timeouts for every communication and let the user know if the timeout was reached by showing a meaningful message. That would not be this:

What in the world? An example of a bad error message (Source)

3. Design Empty States Well

Your app needs to communicate with the server to display data, right? So, if this communication is taking too long, what data will you show your user? If your plan is to use zeros or empty lists, it’s time to come up with a different one.

Here’s an example. You open your home banking app and Lie-fi kicks in right after. You see this:

All your balances are $0.00.

Panic?! Don’t worry — it’s just Lie-fi fooling with you. Here’s what happens if we just remove the zeros while the data is still being fetched:

Better to have no information than the wrong information

Lessons Learned

Here are some lessons we’ve learned from our research as mobile app developers.

Detecting Lie-fi Costs Money

Some users might use your app with limited data plans, especially in developing countries. You don’t want them to spend all their data by pinging to check for connectivity.

Consider having an opt-out option for this, or having it off by default in some regions in the world.

Ordering Back-end Requests Is Pointless

Sometimes Lie-fi is just a veeeeryyyy slow connection. If you have a lot of information to gather for your screen, you might think that ordering the requests — fetch the most important information first — is the answer.

Information ranked from most to least important

What sounds like a good idea in theory has no effect at all in practice.

Changing the order of data requests does not guarantee your app will receive the data in that same order.

Requests may not reach the back-end in the same priority. Processing time may vary for each request. Response size can also have an impact on when the data will reach the device.

How to Test a Hybrid Mobile App in Lie-fi

Google Chrome Developer Tools feature connection throttling. This enables you to simulate various network conditions in your app. Start with a limited bandwidth to act like a slow network, and in the middle of the test, set it to offline.

Chrome Dev Tools Connection Throttling

Something Else We Found, But Didn’t Try

Clumsy is a tool to simulate broken network situations in Windows machines. If you are testing your mobile app against your local development machine, you can use it to imitate various network failures and see how your app behaves.

Conclusion

Tools will help you, and we’ve worked hard at OutSystems to provide developers with a platform for easily building mobile apps that work in any scenario. But tools are not enough by themselves. You need to test your application and make sure it provides users with a great experience, even in poor network conditions.

Have you ever been fooled by Lie-fi? Got other tips and tricks to share so we don’t get fooled again? Leave comments with your challenges and solutions.