[JS]Notification / setTimeout 範例 健康提醒器

setTimeout(notify, 3600000); //  第一個參數放方法，第二個參數放 毫秒 

import React from "react";
import "./styles.css";

const getTime = () => {
  const now = new Date();
  let dayLight;
  now.getHours() > 12 ? (dayLight = "下午") : (dayLight = "上午");
  return (
    " " +
    dayLight +
    " " +
    (now.getHours() > 12 ? now.getHours() % 12 : now.getHours()) +
    "時 " +
    now.getMinutes() +
    "分"
  );
};

const notify = (firstTime = false) => {
  if (window.Notification && Notification.permission !== "denied") {
    Notification.requestPermission(function (status) {
      var n = new Notification("健康提醒", {
        body: //第一次提醒的時候才是使用 ，開始提醒。
          (firstTime ? "開始提醒" : "起來動一動囉!") +
          `\n現在時刻:${getTime()}`,
        icon: require("./walk.jpg") 
      });
    });
  }
  if (!window.stop) setTimeout(notify, 3600000); //一小時停醒一次
};

export default function App() {
  const { useEffect } = React;

  useEffect(() => {
    notify(true);
  }, []);

  return (
    <div className="App">
      <div>
        <h1>健康提醒器</h1>
      </div>
      <div>
        <h2>每個小時提醒起來動一動， 請按允許通知</h2>
      </div>
    </div>
  );
}