DEV Community: Yunus Khan

How I Built an Offline-First Qibla Compass for a PWA Without an Internet Connection

Yunus Khan — Sun, 09 Aug 2026 12:14:35 +0000

When you're travelling, one of the simplest problems can become surprisingly difficult: finding the Qibla direction without an internet connection.

I wanted to solve this problem while building SabrTime, an Islamic PWA focused on making everyday worship tools available with minimal dependencies, no mandatory login, and an offline-first experience.

The result was an offline-capable Qibla compass that can calculate the direction toward the Kaaba using the device's location and orientation sensors.

Why Offline Qibla Matters
Most web applications assume that the user has an active internet connection.

That isn't always true.

A person may be:

Travelling by airplane
In an area with poor network coverage
Abroad without mobile data
Inside a building with unreliable connectivity
Using airplane mode

A Qibla tool shouldn't necessarily stop being useful just because the network disappears.

This led me to an important design principle:

«Calculate what can be calculated locally, and use the network only when it is actually necessary.»

The Basic Architecture

The Qibla calculation itself doesn't require a server.

The basic flow is:

Device Location
↓
Latitude + Longitude
↓
Calculate Bearing to Kaaba
↓
Device Orientation Sensor
↓
Calculate Relative Direction
↓
Display Qibla Compass

The Kaaba's geographic coordinates are fixed, so the application can calculate the bearing locally once it knows the user's latitude and longitude.

Calculating the Bearing to the Kaaba

The first step is determining the initial bearing between the user's location and the Kaaba.

For two points on Earth, we can use the following formula:

const lat1 = userLatitude * Math.PI / 180;
const lat2 = kaabaLatitude * Math.PI / 180;

const deltaLon =
(kaabaLongitude - userLongitude) * Math.PI / 180;

const y = Math.sin(deltaLon) * Math.cos(lat2);

const x =
Math.cos(lat1) * Math.sin(lat2) -
Math.sin(lat1) * Math.cos(lat2) * Math.cos(deltaLon);

let bearing = Math.atan2(y, x);

bearing = bearing * 180 / Math.PI;
bearing = (bearing + 360) % 360;

The resulting value represents the initial compass bearing toward the Kaaba.

This is useful because the calculation happens entirely on the device.

There is no need to send the user's coordinates to a remote API simply to calculate a direction.

Getting the User's Location

The browser's Geolocation API can provide the user's current coordinates.

A simplified implementation looks like this:

navigator.geolocation.getCurrentPosition(
(position) => {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;

calculateQibla(latitude, longitude);

},
(error) => {
console.error("Unable to get location:", error);
}
);

Of course, a production application needs to handle permission denial, unavailable location data, low accuracy, and other edge cases.

Using Device Orientation

Knowing the Qibla bearing isn't enough for a compass interface.

We also need to know which direction the device is facing.

Modern browsers can expose device orientation information through sensor APIs, although implementation details and permission requirements can vary between browsers and operating systems.

The basic concept is:

Qibla Bearing
-
Device Heading
=
Relative Qibla Direction

For example, if the Qibla bearing is 280° and the device is currently facing 250°:

280° - 250° = 30°

The UI can then tell the user that the Qibla is approximately 30° to the right.

The Difficult Part: Sensors Are Messy

This sounds straightforward until you actually test it on physical devices.

A compass isn't perfectly stable.

The readings can be affected by:

Magnetic interference
Metal objects
Device hardware
Sensor noise
Indoor environments
Browser differences
Device calibration
Rapid device movement

So a good compass interface shouldn't simply trust one sensor reading.

Instead, the application needs to smooth readings and provide clear visual feedback.

Handling Sensor Noise

One simple approach is to maintain a rolling set of readings and smooth the result.

For example:

const readings = [];

function smoothHeading(newHeading) {
readings.push(newHeading);

if (readings.length > 10) {
readings.shift();
}

return readings.reduce((sum, value) => sum + value, 0)
/ readings.length;
}

This is only a basic example. Circular values such as 359° and 1° require special handling because a normal arithmetic average can produce incorrect results.

That's an important lesson when working with compass data:

Angles aren't ordinary numbers.

Building It as a PWA

The next challenge was making the experience work even when connectivity disappears.

A Progressive Web App can cache the application's static resources so that previously loaded functionality remains available offline.

The architecture becomes:

          ┌───────────────┐
          │    PWA UI     │
          └───────┬───────┘
                  │
    ┌─────────────┴─────────────┐
    ↓                           ↓

Local calculations Cached resources
↓ ↓
Qibla bearing Offline interface
↓
Device sensors
↓
Qibla direction

The key idea is that the compass calculation doesn't need a continuous internet connection.

Privacy Was Another Design Goal

Location data is sensitive.

For an Islamic utility like a Qibla compass, I wanted the architecture to minimize unnecessary data transmission.

If the calculation can happen locally, there is little reason to send the user's exact coordinates to a remote server merely to determine a bearing.

This is one reason I prefer a privacy-first, client-side approach wherever practical.

What About Airplane Mode?

This is where the offline-first approach becomes particularly useful.

With network connectivity disabled, a PWA can still provide functionality that doesn't depend on an external server.

The important distinction is:

Offline does not mean “everything works without hardware or permissions.”

The application may still require:

Previously cached application resources
Location permission
Device location capability
Orientation sensors
Browser support

The goal is to remove the unnecessary dependency on the internet, not to magically bypass device requirements.

Testing on Real Devices

One of the biggest lessons from this project was that browser-based sensor applications should be tested on actual phones.

A feature can appear perfect in desktop development tools but behave differently on a physical device.

I recommend testing:

With Wi-Fi enabled
With mobile data disabled
In airplane mode
Indoors
Outdoors
After rotating the device
On multiple browsers where possible

