Skip to content

linoak/light

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

. ├── index.html // 您的 SOS 燈號程式碼 (已修改) ├── manifest.json // PWA 定義檔 ├── service-worker.js // 離線快取邏輯 └── images/ ├── icon-192.png // App 圖示 (192x192) └── icon-512.png // App 圖示 (512x512)

這是一個非常實用且有意義的功能!想要讓 PWA 操作手電筒發出求救訊號,我們需要結合前面討論的裝置存取技術與程式邏輯。

這個功能的實作關鍵在於:

  1. 取得手電筒控制權: 透過 MediaDevices API 存取相機的 torch(手電筒)功能。
  2. 實作摩斯電碼 (SOS) 邏輯: 透過 JavaScript 控制手電筒的開啟和關閉時間,以發出摩斯電碼的 SOS 訊號(短、短、短、長、長、長、短、短、短)。

🚨 實作手電筒 SOS 的步驟與挑戰

步驟 1: 請求相機/手電筒權限

這是存取手電筒的第一步。由於手電筒被視為相機(閃光燈)的一部分,您需要請求視訊軌道的權限:

  • API: navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
  • 注意: 瀏覽器會彈出提示,要求使用者允許存取相機。

步驟 2: 啟用手電筒模式

在取得視訊軌道 (Video Track) 後,使用 applyConstraints 方法來開啟手電筒:

  • API: track.applyConstraints({ advanced: [{ torch: true }] })
  • 挑戰: 雖然這是標準的方法,但並非所有瀏覽器都支持這個 torch 參數。如前所述,它主要在 Android Chrome 上有較好的支援,但在 iOS/Safari 上的 PWA 幾乎無法實現。

步驟 3: 實作 SOS 摩斯電碼邏輯

SOS 的摩斯電碼是:··· --- ···

  • 短點 (Dot, ·): 短暫開啟/關閉手電筒。
  • 長劃 (Dash, -): 較長時間開啟/關閉手電筒。

您需要使用 **JavaScript 的計時器(setTimeoutsetInterval)**來控制手電筒開關的時序,例如:

訊號 閃爍狀態 持續時間(範例)
· (短) 開啟 1 單位時間 (e.g., 200ms)
休息 關閉 1 單位時間 (200ms)
- (長) 開啟 3 單位時間 (600ms)
休息 關閉 1 單位時間 (200ms)
字母間隔 關閉 3 單位時間 (600ms)
單詞間隔 關閉 7 單位時間 (1400ms)

🛠️ 給您的開發建議

  1. 使用 torch 參數進行測試: 您應該先在目標 Android 手機上測試一個簡單的 PWA,確認該瀏覽器是否支援 track.applyConstraints({ advanced: [{ torch: true }] })
  2. 考慮 iOS 備用方案: 由於 iOS PWA 可能無法控制手電筒,您應該提供一個備用方案,例如:
    • 閃爍螢幕: 讓整個手機螢幕以白色和黑色閃爍,模擬 SOS 訊號,雖然效果不如手電筒強烈,但至少是跨平台可用的。
    • 引導至原生 App: 提示使用者在 iOS 上使用原生的手電筒 App。
  3. 確保能源效率: 由於 SOS 訊號需要持續一段時間,請確保您的程式碼在不閃爍時能完全釋放攝影機資源,避免耗盡電量。

如果您想更深入地了解實作 SOS 摩斯電碼的 JavaScript 程式碼結構,我很樂意為您提供一個程式碼範例。

裝置功能,對應的 Web API/技術,主要用途 網路連線/推播,"Service Worker, Push API",允許應用程式離線運作、快取資源,並接收推播通知(即使應用程式已關閉)。 地理位置,Geolocation API,取得裝置的 GPS/Wi-Fi 定位資訊。 相機/麥克風,MediaDevices API (getUserMedia),進行視訊通話、拍照或錄音。 震動,Vibrate API,提供觸覺回饋。 內容分享,Web Share API,讓 PWA 能像原生 App 一樣,將文字、連結、檔案分享到其他應用程式。 螢幕喚醒鎖,Screen Wake Lock API,防止裝置螢幕在應用程式運行時變暗或鎖定(例如閱讀器、導航 App)。 感應器,Generic Sensor API,存取加速度計 (Accelerometer)、陀螺儀 (Gyroscope) 等資訊,用於動作偵測。 生物識別,WebAuthn (Web Authentication API),支援指紋、臉部辨識等,用於安全登入和驗證。

III. PWA 仍然受限的功能 (Red APIs) 這些功能通常涉及底層作業系統的深度整合或安全顧慮,PWA 仍難以或無法存取:

完全的後台服務: 雖然 Service Worker 允許短時間的後台任務,但 PWA 無法運行持續且不受限制的後台服務。

系統設定/日誌存取: 無法更改系統設定、讀取系統日誌或存取受保護的系統資料。

完整的電話功能: 無法直接控制電話呼叫或 SMS 簡訊的發送,只能透過 tel: 或 sms: 連結來啟動系統 App。

地理圍欄 (Geofencing): 雖然可以使用 Geolocation API,但無法像原生 App 那樣高效且持續地設定和監控地理圍欄。

結論:

PWA 正在透過不斷發展的 Web API 快速縮小與原生 App 之間的差距。對於大多數面向用戶的 App(例如電子商務、內容平台、簡單工具),PWA 已經提供了足夠的功能來提供優質的「App-like」體驗。

您目前是否有打算開發一個 PWA 應用程式,或對其中某一項進階功能的實作細節特別感興趣呢?

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published