Show HN：悬浮于其他窗口之上的浏览器计时器
1 分•作者: jmbuilds•3 个月前
我最近在 Time Keep (https://www.timekeep.cc) 上做了一个令我兴奋的功能：任何计时器、闹钟、倒计时、秒表或睡眠计划都可以弹出到一个独立的小窗口中，在 Chrome/Edge 浏览器上，它可以置顶于桌面上的其他窗口。
在 Chrome 和 Edge 上，它使用了文档画中画 API，这样窗口就可以置顶于其他所有窗口之上，方便您工作。从任何一个窗口暂停，状态都会保持同步（事实证明 BroadcastChannel 非常适合这项功能）。Firefox 和 Safari 则使用普通的弹出窗口，因为它们都没有实现文档画中画功能。在移动设备上，它会在当前标签页全屏打开，因为手机通常不支持多窗口在网页上显示。
它还会请求一个唤醒锁，这样在计时器倒计时时，您的屏幕就不会休眠。这在手机上尤为重要，否则屏幕会变暗并锁定。
促使我实现这个功能的用例是：我正在工作，但有一个即将到来的特定时间需要做某事，我希望有一个倒计时醒目地显示在眼前，但它却在我的手机上或者被其他窗口挡住了。现在，它就可以放在我想要的角落里。
（自从上次发帖以来，还增加了很多调整/新工具：一个日程规划器、重叠区域、一个“某个地方现在是五点”的页面……对于记得一个月前发布的 v1 HN Show 帖子的人来说。）
查看原文
Quick thing I made recently on Time Keep (<a href="https://www.timekeep.cc" rel="nofollow">https://www.timekeep.cc</a>) that I'm excited to use: any timer, alarm, countdown, stopwatch, or sleep schedule can be popped out into its own little window and on Chrome/Edge it can be locked over others on your desktop.<p>On Chrome and Edge it uses the Document Picture-in-Picture API so the window stays on top of everything else while you work. Pause from either window and the state stays in sync (BroadcastChannel turned out to be a good fit for this). Firefox and Safari just use a normal pop-up since neither has shipped Document PiP. On mobile it opens fullscreen in the current tab because phones don't really expose multi-window to the web.<p>It also requests a wake lock so your screen doesn't fall asleep while a timer's counting down. That matters on a phone where the display would otherwise dim and lock.<p>The use case that drove me to do this: I'm working, have to do something at X time coming up, and I want a countdown in my face, but it's off on my phone or behind other windows. Now it just sits in the corner where I want it.<p>(There's also been a bunch of tweaks / new tools added since the last time I posted: a day planner, overlap zones, an "it's 5 o'clock somewhere" page ... for anyone who remembers the v1 HN Show post a month or so ago.)