This catches problems that aren't obvious during normal development.

What I Learned

Building this feature taught me that an offline-first web application isn't simply about adding a service worker.

It requires thinking about the entire dependency chain.

For every feature, ask:

«Does this actually need the internet?»

If the answer is no, move the computation to the client whenever practical.

For a Qibla compass, this means location + mathematical calculation + device sensors can do most of the work locally.

The SabrTime Implementation

I built this approach into SabrTime, an Islamic PWA that includes prayer tools, Qibla, Islamic resources, and other everyday worship utilities.

You can explore the project here:

SabrTime: https://sabrtime.in/

I also documented the Qibla approach in more detail in this article:

Airplane Mode Qibla Compass: https://sabrtime.in/blog/airplane-mode-qibla-compass.html

If you're interested in the broader problem of maintaining useful Islamic tools while travelling, I also wrote about "missed prayers and Qaza" (https://sabrtime.in/blog/missed-prayers-qaza-guide.html) and practical guidance around making up missed Salah.

Final Thoughts

The web doesn't always need to depend on the cloud.

For many utility applications, calculations can happen directly on the user's device. This can improve:

Offline reliability
Privacy
Performance
Resilience
User experience

The Qibla compass was a good example of this principle.

Instead of asking a server:

«“Where is the Qibla from this location?”»

the phone can calculate the answer itself.

That small architectural decision makes the feature much more useful when the user is travelling — precisely when a Qibla compass may be needed most.

I'm continuing to experiment with offline-first and privacy-focused web development while building SabrTime, and I'll be sharing more of the technical lessons from the project.

What Google Search Console Is Teaching Me as a Solo Developer

Yunus Khan — Sat, 01 Aug 2026 07:29:13 +0000

When I launched SabrTime, I expected Google to discover my pages quickly.

That didn't happen.
Today, only 13 pages of my website are indexed,people are already discovering my content through Search.
Instead of chasing shortcuts, I've started trusting the data.

My Search Console Snapshot
Over the last few months, I've seen:
✅ 13 pages indexed
📈 Search impressions growing month after month
🔍 Hundreds of search queries triggering my pages
🌍 Visitors finding content from different countries
📱 Most traffic coming from mobile devices

That was enough to convince me that SEO is a long-term investment.

Lesson 1: Impressions Matter Before Clicks
One thing I misunderstood was impressions.
At first, I only cared about clicks.
Now I pay close attention to impressions because they tell me Google is beginning to understand my website—even if users aren't clicking yet.
Every impression is a sign that my content is entering the search ecosystem.

Lesson 2: Unexpected Keywords Are Opportunities
Some of my pages started appearing for search queries I never intentionally targeted.
That helped me discover new content ideas and improve existing pages around topics users were already searching for.
Instead of guessing what people want, I now let Search Console guide my content strategy.

Lesson 3: Technical SEO Matters
While reviewing Search Console, I found several technical issues that needed attention:
Improving internal links
Fixing indexing problems
Updating meta titles and descriptions
Making pages easier for Google to crawl
None of these changes created overnight success, but together they improved the health of my website.

Lesson 4: Publishing Consistently Beats Publishing Perfectly
Rather than waiting for the "perfect" article, I focused on publishing useful content consistently.
Every quality page becomes another opportunity for Google to understand what your website is about.

What I'm Working Toward
My next goals are simple:
Increase indexed pages beyond 13
Continue improving Core Web Vitals
Earn relevant backlinks naturally
Publish content people genuinely find useful
SEO isn't about gaming the algorithm.
It's about building something worth discovering.

Final Thoughts
I'm still at the beginning of my SEO journey, but Google Search Console has completely changed how I think about building websites.
The data has helped me stop guessing and start making better decisions.
If you're also building a website, what has Google Search Console taught you?

About My Project
I'm applying these lessons while building SabrTime, a privacy-focused Islamic web app with prayer times, Qibla direction, duas, an ibadah tracker, tasbeeh, and other daily Islamic tools.

🌐 https://sabrtime.in⁠�

Hello Dev Community! I'm Yunus Khan

Yunus Khan — Sat, 18 Jul 2026 08:13:34 +0000

👋 Assalamu Alaikum and hello everyone! 👋

My name is Yunus Khan, an independent developer from India who enjoys building products that solve real problems and make technology more meaningful.

My current passion project is SabrTime—a free Islamic web app designed to help Muslims stay connected with their faith through modern technology.

🌐 Try SabrTime: https://sabrtime.in

🌙 What is SabrTime?

SabrTime is more than just a prayer app. It's an all-in-one spiritual companion featuring:

🕌 Accurate Prayer Times
🧭 Qibla Compass
📿 Digital Tasbeeh Counter
🤲 Mood-Based Duas
📖 Prayer & Dua Library
📅 Islamic Calendar
📈 Ibadah & Streak Tracker
🧠 Islamic Quiz
🌍 Multi-language support

I'm constantly adding new features and improving the experience based on community feedback.

The project is also open source, and I'd love to hear your suggestions or contributions.

⭐ GitHub: https://github.com/Kyunus175/sabrtime

💻 What I'll Share Here

On Dev.to, I'll write about:

My web development journey
Building and scaling SabrTime
JavaScript, HTML, CSS, Firebase, and PWAs
SEO and performance optimization
Lessons learned while developing as a solo developer
Open-source experiments and side projects

I'm excited to learn from this amazing community, share my experiences, and connect with developers from around the world.

Thank you for reading my first post! If you have any feedback about SabrTime or ideas for future features, I'd love to hear them in the comments.

🌐 Website: https://sabrtime.in
⭐ GitHub: https://github.com/Kyunus175/sabrtime

webdev #javascript #pwa #opensource #indiedev #devjourney