地理定位与本地化
利用边缘能力，根据用户位置提供本地化内容和服务
地理定位与本地化 是 CoddyKit 上的免费 Edge Computing with Cloudflare Workers & Deno 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Edge Computing with Cloudflare Workers & Deno 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Edge Computing with Cloudflare Workers & Deno 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Edge Geolocation & Localization
Ever wonder how websites seem to know your location or prefer your local language? That's often thanks to geolocation and localization, especially when powered by the edge!
Geolocation is finding a user's physical location. Localization is adapting content (like language, currency, or date formats) based on that location.
The edge is perfect for this! By processing requests closer to the user, we can quickly determine location and deliver tailored experiences with minimal delay.
How Edge Knows Your Location
When you connect to a website, your device sends an IP address. Edge networks like Cloudflare use this IP to perform a quick lookup, determining your approximate geographic location.
This information is then made available to your code running on the edge. It's fast, automatic, and doesn't rely on browser-based GPS, which often requires user permission.
Access Geolocation Data
Cloudflare Workers provide geolocation data through the request.cf object. This object is automatically populated for every incoming request hitting the edge.
It contains useful properties like country code, city, region, and even timezone, making it incredibly easy to build location-aware applications without extra APIs.
Demo: Simple Country Detection
Let's write a simple Cloudflare Worker that detects the user's country and responds with a greeting. This uses the request.cf.country property.
Try running this example to see your country code!
export default {
async fetch(request) {
const country = request.cf.country; // e.g., "US", "DE", "JP"
return new Response(`Hello from ${country || 'an unknown location'}!`);
}
};Detailed Location Info
The request.cf object offers more than just the country code. You can access more granular details for deeper localization:
cf.city: User's city (e.g., "San Francisco")cf.region: User's region/state (e.g., "CA")cf.timezone: User's timezone (e.g., "America/Los_Angeles")cf.latitude,cf.longitude: Approximate coordinates
Use these to create highly personalized experiences.
Demo: Personalized Greeting
Let's enhance our Worker to provide a more personalized greeting using city and country information from the request.cf object.
This demonstrates how easily you can use multiple geolocation data points.
export default {
async fetch(request) {
const { city, country } = request.cf;
if (city && country) {
return new Response(`Welcome, traveler from ${city}, ${country}!`);
} else if (country) {
return new Response(`Welcome, traveler from ${country}!`);
} else {
return new Response('Welcome, traveler!');
}
}
};Localization: Language & Content
Beyond simple greetings, you can use geolocation data to serve different versions of your content. This is key for true localization.
- Language: Determine the user's preferred language (e.g., from
Accept-Languageheader orcf.country) and serve translated text. - Currency: Display prices in the local currency based on the user's country.
- Content Variants: Show different promotions or product availability based on regional restrictions.
Demo: Dynamic Language
Here's an example of how a Worker can provide a dynamic welcome message based on the user's country. For simplicity, we'll map a few countries to specific languages.
In a real application, you'd integrate with a more robust i18n (internationalization) library.
export default {
async fetch(request) {
const country = request.cf.country;
let message;
switch (country) {
case 'US':
message = 'Hello!';
break;
case 'FR':
message = 'Bonjour!';
break;
case 'DE':
message = 'Guten Tag!';
break;
default:
message = 'Welcome!';
}
return new Response(message);
}
};Best Practices for Localization
To make your edge localization robust and user-friendly, consider these tips:
- Fallback Content: Always have a default language or content version for unknown locations.
- User Overrides: Allow users to manually select their preferred language/location, overriding the auto-detected setting.
- Caching: Cache localized content variants effectively to maximize performance benefits.
- Privacy: Be mindful of privacy regulations (like GDPR) when using location data.
Quick Check: Edge Localization
Edge computing significantly enhances geolocation and localization. Which of the following statements accurately describe benefits or methods of using edge capabilities for localization?
Recap & Next Steps
In this lesson, we explored how geolocation and localization are powerful capabilities at the edge.
- You learned how edge networks provide location data automatically.
- We saw how to access this data in Cloudflare Workers using the
request.cfobject. - You built Workers that deliver personalized and localized content based on user location.
Leveraging the edge for these features greatly improves user experience and application performance. Keep experimenting with these concepts to build truly global applications!
常见问题解答
「地理定位与本地化」课时是免费的吗？
是的 — 「地理定位与本地化」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Edge Computing with Cloudflare Workers & Deno 课程的其余内容，请升级到 CoddyKit PRO。 Edge Computing with Cloudflare Workers & Deno 课程共包含 4 节课。
「地理定位与本地化」这节课中我会学到什么？
利用边缘能力，根据用户位置提供本地化内容和服务 你通过在浏览器中直接运行的动手代码来练习 Edge Computing with Cloudflare Workers & Deno，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Edge Computing with Cloudflare Workers & Deno 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Edge Computing with Cloudflare Workers & Deno 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「地理定位与本地化」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Edge Computing with Cloudflare Workers & Deno 课中编写并运行代码吗？
能。每节 Edge Computing with Cloudflare Workers & Deno 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。