如何使用Netlify Edge功能

Netlify Edge功能是Netlify提供的一個非常有趣的功能,Netlify是一個流行的托管平台。 這個功能非常有趣,因為雖然Netlify以靜態托管聞名,但Edge功能允許您進行一些不太靜態的操作。 讓我們可以做到以下這些事情: 地理定位 本地化 A/B測試 重定向 …等等 它們與Netlify Serverless功能類似,只不過它們運行在Netlify邊緣(Edge)上,這意味著它們更接近用戶並在多個CDN位置運行,計算方式也不同(每月3百萬次呼叫,而不是每個站點每月12.5萬呼叫)。 要啟用Edge功能,請在您的網站存儲庫中創建一個netlify.toml文件(如果您尚未擁有),並添加以下內容: [[edge_functions]] function = "hello" path = "/hello" 其中function是netlify/edge-functions/下的文件名,不包括.js擴展名。 path是此功能將可用於的URL路徑。 然後,您可以在文件netlify/edge-functions/hello.js中編寫一個功能: export default () => new Response("Hello world"); Response是可用於將回應發送回客戶端的對象。 一旦您部署了存儲庫,就可以使用以下URL訪問其結果: https://<您的網站域名>/hello 試試看吧! 在部署期間,您將在日誌中看到以下信息: 一旦部署完成,您將看到動態生成的帶有內容Hello, World!的頁面。 但是我建議您預先使用Netlify CLI的netlify dev在本地測試它們。請確保使用npm i -g netlify-cli將其更新到最新版本,否則它可能沒有啟用此功能。 您可以設置回應標頭,例如內容類型,通過將第二個參數傳遞給new Response(): export default () => new Response('Hello world', { headers: { 'content-type': 'text/html' }, }); Edge功能接收兩個參數:request和context: export default (request, context) => { //... }; 這兩個對象提供了一些有用的功能。 request允許您訪問所有request數據,它與使用Fetch API時獲得的請求對象相同。...

如何使用地理定位 API

使用地理定位 API 我們可以向瀏覽器請求使用者的位置座標。 瀏覽器提供了一個 navigator.geolocation 對象,通過這個對象我們可以執行所有的地理定位操作。 由於安全性考慮,地理定位 API 只在使用 HTTPS 服務的頁面上可用,並且在所有現代瀏覽器上都可用。 navigator.geolocation 由於 window 是全局對象,我們可以直接訪問 navigator 而無需指定 window.navigator。 瀏覽器提供的 window.navigator 屬性指向一個名為 Navigator 對象 的容器對象,它使我們能夠使用許多 Web 平台 API。 geolocation 對象提供了以下方法: getCurrentPosition() watchPosition() clearWatch() 第一個方法用於獲取當前的位置座標。當我們第一次調用此方法時,瀏覽器會自動要求用戶允許我們訪問此信息。以下是在 Chrome、Firefox 和 Safari 上展示此界面的示例: 此操作只需在每個來源上執行一次。您可以更改您的決定,並撤消權限決策。以下示例演示如何在 Chrome 上進行更改: 一旦授予此權限,我們就可以繼續操作。 獲取使用者的位置 讓我們從以下示例代碼開始: navigator.geolocation.getCurrentPosition(() => {}) 應該會彈出權限窗格,請允許權限。 請注意,我傳遞了一個空的箭頭函數(arrow function),因為該函數需要一個回調函數。 此函數接收一個包含實際位置信息的 Position 對象: navigator.geolocation.getCurrentPosition(position => { console.log(position) }) 此對象具有2個屬性: coords,一個 Coordinates 對象 timestamp,獲取位置時的 UNIX 時間戳 Coordinates 對象具有幾個定義位置的屬性: accuracy,位置測量值的精確度,以米為單位。 altitude,測量的高度值。 altitudeAccuracy,高度測量精確度,以米為單位。 heading,設備行進的方向。以度為單位表示(0 = 北,90 = 東,180 = 南,270 = 西)。 latitude,測量的緯度值。 longitude,測量的經度值。 speed,設備行進的速度,以米/秒為單位。 根據不同的實現和設備,其中一些屬性可能為 null。例如,在我的 MacBook Air 上運行的 Chrome 上,我只獲得了 accuracy、latitude 和 longitude 的值。...