Wrap geolocation in a promise and handle every error code
Swap a fake for navigator.geolocation on your own HTTPS page and the same code asks the browser for real.
Powerful browser features such as the clipboard, the user's location and system notifications are guarded by permissions: they need a secure (HTTPS) page, often a user action, and the user's consent, so good code detects support, asks at the right moment and has a fallback when the answer is no.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write supports() that returns an object saying whether clipboard, geolocation, notifications and share are available, then log it.
Write copyText(text) that resolves to "copied" or "manual" (when the Clipboard API is missing or rejects), never throwing.
Explain it without notes
What layers of protection do browsers put around powerful APIs?
How do you use the Geolocation API with async/await, and what are its error codes?
What is the right way to ask for notification permission?
What can and can't the Permissions API do?
Preview
Console
Nothing logged yet.Expected console output
You are near 18.52, 73.86 (within 30 m)
You blocked location. Type your city instead.
Finding your position took too long. Try again.