From 933dc7719230fa2d4d5f2aa3836e693e85558c25 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 2 Sep 2024 23:30:29 +0900 Subject: [PATCH] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=20(#23304)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2024/07/26 時点の英語版に基づき更新 * Update index.md * Update screen_shot_2019-12-11_at_9.59.14_am.png --- files/ja/web/api/notifications_api/index.md | 40 ++-- .../screen_shot_2019-12-11_at_9.59.14_am.png | Bin 0 -> 9000 bytes .../using_the_notifications_api/index.md | 183 +++++++----------- 3 files changed, 95 insertions(+), 128 deletions(-) create mode 100644 files/ja/web/api/notifications_api/screen_shot_2019-12-11_at_9.59.14_am.png diff --git a/files/ja/web/api/notifications_api/index.md b/files/ja/web/api/notifications_api/index.md index adcf4a871fdcb6..3b8cd40713ca8c 100644 --- a/files/ja/web/api/notifications_api/index.md +++ b/files/ja/web/api/notifications_api/index.md @@ -1,54 +1,56 @@ --- title: 通知 API slug: Web/API/Notifications_API +l10n: + sourceCommit: aa8fa82a902746b0bd97839180fc2b5397088140 --- -{{DefaultAPISidebar("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}} +{{DefaultAPISidebar("Web Notifications")}}{{securecontext_header}} {{AvailableInWorkers}} 通知 API を使えば、ウェブページがエンドユーザーに表示するシステム通知を制御できるようになります。これらのシステムは、最上位の閲覧コンテキストのビューポートの外にあるため、ユーザーがタブを切り替えたり、別のアプリに移動していても表示されます。また、この API は既存の通知システムと互換性を持つように設計されているので、異なるプラットフォームでも動作します。 ## 概要と使い方 -対応済みのプラットフォームでは、システム通知を表示するには、一般的に 2 つのことが必要です。まず、ユーザーが現在のオリジンに対してシステム通知を表示する許可を与える必要があります。これは一般的にアプリやサイトが初期化されたとき、 {{domxref("Notification.requestPermission()")}} を使用して行われます。これは、例えばボタンをクリックするなど、ユーザーの操作に反応して行う必要があります。 +対応済みのプラットフォームでは、システム通知を表示するには、一般的に 2 つのことが必要です。まず、ユーザーが現在のオリジンに対してシステム通知を表示する許可を与える必要があります。これは一般的にアプリやサイトが初期化されたとき、 {{domxref("Notification.requestPermission_static", "Notification.requestPermission()")}} メソッドを使用して行われます。 +このメソッドは、例えばユーザーのジェスチャーを処理する場合、マウスクリックを処理する場合などでのみ呼び出すべきです。 ```js -btn.addEventListener("click", function () { +btn.addEventListener("click", () => { let promise = Notification.requestPermission(); // wait for permission }); ``` -これはベストプラクティスで、ユーザーが同意していない通知でユーザーに迷惑をかけるべきではありません。しかし、今後ブラウザーはユーザーの操作から起動されていない通知を明示的に拒否するようになるでしょう。例えば、 Firefox はバージョン 72 からすでにこれを行っています。 - これは以下のようにリクエストダイアログを起動します。 -![](screen_shot_2019-12-11_at_9.59.14_am.png) +![オリジンからの通知を許可するかどうかをユーザーに要求するダイアログボックス。通知を許可しない、または許可するオプションがあります。](screen_shot_2019-12-11_at_9.59.14_am.png) ここでは、ユーザーはこのオリジンからの通知を許可するかどうかを選択できます。一度決定がなされると、現在のセッションの間はその設定が保存されます。 -> [!NOTE] -> Firefox 44 からは、通知と[プッシュ通知](/ja/docs/Web/API/Push_API)の許可が統合されました。通知に許可が与えられれば、プッシュ通知も同時に有効になります。 - -つぎに、新しい通知は {{domxref("Notification.Notification","Notification()")}} コンストラクターを使って作られます。このコンストラクターには、必須の title 引数と、オプションを指定する引数として options オブジェクトを与えることができます。オプションには、テキストの方向、本文テキスト、表示アイコン、通知サウンドなどが指定可能です。 +次に、新しい通知は {{domxref("Notification.Notification","Notification()")}} コンストラクターを使って作られます。このコンストラクターには、必須の title 引数と、オプションを指定する引数として options オブジェクトを与えることができます。オプションには、テキストの方向、本文テキスト、表示アイコン、通知サウンドなどが指定可能です。 さらに、通知 API の仕様には、いくつかの[サービスワーカー API](/ja/docs/Web/API/Service_Worker_API) が定義されており、サービスワーカーが通知を発行できるようになっています。 > [!NOTE] > 自分のアプリでの通知の詳しい使い方については、[通知 API の使用](/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API)を参照してください。 -## 通知インターフェイス +## インターフェイス - {{domxref("Notification")}} - : 通知オブジェクトを定義します。 - -### サービスワーカーの追加要素 - -- {{domxref("ServiceWorkerRegistration")}} - - : {{domxref("ServiceWorkerRegistration.showNotification()")}} および {{domxref("ServiceWorkerRegistration.getNotifications()")}} メソッドが含まれており、通知の表示の制御に使用できます。 -- {{domxref("ServiceWorkerGlobalScope")}} - - : {{domxref("ServiceWorkerGlobalScope.notificationclick_event", "onnotificationclick")}} ハンドラーが含まれており、通知がクリックされた時にカスタム関数を実行させることができるようになります。 - {{domxref("NotificationEvent")}} - - : {{domxref("ExtendableEvent")}} を基本とした、特定の型ののイベントオブジェクトです。すでに実行された通知を表現します。 + - : {{domxref("ServiceWorker")}} の {{domxref("ServiceWorkerGlobalScope")}} に配信された通知イベントを表します。 + +### 他インターフェイスへの拡張 + +- {{domxref("ServiceWorkerGlobalScope/notificationclick_event", "notificationclick")}} イベント + - : 表示された通知をユーザーがクリックすると発生します。 +- {{domxref("ServiceWorkerGlobalScope/notificationclose_event", "notificationclose")}} イベント + - : 表示された通知をユーザーが閉じたときに発生します。 +- {{domxref("ServiceWorkerRegistration.getNotifications()")}} + - : 現在のオリジンから現在のサービスワーカー登録を経由して作成された順番で、通知の一覧を返します。 +- {{domxref("ServiceWorkerRegistration.showNotification()")}} + - : リクエストされたタイトルで通知を表示します。 ## 仕様書 diff --git a/files/ja/web/api/notifications_api/screen_shot_2019-12-11_at_9.59.14_am.png b/files/ja/web/api/notifications_api/screen_shot_2019-12-11_at_9.59.14_am.png new file mode 100644 index 0000000000000000000000000000000000000000..17251c2ec673122b8afacef7c37a3b448fd91cae GIT binary patch literal 9000 zcmb7qcQjnx*Z+_pB+_&S2|*G>^wCCd(M63GMs!gVov4X6h#Dojh(22M&eePGj1r6) zjNaz;Jm0l`>-WCv{pVfl-g9?bpMB2WckQ#+Iww?JRi2cDmIMR>kt!<4Xo5iazzw~0 z=hn^0$pde{`P{aYRFMRM5K(t8O$lyzJQq!QDNxBEcUX4w>LL|#^U4Y1qFV?Of@$KfhoypvDo9i zrqGof{pvpryXb?g5zw%EfR6_Xs+&n~!w#NZFLxJzX}c;6F2Jqi8t9uu zhelwrSdi(SvXc7RNCTBgR^9maDhAu#-G}+xc*|@V56}1P^sM#j+V6M2r>D=}9tzKF z*#IBU)XZ{pW3OcG!i<_mTk9R}8teUrB|f_)D6q-5@t`wQN*{3$9PsN)%?=)jY2yM{ z7;N^467rD7{I|VuZRof66dzKX=4Ua7%ggKX!7Tv+P3G_>gM^*obTiy|0uvF4m_r(< z&wnfp$6VnqFvt2?OT)!M&CQ*stJqRR8M4?urgD;BJ1Bbi3U@sLDmzV#tRQzPTP;VD z@_VmWe~C5_ZYxP?$Xs!?T-h8$A70|r!X15ii+RTQn)1Q+M5Z^Us)e|67Uz zjFFxDlSxXY89%tJ^5lco8y7LTq2aa#tJ&rK@iyxHi{~P$jLS zy|N#^6kt=_USHvYt*VoY$$$QR^M_vdtzWNi*;C27iQq;5+z!?GoH28;y|s}DTkUIZ z9PLH(WFM9{O@Mq+`!y~i&F9T)-FTk$8ue$Xqb-N19rJg=$eDeb=s*e(h!LSEBdO&+ zi%Kz3CNp3F)cBu? z^9m>|{+@*zkye_J#r?w|5YMf7`qAL9AAb*D_) z6Iw7`wa?wo9UJ6ROFZyby%*LaK^vzvXyWPo%O2u7aQ&IGc7Hu7oOG^Q$YUfxrl-OO z&dHHJ($}t3$Ml0V&)iuR9#|YkP$5*E&N(+is^dFXbT#XPS|RkC_|?>^-)P4+bUSX~ z03*PV2W`O+E_p846CInTDYbc8&W4>msETRY(akp0^(ql4DQx%03Bm!S3=L%UB8|Wi zJfAeAPqJ3SoUbPjg-^w5?>(VEtNA?eXXKZd_VJNWbu%0M?#lGyukh!MF1?7p`gz## zvZ1{I5+abA&8}k{C}1daJ4IL4__1ClLnS-ALPL$sVnWGsr}9^(D3UcudWnJyN?fbT z+PnHBEhMV;Fm|^4-6Zqqx*lu>3@bVv=;79(cj$Gh{uI?XDrSenLtlCcKaO&SM9-}W zc1;Bw)tl{7Q>vs%J*>5QEffAxCG&k888W%9lM*sW-f)LFbm(v_Tp6>Y{2|`poW*<#C?d|nGh>XPkDvf>H7~EO2R_!E+(gh z-F1(5uQhfVTPcOLbV#q_=s81#Vh3lmxUT&2-d)T7F=i`_tE)wVL zv92%U@hr@Y*80v-uASk?nu9sDTT??(mA9f{Cl3nO5j1jAG36J{I1NOvQ*^+; zbB?}0peq_S@TGp%!#27nu1$+af3bVMY#s@gd(X39bxKwHP{ydMnR*wq^K?oXliJXq z1iuZ$(6#JjYrw&Vj79+?j=!@5Cwvu%y3d~F;^~_2+?6rNTs}Rh zN+87CNyz=!%joLI>t@3;@=@eTOo{IE#+LwF&MVs@UCQl)A9?bVv=%0efWk_*n@jCx z``>%kkGA}Da2BowB$%)(2{af2rQY!~_eHXRFA@`W#4l@!fS(hXuzdUHfK78;DMPSo z?97x@N7ata((KofCLZ&2Cgeqof62xnHDwI{fs{P$8mr=H$&S50@?1++rP|8S@{@4K zq^(F0$uM9@r_hyf&uHafFg1jxj9nscy7F&TkN(dz<^EGZNj^Wi7<@_Bj|L%gE%aH3 z9lAqb`oDKY2W7DrEQz&jzT(S9ds(JRB<{A*92mPD=hYb#sy)-ObiVhV>Fi4FBHQt0 z-RkSwmh|pNqyR-!PXhSj1+YRFy~7Q(P=rZ5Z4(^36@$Hh|3NFql9=3bRx%zWudYoN zl2<C5jqfXn?tQ z?}K!mHFT{l=iX)12tB#rl$DlVJ|xV4eb9}aykpx<9xvFdWnZ>UhXusggm91+^<9Xs z`%)>+2|QdW#CdAE6QFBJ8n-UA@~~oWiVT-P&#SNkDHU>3kt0YA7l$msiSy8Mr7H$}{Mtuo;vQNAdM# z=WD>%J4m7BLdWcylYDMi8A7a+`zG$LU}nY2 z{7$02&q5(zin<&NKSCDqfht48!Go--XiR4hkRTLd6}XpD$m`sj6Ze9N?|K-L6bL)0 z@jh`7vX0BO$vBu|=CS*G5WL|PgXLxkbdA-w}>N^ z0af+gH-{LdHmA*czr4M>xSa&Dhy6p`)@_D)n;=E_2R~1+Zu&bseSGi(DJix>>qw{o zeZ9MIXH2g#wH80k(L{@8Zo{hh(!8$8zQauPE;QVgqCEdqIC;$0- zc&sx0HbwQBNHUMFCB~etSl8UejxMQ8&eK6CQ!!ANsYbh*9x+J#FsfdSgz8prjvx9{ zBL8udpg2&$Yl~oipyqarZnyTU)ZX0n36)4j?nQpJC%tvIW#8nd>az`WI&n~GDsg^% zOo%=xMU|BnuJP>7C!%Q8!$Dq%+;OgHzHaoh%*Ez9y==IuTr&rpnO6+&anprozk_dS z+oMtRwoLtee1z$vUJ}(kJskqcZ(l`K{n@|3=ASCu4{^F96?;viqpy;rT2|-*c{RgT zxv@^&nQ)HDKr0-wYAL|fuVk#~3v#sYKoSyNXgprr=Dzk1ZvDmX33ikI;1M+Z(a-tn zQX$CEk~W2*;bKc*?NdBg)US@hJ`piUZFwk^A*BR@Q=-6!k6o`FV5hHIiLBv0BZ*UW zap&AKU=O$!JX2H5ok}M)-bON6?A>B+ElRQms|-i@agz}3h8r%?4yVx4+utlq@r`6n z@TkkTJ4h{&ZRq5bagcb)Ll2@M=SdkpRRNj4VV{4ZY<+NR!r0krq=@XAg03d>q9MsN>Cj z7j{qh1i8CHtuN*D)V#+dEGN!*5E=WN3oyVnv$710=?{Krs%~*fYtVC7fHfT?m-!X^ zq85^iyq}A2=VYGe;kSq5oj~fbwOmCNpEsk@{FKS8X#xFiv;v`DbJ{$CsI8=+eW<6N ztILk&V=~uWxM|8pcLDn&{uRo%_XggPG@?xJq`j1cQ6*DT;+ExQ?LO$22MFanjbXXd zBMJHTbY|RL<2&>BB_T^UALQiF|v%sQn>h$aKTm9_rK;Crr!!WRZ)V{Z@ki+6UrtXN_iEyw}F{A}cND z<#A`*qL`XX8RV2MiA&sz4}FwtHL_Pf=>oX(ARh-Yydv33-a{_m-8exyS z-mE`;BdOK#G}l=u0KD%7P(C?$|I(cGIr2G3gUqQnNO_snf!`G83T% zW|2I2bm8j*`y0U#WNfO28o+RXL0tTj*|_daoM-^q5)4-b4ernJ4Yz{LXmsP0V z;&$aSxS2{x2rdkVE#2%J8Q`~YYjyYwfbThgqXXz(02)2}a=qN7z1-_bgzHJp%7MJM=X%?7^9vI^y+o63G{b!pu%NsM4BEO~qD{5F{O6lXjWr z^Gx)iqJD)%WuII$$C$wtn;L-$&73}on9&tMUJrw}1)PGm6BPXmDiX62+8AwD!0?? z9I5MRrT}Fjct1DN!JQ7sd{qIlFovSxE!+&>@O|u`^8nBK4nH+3{c<8EVM^{lJ!#zN zk3z9X4e9FXT!n&`ZeQ zT9@j7hU9jh)gq@AwW=0|ZX^yX_ILF)OzN{Z#!!z^@G;Ca26?HeaU*t-t zdaZ#?v(R~!1;>ECFXCZ>dhzbBlayfNlP891AOfUSwcgk9&kQbh^bBRh*%P|ElT6Q$ zdT*q>1Ju*zQE#L30=J;_#^Y(bJ)Ezf^dl?}504ZzS{*6JW@i0&f^*-V3WfLF`^m4c z?(~Bp1@}AN1%)rkw@ww4nvta2bbF%GbaOxJbY15ud;Xg6s_>ilSy#K*CS#ey8fXKb ztmrj@4z_1xp#bY~5BAoi#smU84mKJjQxhM2iPoCob+6y3jVBh_^%8bw?ul{$x zdl$QE^MPyBD$n@ihXheFHwz#tg&=mS>D7XFX1E*vaRwZ?y% z={1i(J0po!`da#?3vtA{7+a+XuAsd4?GUW_71E`tPcaE|1W~bl+NP2;G4*dC6s0RW zyc^arMHBYq06u2zEH?SBXcrJkkvNPRClgz|0BcUL!qT~8ksPmTdV;KD(CmN?KD5~{ zeJO{;lL*JSPdxwm^kbOMLSPlaw@fe>9zgiBs8A;8b$gaIi&>vw>MM(G{x(t+r9rlC zOfa~~_^+Wdbt^1XyzAkc7v*bUCB<%XcY=4nk_Wjj0~vd~JCCF7LpZXyp0I;frk@vD z=V}KZ>A8Z!Vg*8B(+_!kQOpWZO=-tJd-m>fh$Ntlf#`hD0bi2SFDU1HpJDi&v0dQF ztx3Ud?&Gu`cU}T zA^bvAer$}YcKGkd+JuxPb{l#Ix)|6q)<;4cz9K-wiAvdaHIz!eTN&h zMhSGh;l#>v%X)7Dx*w+ud=VY$;kIh34L^lF^b0I~`Ir6ri%|4gSefj7r-n||8V&tF zI!=;sZMV0k6B3R#Nea@dC5QJdAI)xXTKfgP1~ktCYToH?#pM+5NvCs1!k$cxn7odJ z`K^)%&_t$Pm(}3-7#qt=d#Fof`h<*K6`li`&cU7MaVV^XbCF-Qo05^Wr$2nD%z`hbRZBlI=9KPyS|K5Z3C|rHjRliT_wmQ- zYZ~2AAo#rc!KeS@LZ%HsS32MH^No}x6`r;%1l_wT1zzfpcj<4Md6FO>aMAF_JC(sv zOPCbAs*@?tQB>w7+>spQ`_PV{#Q80JNpiuyXr_>Q_vZj&4z6VExJ5$IUYd#bQ?Q{c za+c3F##{{llT>?*LX(to!0W^f5(h<(VEKj#pss<1|0#SR(TR+PTit3mT}l%EgOfR+ zN|;~I%~sl9n5#+AwAzk7+4W~_d{I++oNJz#mm0uLy0iT|8XYKc9D?r>XP0SC_1h)nap zW|@{GdBjBwwI_5QTZHR<-_e2Ft`2lm0{aay=V7^Z588MR3OIPN(A(dA%k66Dz8j^5 zDgg1H%=IaMU{aMy8w2#tUOYLr$4J(bT?WSuR|VdkMnCd;f3+%g<+l6YXGYpx5s;H8 zq8KOj`R0dR)yJC?T4j-I6BcH{QmBr)C@Uk2B=cfuPfYGw=!E&pS_*NG3UFb-OmuC1 zC#Qr-O#XBk!^p_prSaGY7Fk(Fu-?tWc1*N0IJlW@4S!*Wtj+8wB{0o0qzskXxYzIl zHan0`-}&k}Phb+|6iKiyCqjP~CS=l^Sg{?q@w z_(z4a$6QOT3Xg#zMAEVcX^0D%2o?l>M#E@jR$q;N6flsSzq`p)R9*I*yVbPL^$DR7 z?W0)oas~1?tHGQUp$L(Y$CNHH?{=R3&h_Vy%b61v_)QgG!-AguXqdN<@ol+!0dp}J z0Y82)8;P(S#Ll~d)kee5*4NV0XL6;5;w{&PLjP z=FL>6dZ`GBLAnsT$H=7F87$EpiBkkj1Pwg4Gu%b#T|I<5+4XtMI~wm&4E4&M&4m0G zxiK!@L>MMob|rhHe}x%f0Mfa0X@Uy29{{BK2aXMs7?l++ILX=qdCo7i_ zF|FtlLRVodHE=9a`UE^T?WBH@N!<;xVEEr6@^4)JpTZ9JQogTBrP#ZYXCE5NC+#;) zV+~RL4BV2mkG)G+*ScJ!goIAlzMgo!(C-fhr_@Q zRt#=meV``KYu1Q+=(w1S1j%R-=+6A#+gNc4U`X_H?vsaaU^`Lw$0mo-9AP (!Ksk$9h@(1VaH@|=ET{yWC#kv~hR;+Vzx&8-<+M#u` zkJW8-eK|C7z5R&`o+cV)Tkvdp&^jE`-85ob8M4f?L&~9*n zWAbtl=keFe9oGhC@k|Ssll9pKT_}Qqar%W$8O76g;WP}qnY3y%rDo!FYXwE5fH6^HzGBy0N1Th6Fy{2=mNHp$55 zC0EGT^UXEJm)oiOrAV?)oU-;+^_oJ(kNRJ(OM8sDOKe4<+r10f;6CnMP6T+$XWlO1 z(zj*Yt=avOOT_KE79pUTTJ7y@Y8gk_VKx)&dMp$uvSCCn!XMMa&teTgVt@HYCKODJhVi5(YAl$ zp~UGjIll{Ko(k(J82q7ReL!mFhWqBXut_mzi^<7@`XIC-XRAQGO7J@~#BjG}J+GRp z!|O#dq(x8snDYa)n6CvueZ zjU1H3h$y>?>%8>zWObatK?CITxu|hOV;UK=e*b!J@A(J73`+rrW!HA{PEn?Ekth=o zxLO-F^rRGhUm`#6o7!?O_2klJ*If-XHbPT|E*)(cLv=Am>ow@`*t}P2+lS=*WnNs} zY!l!_3}IB`#Z>!Z2kZe@eL%qM_ib=F}?*7=((yqGGBy&=E@TlC_ve zi1V1x6o3EqsI`YJOV)H~KEj#fWMykl(2U}YheHlg#Z@}AA8J-hku>?7Qj<*A9HVVZ zV7#ukQY==K>dEN0d*rmATJ_KXKCz!>nCOI>_5h=fBluW^;gyl+i9=B=<~VPSX<^;_ z#@p0?w;A;x8|<5Fr#I&*q|q04n$7Z3%qJn`eR(kiH_%H;{sh+UfJ_P>=P~O$2N$ zXb8)5!cgzH^PgC2ifD;PkkxG*c4r7JD>1o1Ar4}4D z-uG8^mZlY9PR=4~HSBlsItige6_Y`&qtx|bQ}0w3B7AO-UQfPV`h=C~jC?z(nR(*t z<7|RbJn}HUB!LdOG$5VNkbb_eaqqIO*Du)3?ANYIKCP7@52xUwW=SLN=hD|67?wfq=_-J+On#CD;MXCVgp4 z0A`cD_23py^ClsX0*yIqgh5zEzQS$_H8B8T1tXIj|JglP-23S3ol@iA3;&Ttz}ohs zTnvpukU1`fI=d2poIt6!X1qOQz)9|%1mt*cluesq1+vTm%=mL8u59G070idQvqz_` z+?>E5_V#DlG@!P{j!8&~s=n9m`?1g49eb+U6ydO2GXoYeG6unOgh+QXFj4t!bDi)U z{g=0qMPJ6iec6JiHR#E9q zt18YMa^*S7)oKlJn$Pc3n-m3qeK3FCXTHO8+sxqkA|D_FVQu4HNxJhth(|ZU`d9UT fB1UivI1s#~)zdK3GydiV3P@2_Ri;GheZYSKKom0P literal 0 HcmV?d00001 diff --git a/files/ja/web/api/notifications_api/using_the_notifications_api/index.md b/files/ja/web/api/notifications_api/using_the_notifications_api/index.md index 08a18a0b0b49b2..13d3e131fd26fe 100644 --- a/files/ja/web/api/notifications_api/using_the_notifications_api/index.md +++ b/files/ja/web/api/notifications_api/using_the_notifications_api/index.md @@ -1,15 +1,17 @@ --- title: 通知 API の使用 slug: Web/API/Notifications_API/Using_the_Notifications_API +l10n: + sourceCommit: aa8fa82a902746b0bd97839180fc2b5397088140 --- -{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}} +{{DefaultAPISidebar("Web Notifications")}}{{securecontext_header}} {{AvailableInWorkers}} [通知 API](/ja/docs/Web/API/Notifications_API) は、ウェブページやアプリからシステムレベルでページ外部に表示される通知を送ることを可能にします。これにより、アプリケーションがアイドルやバックグラウンドの状態であっても、アプリからユーザーに情報を送信することができます。この記事では、アプリで API を使用する方法の基本を見ていきます。 一般的にシステム通知とは、オペレーティングシステムの標準的な通知メカニズムを指します。一般的なデスクトップシステムやモバイル端末が、通知を行う方法の実例を思い出しましょう。 -![](android-notification.png) +![デスクトップ通知: To do list via mdn.github.io HEY! Your task "Go shopping" is now overdue](desktop-notification.png) 当然ながらシステム通知の仕組みはプラットフォームやブラウザーによって異なりますが問題はなく、通知 API はほとんどのシステム通知に対して十分な互換性を持つようになっています。 @@ -21,7 +23,7 @@ slug: Web/API/Notifications_API/Using_the_Notifications_API ## 許可の要求 -アプリが通知を送信できるようになる前に、ユーザーはアプリがそれを行う権限を認めなければなりません。これは API がウェブページの外部にあるものと対話しようとする際の一般的な要件です。ユーザは少なくとも 1 回はアプリケーションが通知を送ることを認めなければならず、これによりどのアプリやサイトが通知を表示してよいかをユーザーが制御することができます。 +アプリが通知を送信できるようになる前に、ユーザーはアプリがそれを行う権限を認めなければなりません。これは API がウェブページの外部にあるものと対話しようとする際の一般的な要件です。ユーザーは少なくとも 1 回はアプリケーションが通知を送ることを認めなければならず、これによりどのアプリやサイトが通知を表示してよいかをユーザーが制御することができます。 過去にプッシュ通知が悪用されることがあったため、ウェブブラウザーや開発者はこの問題を緩和するための対策を実装し始めています。通知を表示することの許可を求めるのは、ユーザーの操作 (ボタンをクリックするなど) の反応として行うべきです。ユーザーが同意していない通知でユーザーに迷惑をかけるべきではないので、これはベストプラクティスであるだけでなく、今後ブラウザーはユーザーの操作によって起動されたものではない通知の許可の要求を明示的に拒否するようになるでしょう。例えば、 Firefox はバージョン72からすでにこれを行っており、 Safari もしばらく前からこれを行っています。 @@ -29,7 +31,7 @@ slug: Web/API/Notifications_API/Using_the_Notifications_API ### 現在の許可状態を確認する -読取専用の {{domxref("Notification.permission")}} プロパティの値を調べると、すでに許可を得ているかを確認できます。このプロパティは、3 種類のいずれかの値を取ります。 +読み取り専用の {{domxref("Notification.permission_static", "Notification.permission")}} プロパティの値を調べると、すでに許可を得ているかを確認できます。このプロパティは、3 種類のいずれかの値を取ります。 - `default` - : ユーザーはまだ許可を求められたことがなく、したがって通知は表示されない。 @@ -40,10 +42,10 @@ slug: Web/API/Notifications_API/Using_the_Notifications_API ### 許可を得る -通知を表示する許可をまだ得ていない場合は、アプリケーションは {{domxref("Notification.requestPermission()")}} メソッドを使用してユーザーに要求する必要があります。もっとも簡単な形では、次のようなものがあります。 +通知を表示する許可をまだ得ていない場合は、アプリケーションは {{domxref("Notification.requestPermission_static", "Notification.requestPermission()")}} メソッドを使用してユーザーに要求する必要があります。もっとも簡単な形では、次のようなものがあります。 ```js -Notification.requestPermission().then(function (result) { +Notification.requestPermission().then((result) => { console.log(result); }); ``` @@ -51,11 +53,15 @@ Notification.requestPermission().then(function (result) { これはメソッドのプロミスベースの版を使用しています。古いバージョンに対応したい場合は、次のように古いコールバック版を使用する必要があります。 ```js -Notification.requestPermission(); +Notification.requestPermission((result) => { + console.log(result); +}); ``` コールバック版はオプションで、ユーザーが表示を許可する要求に答えた時に呼び出されるコールバック関数を受け入れます。 +> **メモ:** `Notification.requestPermission` がプロミスベース版に対応しているかどうかを、確実に機能テストする方法はありません。古いブラウザーの対応が必要な場合は、コールバック版を使用してください。非推奨ではありますが、新しいブラウザーでも動作します。詳しくは、[ブラウザー互換性表](/ja/docs/Web/API/Notification/requestPermission_static#ブラウザーの互換性)を参照してください。 + ### 例 To-do リストのデモでは、 "Enable notifications" ボタンを配置し、押されたときにアプリの通知を要求します。 @@ -68,62 +74,23 @@ To-do リストのデモでは、 "Enable notifications" ボタンを配置し ```js function askNotificationPermission() { - // function to actually ask the permissions - function handlePermission(permission) { - // set the button to shown or hidden, depending on what the user answers - if ( - Notification.permission === "denied" || - Notification.permission === "default" - ) { - notificationBtn.style.display = "block"; - } else { - notificationBtn.style.display = "none"; - } - } - - // Let's check if the browser supports notifications + // Check if the browser supports notifications if (!("Notification" in window)) { console.log("This browser does not support notifications."); - } else { - if (checkNotificationPromise()) { - Notification.requestPermission().then((permission) => { - handlePermission(permission); - }); - } else { - Notification.requestPermission(function (permission) { - handlePermission(permission); - }); - } + return; } + Notification.requestPermission().then((permission) => { + // set the button to shown or hidden, depending on what the user answers + notificationBtn.style.display = permission === "granted" ? "none" : "block"; + }); } ``` -最初に 2 番目のメインブロックを見てみると、まず最初に通知に対応しているかどうかチェックしているのが分かります。もし対応していれば、次に `Notification.requestPermission()` のプロミスベース版に対応しているかどうかチェックします。対応している場合は、プロミスベース版 (Safari 以外で対応) を実行し、対応していない場合は古いコールバックベース版 (Safari で対応) を実行します。 - -コードの重複を避けるために、このスニペットの最初のメインブロックである `handlePermission()` 関数の中に、多少のハウスキーピングコードを格納しています。この内部では、 `Notification.permission` の値を明示的に設定し (古いバージョンの Chrome では自動的に設定できないものがありました)、ユーザーが許可ダイアログで選択した内容に応じてボタンを表示・非表示にしています。すでに許可されている場合は表示したくありませんが、ユーザーが許可を拒否することを選択した場合は、後で変更できるようにしたいと考えています。 - -> [!NOTE] -> バージョン 37 より前の Chrome では、 {{domxref("Notification.requestPermission()")}} を `load` イベントのハンドラー内で呼び出すことを許可していませんでした ([issue 274284](https://bugs.chromium.org/p/chromium/issues/detail?id=274284) をご覧ください)。 - -### requestPermission() プロミスの機能検出 - -前に、ブラウザーがプロミス版の `Notification.requestPermission()` に対応しているかどうかをチェックする必要があると言いました。これは以下のようにして行います。 - -```js -function checkNotificationPromise() { - try { - Notification.requestPermission().then(); - } catch (e) { - return false; - } - - return true; -} -``` +最初に 2 番目のメインブロックを見てみると、まず最初に通知に対応しているかどうかチェックしているのが分かります。もしそうであれば、プロミスベース版の `Notification.requestPermission()` を実行し、そうでない場合は、コンソールにメッセージをログ出力します。 -基本的には、 `.then()` メソッドが `requestPermission()` で利用できるかどうかを確認します。成功した場合は `true` を返します。失敗した場合は、 `false` を `catch() {}` ブロック内で返します。 +`then` に渡されるプロミス解決ハンドラー内で、ユーザーが権限ダイアログで選んだ内容に応じてボタンの表示・非表示を切り替えます。すでにその権限が許可されている場合はボタンを表示させたくありませんが、ユーザーが権限を拒否するよう選んだ場合は、後で考えを変えるチャンスを与えるべきです。 -

通知の作成

+## 通知の作成 通知の作成は簡単です。 {{domxref("Notification")}} コンストラクターを使用するだけです。このコンストラクターは通知内に表示するタイトルと、通知を拡張するためのアイコン ({{domxref("Notification.icon","icon")}}) やテキスト本文 ({{domxref("Notification.body","body")}}) などのオプションを受け取ります。 @@ -131,7 +98,7 @@ function checkNotificationPromise() { ```js const img = "/to-do-notifications/img/icon-128.png"; -const text = 'HEY! Your task "' + title + '" is now overdue.'; +const text = `HEY! Your task "${title}" is now overdue.`; const notification = new Notification("To do list", { body: text, icon: img }); ``` @@ -141,7 +108,7 @@ const notification = new Notification("To do list", { body: text, icon: img }); ```js const n = new Notification("My Great Song"); -document.addEventListener("visibilitychange", function () { +document.addEventListener("visibilitychange", () => { if (document.visibilityState === "visible") { // The tab has become visible so clear the now-stale Notification. n.close(); @@ -181,86 +148,84 @@ Notifications API の仕様では、{{domxref("Notification")}} のインスタ 以下の基本的な HTML を想定してください。 ```html - + +
+``` + +```css hidden +#demo-logs { + width: 90%; + height: 100px; + background-color: #ddd; + overflow-x: auto; +} ``` 以下の方法で、複数の通知を扱うことが可能です。 ```js -window.addEventListener("load", function () { - const button = document.getElementsByTagName("button")[0]; - - if (window.self !== window.top) { - // Ensure that if our document is in a frame, we get the user - // to first open it in its own tab or window. Otherwise, it - // won't be able to request permission to send notifications. - button.textContent = "View live result of the example code above"; - button.addEventListener("click", () => window.open(location.href)); - return; - } +const demoLogs = document.querySelector("#demo-logs"); + +window.addEventListener("load", () => { + const button = document.querySelector("#notify"); - button.addEventListener("click", function () { - // If the user agreed to get notified - // Let's try to send ten notifications - if (window.Notification && Notification.permission === "granted") { + button.addEventListener("click", () => { + if (Notification?.permission === "granted") { + demoLogs.innerText += `The site has permission to show notifications. Showing notifications.\n`; + // If the user agreed to get notified + // Let's try to send ten notifications let i = 0; // Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time. - const interval = window.setInterval(function () { - // Thanks to the tag, we should only see the "Hi! 9" notification - const n = new Notification("Hi! " + i, { tag: "soManyNotification" }); - if (i++ == 9) { - window.clearInterval(interval); + const interval = setInterval(() => { + // Thanks to the tag, we should only see the "Hi no 9 from MDN." notification + const n = new Notification(`Hi no ${i} from MDN.`, { + tag: "soManyNotification", + }); + if (i === 9) { + clearInterval(interval); } + i++; }, 200); - } - - // If the user hasn't told if they want to be notified or not - // Note: because of Chrome, we are not sure the permission property - // is set, therefore it's unsafe to check for the "default" value. - else if (window.Notification && Notification.permission !== "denied") { - Notification.requestPermission(function (status) { + } else if (Notification && Notification.permission !== "denied") { + demoLogs.innerText += "Requesting notification permission.\n"; + // If the user hasn't told if they want to be notified or not + // Note: because of Chrome, we are not sure the permission property + // is set, therefore it's unsafe to check for the "default" value. + Notification.requestPermission().then((status) => { // If the user said okay if (status === "granted") { + demoLogs.innerText += + "User granted the permission. Sending notifications.\n"; let i = 0; // Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time. - const interval = window.setInterval(function () { + const interval = setInterval(() => { // Thanks to the tag, we should only see the "Hi! 9" notification - const n = new Notification("Hi! " + i, { + const n = new Notification(`Message no ${i} from MDN.`, { tag: "soManyNotification", }); - if (i++ == 9) { - window.clearInterval(interval); + if (i === 9) { + clearInterval(interval); } + i++; }, 200); - } - - // Otherwise, we can fallback to a regular modal alert - else { - alert("Hi!"); + } else { + // Otherwise, we can fallback to a regular modal alert + demoLogs.innerText += `User denied the permission request.\n`; } }); - } - - // ユーザが通知を拒否している場合 - else { - // 通常型の alert にフォールバックできます - alert("Hi!"); + } else { + // If the user refuses to get notified, we can fallback to a regular modal alert + demoLogs.innerText += `The site does not have permission to show notifications.\n`; } }); }); ``` -結果は以下のとおりです。 - -{{ EmbedLiveSample('Tag_example', '100%', 30) }} - -## 仕様書 - -{{Specifications}} +### 結果 -## ブラウザーの互換性 +{{ EmbedLiveSample('Tag_example', '100%', 150) }} -{{Compat}} +上記の例をテストするには、ウェブサイト `https://live.mdnplay.dev` の[通知設定](https://support.mozilla.org/en-US/kb/firefox-page-info-window#w_permissions)を変更してください。。 ## 関連情報