Platform under construction

Browser APIs & BOM

Advanced

Geolocation & Notifications

Geolocation and Notifications are permission-based APIs. They can be useful, but they must be requested with restraint.

if ("geolocation" in navigator) {
  // Ask only after a clear user action.
}

const permission = await Notification.requestPermission();

Browser APIs & BOM

Permission prompts should be earned, not thrown at page load.

Geolocation can request the user position. Notifications can ask permission to show system-level notifications.

Both APIs are sensitive. Asking too early or without context damages trust and can reduce permission acceptance.

Always provide a clear reason, a user action and a fallback when permission is denied or the API is unavailable.

geolocation

Requests location with user permission.

Notification

Requests notification permission and displays notifications.

Permission prompt

Browser-controlled user decision.

Fallback

A non-permission path when users decline.

Examples

Browser APIs should be used with capability checks, permissions and fallbacks.

Explain before requesting permission

button.addEventListener("click", () => {
  helpText.textContent = "We use location only to show nearby results.";
  navigator.geolocation.getCurrentPosition(onSuccess, onError);
});

Prompting immediately on page load

navigator.geolocation.getCurrentPosition(onSuccess);
Notification.requestPermission();

Code patterns

Reusable examples for quick reference.

These examples focus on practical browser APIs: URL state, storage, cookies, clipboard, permissions, observers and offline-capable platform tools.

Check geolocation support

Do not assume it exists.

if ("geolocation" in navigator) {
  enableLocationButton();
}

Request after click

Do not ask on page load.

button.addEventListener("click", () => {
  navigator.geolocation.getCurrentPosition(handlePosition, handleError);
});

Notification permission

Ask only when notifications make sense.

const result = await Notification.requestPermission();
if (result === "granted") showNotification();

Fallback path

Let users continue without permission.

if (permission !== "granted") {
  showInPageReminder();
}

Rules that matter

Treat the browser as a platform.

Browser APIs are powerful because they touch privacy, navigation, storage, permissions and performance. Use them deliberately.

Ask after intent

Permission prompts should follow a clear user action.

Explain the benefit

Users should know why the API is needed.

Handle denial

Denied permission is a normal path.

Provide fallback

The feature should degrade gracefully.

Avoid repeated prompts

Respect the user decision.

Minimize sensitive data

Request only what the feature truly needs.

Production thinking

A strong browser API layer makes features feel integrated with the platform instead of bolted onto the page.

Why does this matter?

Permission APIs are trust contracts with users.

Accessibility

Permission-dependent features should still have readable fallback controls and messages.

Production note

Production permission flows need analytics, fallbacks and careful wording.

SEO note

Permission prompts on page load can harm user experience and should not block content.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Write the message you would show before asking permission.
Add a fallback message for denied permission.
Explain why this lab does not trigger a real prompt.

Practice assignment

Do this before moving to the next topic.

Feature-detect geolocation.
Feature-detect notifications.
Design a permission request flow.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Geolocation & Notifications.