Skip to content

Instantly share code, notes, and snippets.

@GenbuHase
Last active July 19, 2017 09:36
Show Gist options
  • Save GenbuHase/9c169ae1ac43d6513e8f02ae29d2a8c4 to your computer and use it in GitHub Desktop.
Save GenbuHase/9c169ae1ac43d6513e8f02ae29d2a8c4 to your computer and use it in GitHub Desktop.
Notifications Test
const AppNotification = (function () {
function AppNotification () {
Notification.requestPermission(function (state) {
switch (state) {
case "default":
break;
case "granted":
console.info("通知の許可が確認されました");
break;
case "denied":
console.warn("通知の許可が確認されません");
break;
}
});
}; AppNotification.prototype = Object.create(null, {
constructor: { value: AppNotification },
show: {
value () {
}
}
});
return AppNotification;
})();
* {
Box-Sizing: Border-Box;
}
#N_Form {
Display: Flex;
Flex-Direction: Column;
Padding: 1pc;
}
#N_Form > #N_Detail {
Min-Width: 100%;
Max-Width: 100%;
Height: 25%;
}
<!DocType HTML>
<HTML>
<Head>
<Meta Charset = "UTF-8" />
<Title>Notifications Test</Title>
<Script Src = "AppNotification.js"></Script>
<Link Rel = "StyleSheet" Href = "index.css" />
<--
━━━━━ ToDo ━━━━━
・画像欄追加
・サウンド変更追加
--!>
<Script>
Notification.requestPermission(function (state) {
switch (state) {
case "default":
break;
case "granted":
console.info("通知の許可が確認されました");
break;
case "denied":
console.warn("通知の許可が確認されません");
break;
}
});
document.addEventListener("DOMContentLoaded", function () {
document.querySelector("Button#N_Apply").addEventListener("click", function (event) {
let title = document.querySelector("Input#N_Title").value,
detail = document.querySelector("Textarea#N_Detail").value
new Notification(title, {
body: detail
});
});
});
</Script>
</Head>
<Body>
<Div ID = "N_Form">
<Input ID = "N_Title" Type = "Textbox" Value = "" Placeholder = "通知名" />
<Textarea ID = "N_Detail" Placeholder = "通知コンテンツ"></Textarea>
<Button ID = "N_Apply">通知</Button>
</Div>
</Body>
</HTML>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment