{"id":108237,"date":"2024-03-26T15:05:01","date_gmt":"2024-03-26T06:05:01","guid":{"rendered":"https:\/\/www.key-p.com\/blog\/staff\/?p=108237"},"modified":"2025-12-26T14:30:18","modified_gmt":"2025-12-26T05:30:18","slug":"web-push%e3%82%92%e8%a9%a6%e3%81%97%e3%81%a6%e3%81%bf%e3%81%9f%ef%bc%88%e3%83%95%e3%83%ad%e3%83%b3%e3%83%88%e3%82%a8%e3%83%b3%e3%83%89%e7%b7%a8%ef%bc%89","status":"publish","type":"post","link":"https:\/\/www.key-p.com\/blog\/staff\/archives\/108237","title":{"rendered":"Web Push\u3092\u8a66\u3057\u3066\u307f\u305f\uff08\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u7de8\uff09"},"content":{"rendered":"

\n

\u3053\u3093\u306b\u3061\u306f\uff01
\n\u6700\u8fd1\u3081\u304c\u306d\u30c7\u30d3\u30e5\u30fc\u3057\u305f\u3001\u5165\u793e2\u5e74\u76ee\u306e\u8336\u8c37\u3067\u3059\u3002<\/p>\n

\u4eca\u56de\u306f\u3001PHP\u3068JavaScript\u3067WebPush\u306b\u6311\u6226\u3057\u3066\u307f\u307e\u3057\u305f\uff01<\/p>\n

WebPush\u3068\u306f<\/h3>\n

WebPush\u306f\u3001\u30a6\u30a7\u30d6\u30d6\u30e9\u30a6\u30b6\u3092\u901a\u3058\u3066\u30e6\u30fc\u30b6\u30fc\u306b\u5bfe\u3057\u3066\u30d7\u30c3\u30b7\u30e5\u901a\u77e5\u3092\u9001\u4fe1\u3059\u308b\u305f\u3081\u306e\u4ed5\u7d44\u307f\u3067\u300cService Worker\u300d\u3001\u300cPush API\u300d\u3001\u300cNotification API\u300d\u306e\uff13\u3064\u304b\u3089\u69cb\u6210\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n

Service Worker\uff08\u30b5\u30fc\u30d3\u30b9\u30ef\u30fc\u30ab\u30fc\uff09<\/span>
\nWebPush\u306e\u57fa\u76e4\u3068\u306a\u308b\u3082\u306e\u3002\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u3067\u5b9f\u884c\u3055\u308c\u308b\u30b9\u30af\u30ea\u30d7\u30c8\u3067\u3001\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u3068\u306f\u72ec\u7acb\u3057\u3066\u52d5\u4f5c\u3059\u308b\u3002\u30b5\u30fc\u30d3\u30b9\u30ef\u30fc\u30ab\u30fc\u306f\u30d7\u30c3\u30b7\u30e5\u901a\u77e5\u3092\u53d7\u4fe1\u3057\u3001PC\u3084\u30b9\u30de\u30db\u306a\u3069\u306e\u30c7\u30d0\u30a4\u30b9\u306b\u901a\u77e5\u3092\u8868\u793a\u3059\u308b\u5f79\u5272\u3092\u679c\u305f\u3059\u3002<\/p>\n

Push API<\/span>
\n\u30b5\u30fc\u30d3\u30b9\u30ef\u30fc\u30ab\u30fc\u306b\u5bfe\u3057\u3066\u30d7\u30c3\u30b7\u30e5\u901a\u77e5\u3092\u53d7\u3051\u53d6\u308b\u305f\u3081\u306e\u30e1\u30ab\u30cb\u30ba\u30e0\u3092\u63d0\u4f9b\u3059\u308b\u3002Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306fPush API\u3092\u4f7f\u7528\u3057\u3066\u30d7\u30c3\u30b7\u30e5\u901a\u77e5\u3092\u8981\u6c42\u3057\u3001\u30b5\u30fc\u30d0\u30fc\u306f\u305d\u308c\u3092\u51e6\u7406\u3057\u3066\u901a\u77e5\u3092\u9001\u4fe1\u3059\u308b\u3002<\/p>\n

Notification API<\/span>
\n\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u30e6\u30fc\u30b6\u30fc\u306b\u5bfe\u3057\u3066\u8868\u793a\u3059\u308b\u901a\u77e5\u3092\u5236\u5fa1\u3059\u308b\u305f\u3081\u306e\u3082\u306e\u3002\u3053\u308c\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30d7\u30c3\u30b7\u30e5\u901a\u77e5\u306e\u5916\u89b3\u3084\u52d5\u4f5c\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3067\u304d\u308b\u3002<\/p>\n

Web Push\u3092\u4f7f\u3046\u305f\u3081\u306e\u6e96\u5099<\/h3>\n

Web Push\u3092\u4f7f\u3063\u3066Push\u901a\u77e5\u3092\u5b9f\u88c5\u3059\u308b\u306b\u306f\u3001\u79d8\u5bc6\u9375\u3068\u516c\u958b\u9375\u3092\u751f\u6210\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002
\n\u4eca\u56de\u306f https:\/\/web-push-codelab.glitch.me\/<\/a> \u3067\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002<\/p>\n

\u3082\u3057\u81ea\u5206\u3067\u79d8\u5bc6\u9375\u3068\u516c\u958b\u9375\u3092\u751f\u6210\u3059\u308b\u5834\u5408\u306f\u3001W3C\u306ePushSubscriptions Interface\u306e\u4ed5\u69d8\u3092\u6e80\u305f\u3059\u9375\u3092\u751f\u6210\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<\/p>\n

\n\u5f15\u7528\uff1a
\nIf present, the value of applicationServerKey MUST include a point on the P-256 elliptic curve [DSS], encoded in the uncompressed form described in [ANSI-X9-62] Annex A (that is, 65 octets, starting with an 0x04 octet). When provided as a DOMString, the value MUST be encoded using the base64url encoding [RFC7515].
\n7.2 PushSubscriptionOptions Interface<\/a><\/cite><\/p><\/blockquote>\n

\n

ChatGPT\u306b\u7ffb\u8a33\u3055\u305b\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n

applicationServerKey" \u306e\u5024\u304c\u5b58\u5728\u3059\u308b\u5834\u5408\u3001\u305d\u306e\u5024\u306f [DSS] \u3067\u5b9a\u7fa9\u3055\u308c\u305f P-256 \u6955\u5186\u66f2\u7dda\u4e0a\u306e\u30dd\u30a4\u30f3\u30c8\u3092\u542b\u307e\u306a\u3051\u308c\u3070\u306a\u308a\u307e\u305b\u3093\u3002\u3053\u308c\u306f [ANSI-X9-62] \u306e\u4ed8\u9332 A \u306b\u8a18\u8f09\u3055\u308c\u3066\u3044\u308b\u975e\u5727\u7e2e\u5f62\u5f0f\u3067\u30a8\u30f3\u30b3\u30fc\u30c9\u3055\u308c\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\uff08\u3059\u306a\u308f\u3061\u30010x04\u30aa\u30af\u30c6\u30c3\u30c8\u3067\u59cb\u307e\u308a\u300165\u30aa\u30af\u30c6\u30c3\u30c8\uff09\u3002DOMString \u3068\u3057\u3066\u63d0\u4f9b\u3055\u308c\u308b\u5834\u5408\u3001\u305d\u306e\u5024\u306f base64url \u30a8\u30f3\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0 [RFC7515] \u3092\u4f7f\u7528\u3057\u3066\u30a8\u30f3\u30b3\u30fc\u30c9\u3055\u308c\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n

\u8cfc\u8aad ... \u30e6\u30fc\u30b6\u30fc\u304c\u7279\u5b9a\u306eWeb\u30b5\u30a4\u30c8\u3084Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304b\u3089\u30d7\u30c3\u30b7\u30e5\u901a\u77e5\u3092\u53d7\u3051\u53d6\u308b\u3053\u3068\u306b\u540c\u610f\u3059\u308b\u30d7\u30ed\u30bb\u30b9\u3092\u6307\u3059<\/p>\n

\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u5b9f\u88c5<\/h3>\n

1. manifest.json\u306e\u8a2d\u7f6e<\/span>
\n\u4eca\u56de\u306f\u3001PC\u3060\u3051\u3067\u306a\u304f\uff08iOS 16.4\u4ee5\u964d\u306e\uff09iPhone\u3067\u3082\u901a\u77e5\u3055\u308c\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002
\niPhone\u3067WebPush\u6a5f\u80fd\u3092\u4f7f\u3048\u308b\u3088\u3046\u306b\u3059\u308b\u306b\u306f\u3001PWA\u5316\u304c\u5fc5\u9808\u3067\u3059\u3002<\/p>\n

PWA\u306b\u3064\u3044\u3066\u306f\u308f\u304b\u308a\u3084\u3059\u305d\u3046\u306a\u8a18\u4e8b\u3092\u898b\u3064\u3051\u305f\u306e\u3067\u4e0b\u8a18\u3092\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002
\nPWA\uff08Progressive Web Apps\uff09\u3068\u306f\uff01PWA\u304c\u3069\u3046\u51c4\u3044\u306e\u304b\u3084\u5c0e\u5165\u3059\u308b\u30e1\u30ea\u30c3\u30c8\u3092\u89e3\u8aac\uff01<\/a><\/p>\n

Web\u30b5\u30fc\u30d3\u30b9\u3092PWA\u306b\u5bfe\u5fdc\u3059\u308b\u306b\u306f\u3001manifest.json\u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u3092\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u30eb\u30fc\u30c8\u306b\u914d\u7f6e\u3057\u307e\u3059\u3002<\/p>\n

\u4eca\u56de\u306f\u4e0b\u8a18\u306e\u3088\u3046\u306amanifest\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3001\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u30eb\u30fc\u30c8\u306e\u76f4\u4e0b\u306b\u8a2d\u7f6e\u3057\u307e\u3057\u305f\u3002<\/p>\n

\nmanifest.json\n{\n  \"name\": \"WebPusher\", \/\/ \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u540d\u524d\n  \"short_name\": \"WebPusher\", \/\/ \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u77ed\u7e2e\u540d\n  \"display\": \"standalone\", \/\/ \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u3069\u306e\u3088\u3046\u306b\u8868\u793a\u3055\u308c\u308b\u304b\n  \"scope\": \"\/\", \/\/ \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30b9\u30b3\u30fc\u30d7\u3002\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u3069\u306e\u7bc4\u56f2\u3067\u52d5\u4f5c\u3059\u308b\u304b\u3092\u5b9a\u7fa9\n  \"start_url\": \"\/\" \/\/ \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u6700\u521d\u306b\u958b\u304b\u308c\u308b\u3068\u304d\u306e URL\n}\n<\/pre>\n
iOS 16.4+\u3067\u30d7\u30c3\u30b7\u30e5\u901a\u77e5\u3092\u6709\u52b9\u306b\u3059\u308b\u306b\u306f\u3001display\u3092standalone\u304bfullscreen\u306b\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u304c\u5fc5\u9808\u3060\u305d\u3046\u3067\u3059\u3002<\/p>\n
\u4f5c\u6210\u3057\u305fmanifest\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3080\u305f\u3081\u306b\u3001\u3059\u3079\u3066\u306e\u30da\u30fc\u30b8\u3067\u8aad\u307f\u8fbc\u307e\u308c\u308bheader.html\u306b\u4ee5\u4e0b\u3092\u8ffd\u8a18\u3057\u307e\u3059\u3002<\/p>\n
\n\n<\/pre>\n
2. \u30b5\u30fc\u30d3\u30b9\u30ef\u30fc\u30ab\u30fc\u306e\u767b\u9332<\/span>
\nWebPush\u3092\u5229\u7528\u3059\u308b\u306b\u306f\u3001\u30b5\u30fc\u30d3\u30b9\u30ef\u30fc\u30ab\u30fc\u3092\u767b\u9332\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u306e\u3067\u3001\u4e0b\u8a18\u306e\u3088\u3046\u306b\u3057\u3066\u767b\u9332\u3057\u307e\u3059\u3002<\/p>\n
\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u30eb\u30fc\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u76f4\u4e0b\u306bservce-worker.js\u3092\u4f5c\u6210<\/p>\n
\n\/\/ \u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u304b\u3089\u30d7\u30c3\u30b7\u30e5\u901a\u77e5\u3092\u53d7\u3051\u53d6\u3063\u305f\u3068\u304d\u306e\u51e6\u7406\nself.addEventListener('push', function (event) {\n  const title = 'Push\u901a\u77e5\u30c6\u30b9\u30c8';\n  const options = {\n      body: event.data.text(), \/\/ \u30b5\u30fc\u30d0\u30fc\u304b\u3089\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\n      tag: title, \/\/ \u30d7\u30c3\u30b7\u30e5\u901a\u77e5\u306e\u30bf\u30a4\u30c8\u30eb\n      icon: 'icon-512x512.png', \/\/ \u30a2\u30a4\u30b3\u30f3\u306e\u753b\u50cf\n      badge: 'icon-512x512.png' \/\/ \u30d0\u30c3\u30b8\u306e\u753b\u50cf\n  };\n\n  \/\/ showNotification\u30e1\u30bd\u30c3\u30c9\u3067\u30d7\u30c3\u30b7\u30e5\u901a\u77e5\u3092\u8868\u793a\n  event.waitUntil(self.registration.showNotification(title, options));\n});\n\n\/\/ \u30d7\u30c3\u30b7\u30e5\u901a\u77e5\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d\u306e\u30a4\u30d9\u30f3\u30c8\nself.addEventListener('notificationclick', function (event) {\n  event.notification.close(); \/\/ \u9589\u3058\u308b\n\u3000\u3000\u3000\u3000\/\/ \u305d\u306e\u4ed6\u51e6\u7406\n});\n\n\/\/ Service Worker \u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u6642\u306b\u5b9f\u884c\u3055\u308c\u308b\nself.addEventListener('install', (event) => {\n  console.log('service worker install ...');\n  self.skipWaiting(); \/\/ \u30a2\u30af\u30c6\u30a3\u30d6\u306a\u30b5\u30fc\u30d3\u30b9\u30ef\u30fc\u30ab\u30fc\u306e\u5f37\u5236\u5207\u308a\u66ff\u3048\n});\n\n\/\/ Service Worker \u30bd\u30fc\u30b9\u306e\u66f4\u65b0\u304c\u3042\u308b\u5834\u5408\u306b\u5b9f\u884c\u3055\u308c\u308b\nregistration.addEventListener('updatefound', function() {\n  console.log('service worker updating ...');\n});\n<\/pre>\n
service-worker.js\u3092\u30b5\u30fc\u30d3\u30b9\u30ef\u30fc\u30ab\u30fc\u306b\u767b\u9332<\/p>\n
\nif (window.navigator.serviceWorker !== undefined) {\n  window.navigator.serviceWorker.register('\/service-worker.js')\n}\n<\/pre>\n
3. \u8cfc\u8aad\u51e6\u7406\u306e\u5b9f\u88c5<\/span>
\nWeb Push\u8cfc\u8aad\u306b\u5fc5\u8981\u306a\u3053\u3068\u306f\u6b21\u306e\uff13\u3064\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
    \n
  1. \u30e6\u30fc\u30b6\u306e\u5229\u7528\u3057\u3066\u3044\u308b\u7aef\u672b\u304c\u3001Web Push\u901a\u77e5\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u308b\u304b\u3069\u3046\u304b\u78ba\u8a8d<\/li>\n
  2. \u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u5074\u306e\u516c\u958b\u9375\u3092\u53d6\u5f97\u3059\u308b<\/li>\n
  3. (2.\u3067\u53d6\u5f97\u3057\u305f\u516c\u958b\u9375\u3092\u4f7f\u3063\u3066)Web Push\u8cfc\u8aad<\/li>\n<\/ol>\n
    \nimport api from '@\/libs\/api'\n\n\/\/ 1) \u30e6\u30fc\u30b6\u306e\u5229\u7528\u3057\u3066\u3044\u308b\u7aef\u672b\u304c\u3001Web Push\u901a\u77e5\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u308b\u304b\u3069\u3046\u304b\u78ba\u8a8d\nexport async function checkIsWebPushSupported() {\n  \/\/ \u30b0\u30ed\u30fc\u30d0\u30eb\u7a7a\u9593\u306bNotification\u304c\u3042\u308c\u3070Notification API\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u308b\u3068\u307f\u306a\u3059\n  if (!('Notification' in window)) {\n    return false\n  }\n  \/\/ \u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570navigator\u306bserviceWorker\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u3042\u308c\u3070\u30b5\u30fc\u30d3\u30b9\u30ef\u30fc\u30ab\u30fc\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u308b\u3068\u307f\u306a\u3059\n  if (!('serviceWorker' in navigator)) {\n    return false\n  }\n  try {\n    const sw = await navigator.serviceWorker.ready\n    \/\/ \u5229\u7528\u53ef\u80fd\u306b\u306a\u3063\u305f\u30b5\u30fc\u30d3\u30b9\u30ef\u30fc\u30ab\u30fc\u304cpushManager\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u3042\u308c\u3070Push API\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u308b\u3068\u307f\u306a\u3059\n    if (!('pushManager' in sw)) {\n      return false\n    }\n    return true\n  } catch (error) {\n    return false\n  }\n}\n\n\/\/ 2) \u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u5074\u306e\u516c\u958b\u9375\u3092\u53d6\u5f97\u3059\u308b\nexport async function getVapidPublicKey() {\n  let info\n  await api.call('webpush_pubkey_get')\n    .then(res => {\n      info = res.data.info\n    })\n    .catch(err => {\n      console.log(err)\n    })\n  return info\n}\n\n\/\/ 3) 2)\u3067\u53d6\u5f97\u3057\u305f\u516c\u958b\u9375\u3092\u4f7f\u3063\u3066Web Push\u8cfc\u8aad\nexport async function subscribe() {\n  if (!(await checkIsWebPushSupported())) {\n    alert('\u3054\u5229\u7528\u306e\u30d6\u30e9\u30a6\u30b6\u3067\u306fWeb Push\u306f\u4f7f\u3048\u307e\u305b\u3093')\n    return false\n  }\n  const validPublicKey = (await getVapidPublicKey()).webpush_pubkey\n\n  if (window.Notification.permission === 'default') {\n    const result = await window.Notification.requestPermission()\n    if (result === 'default') {\n      alert('\u30d7\u30c3\u30b7\u30e5\u901a\u77e5\u306e\u6709\u52b9\u5316\u304c\u30ad\u30e3\u30f3\u30bb\u30eb\u3055\u308c\u307e\u3057\u305f\u3002\u306f\u3058\u3081\u304b\u3089\u3084\u308a\u76f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002')\n      return false\n    }\n  }\n\n  if (window.Notification.permission === 'denied') {\n    alert('\u30d7\u30c3\u30b7\u30e5\u901a\u77e5\u304c\u30d6\u30ed\u30c3\u30af\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u30d6\u30e9\u30a6\u30b6\u306e\u8a2d\u5b9a\u304b\u3089\u901a\u77e5\u306e\u30d6\u30ed\u30c3\u30af\u3092\u89e3\u9664\u3057\u3066\u304f\u3060\u3055\u3044\u3002')\n    return false\n  }\n\n  const hasSubscription = await getSubscription()\n\n  if (hasSubscription) { \/\/ \u3059\u3067\u306b\u8cfc\u8aad\u3057\u3066\u3044\u308b\n    \/\/ \u767a\u884c\u6e08\u307f\u306e\u8cfc\u8aad\u60c5\u5831\u3092\u8fd4\u3059\n    return hasSubscription.toJSON()\n  }\n\n  \/\/ \u65b0\u3057\u304f\u8cfc\u8aad\u60c5\u5831\u3092\u4f5c\u6210\u3059\u308b\n  const currentLocalSubscription = await navigator.serviceWorker.ready.then(\n    (worker) =>\n      worker.pushManager.subscribe({\n        userVisibleOnly: true,\n        applicationServerKey: validPublicKey,\n        expirationTime: Math.floor(Date.now() \/ 1000) + 30\n      })\n  )\n\n  const subscriptionJSON = currentLocalSubscription.toJSON()\n  if (subscriptionJSON.endpoint == null || subscriptionJSON.keys == null) {\n    alert('\u3054\u5229\u7528\u306e\u30d6\u30e9\u30a6\u30b6\u304c\u767a\u884c\u3057\u305f\u30c8\u30fc\u30af\u30f3\u306f\u672a\u5bfe\u5fdc\u306e\u305f\u3081\u3001\u30d7\u30c3\u30b7\u30e5\u901a\u77e5\u306f\u3054\u5229\u7528\u3044\u305f\u3060\u3051\u307e\u305b\u3093\u3002')\n    return false\n  }\n  return subscriptionJSON\n}\n\n\/\/ \u3059\u3067\u306b\u8cfc\u8aad\u60c5\u5831\u304c\u3042\u308b\u304b\u30c1\u30a7\u30c3\u30af\nexport async function getSubscription() {\n  let subscriptionData = null\n  await navigator.serviceWorker.ready.then(async function(serviceWorkerRegistration) {\n    await serviceWorkerRegistration.pushManager.getSubscription()\n      .then((subscription) => {\n        subscriptionData = subscription\n      })\n      .catch(function(err) {\n        console.warn('Error during getSubscription()', err)\n      })\n  })\n  return subscriptionData\n}\n\nexport default {\n  subscribe,\n  getSubscription\n}\n<\/pre>\n
    \u4eca\u56de\u306f\u3001GrpMail\u306e\u500b\u4eba\u8a2d\u5b9a > \u901a\u77e5\u8a2d\u5b9a\u304b\u3089WebPush\u6a5f\u80fd\u3092\u8cfc\u8aad\u3059\u308b\u60f3\u5b9a\u3067\u3001\u4e0a\u8a18\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u5185\u306esubscribe()\u3092\u3001\u901a\u77e5\u8a2d\u5b9a\u306e\u4fdd\u5b58\u6642\u306b\u5b9f\u884c\u3055\u305b\u3066\u3044\u307e\u3059\u3002<\/p>\n
    \u6b63\u5e38\u306b\u8cfc\u8aad\u3067\u304d\u308b\u3068\u3001\u4e0b\u8a18\u306e\u3088\u3046\u306b\u8cfc\u8aad\u60c5\u5831\u304c\u8fd4\u3063\u3066\u304d\u307e\u3059\u3002<\/p>\n
    \n{\n  \"endpoint\": \"https:\/\/fcm.googleapis.com\/fcm\/send\/caxIV6AdyG0:AP...\",\n  \"expirationTime\": null, \/\/ \u8cfc\u8aad\u60c5\u5831\u306e\u6709\u52b9\u671f\u9650\uff08VAPID\u304b\u3064Chrome\u306e\u5834\u5408\u306f\u6709\u52b9\u671f\u9650\u306f\u5e38\u306bnull\uff09\n  \"keys\": {\n    \"p256dh\": \"BOzeihdk_UXw...\",\n    \"auth\": \"1JY_l-F2x...\"\n  }\n}\n<\/pre>\n
    \u3053\u306e\u8cfc\u8aad\u60c5\u5831\u3092\u3001\u30e6\u30fc\u30b6ID\u3068\u7d10\u3065\u3051\u3066DB\u306b\u4fdd\u5b58\u3057\u307e\u3059\u3002
    \n\u6b21\u56de\u306f\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u5074\u306e\u5b9f\u88c5\u3092\u884c\u3063\u3066\u3044\u304d\u307e\u3059\uff01<\/p>\n
    https:\/\/www.key-p.com\/blog\/staff\/?p=108247<\/a><\/p>\n