{"_id":"@aki77/push-registration-element","_rev":"2-c2aa0575e535252dbe8c2d6bf2f82921","name":"@aki77/push-registration-element","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@aki77/push-registration-element","version":"0.1.0","license":"MIT","_id":"@aki77/push-registration-element@0.1.0","maintainers":[{"name":"aki77","email":"lala.akira+npm@gmail.com"}],"dist":{"shasum":"205adcc76c8ef44700d0c04b54c9d15e504adb8d","tarball":"https://registry.npmjs.org/@aki77/push-registration-element/-/push-registration-element-0.1.0.tgz","fileCount":7,"integrity":"sha512-o9fpm0W/iCD+Sv4aOP51kYVWciTA0HMaVRFlfYZKk6iX1a+GIZzcRF150B5dai1e7PED8j6w93I4Tz6NYfQy/Q==","signatures":[{"sig":"MEQCIBVMZe0Mupjgsq7oeMfsjmzfn5R75vXaV8nNBnprZiy4AiACKFbPNweyzhv1hhYzExBlkWzkxDfhn/FuaJ4RNcRyfA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9949},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","scripts":{"lint":"biome check .","build":"tsc","clean":"rm -rf dist *.tgz","format":"biome check --write .","prebuild":"pnpm run clean && pnpm run lint"},"_npmUser":{"name":"aki77","email":"lala.akira+npm@gmail.com"},"repository":{"url":"aki77/push-registration-element","type":"git"},"description":"Web Push subscription custom element.","directories":{},"_nodeVersion":"26.0.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^6.0.3","@biomejs/biome":"^2.5.11"},"_npmOperationalInternal":{"tmp":"tmp/push-registration-element_0.1.0_1788514543347_0.21940482528366378","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"_id":"@aki77/push-registration-element@0.1.1","bugs":{"url":"https://github.com/aki77/push-registration-element/issues"},"dist":{"shasum":"43eadc7cba874090379d5f742ad2ec089928f1fa","tarball":"https://registry.npmjs.org/@aki77/push-registration-element/-/push-registration-element-0.1.1.tgz","fileCount":7,"integrity":"sha512-kKWC3BIM9rA9ah5Y7y0RCCza/lQaimt/pyrQQh8jmbuEscSU1UwiHcdE66VRJLFyHdn5RUkP0niUnXCQm0mHqQ==","signatures":[{"sig":"MEUCIFvjTd15AmxteXmkoQU3brXTxXHdm1SsH1ynUDhiTMAtAiEA/6+dParCwagbozQbyjzGhWEVNRSh51IYXN86agv9aSY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAwqlNF5uFeot9S+XPrg+OgDqVxH8rzrOktNSXga7YntAiEAmrJgzxwDG3a+22cLyXPwxwH64ig7xrVsn5mPS0Do0Ow="}],"unpackedSize":10862},"main":"dist/index.js","name":"@aki77/push-registration-element","type":"module","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"17052074abaa77ba0d06db0439bda60dd61b6d79","license":"MIT","scripts":{"lint":"biome check .","build":"tsc","clean":"rm -rf dist *.tgz","format":"biome check --write .","prebuild":"pnpm run clean && pnpm run lint","prepublishOnly":"pnpm run build"},"version":"0.1.1","_npmUser":{"name":"aki77","email":"lala.akira+npm@gmail.com"},"homepage":"https://github.com/aki77/push-registration-element#readme","repository":{"url":"git+https://github.com/aki77/push-registration-element.git","type":"git"},"_npmVersion":"11.16.0","description":"Web Push subscription custom element.","directories":{},"maintainers":[{"name":"aki77","email":"lala.akira+npm@gmail.com"}],"_nodeVersion":"24.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^6.0.3","@biomejs/biome":"^2.5.11"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/push-registration-element_0.1.1_1789105879544_0.3981039740005774"}}},"time":{"created":"2026-09-04T09:35:43.227Z","modified":"2026-09-11T05:51:19.793Z","0.1.0":"2026-09-04T09:35:43.479Z","0.1.1":"2026-09-11T05:51:19.650Z"},"license":"MIT","repository":{"url":"git+https://github.com/aki77/push-registration-element.git","type":"git"},"description":"Web Push subscription custom element.","maintainers":[{"name":"aki77","email":"lala.akira+npm@gmail.com"}],"readme":"# &lt;push-registration&gt; element\n\n`<push-registration>` is a form-associated custom element that intercepts the submit event of its parent form and, in order, registers a Service Worker, requests Notification permission, subscribes to Web Push, and submits the subscription information as a form value.\n\n## Installation\n\n```\nnpm install --save @aki77/push-registration-element\n```\n\n## Usage\n\n```js\nimport '@aki77/push-registration-element'\n```\n\n```html\n<form action=\"/push_subscriptions\" method=\"post\">\n  <push-registration name=\"push_subscription\" vapid-public-key=\"BEl62iUYgUivxIkv69yViEuiBIa40HI0DLLuxazjB...\"></push-registration>\n  <button type=\"submit\">Enable push notifications</button>\n</form>\n```\n\n## Attributes\n\n| Attribute | Description |\n| --- | --- |\n| `name` | The key used for the form value that carries the subscription JSON. |\n| `vapid-public-key` | **Required.** The VAPID public key (P-256, base64url-encoded). The `vapidPublicKey` getter throws if this attribute is missing. |\n| `service-worker-url` | The URL of the Service Worker script to register. Defaults to `/service-worker.js` when omitted. |\n\n## Submitted value\n\nOn successful subscription, the element sets its form value to the JSON string form of [`PushSubscription.toJSON()`](https://developer.mozilla.org/en-US/docs/Web/API/PushSubscription/toJSON), submitted under the `name` attribute's key:\n\n```json\n{\"endpoint\": \"...\", \"expirationTime\": null, \"keys\": {\"p256dh\": \"...\", \"auth\": \"...\"}}\n```\n\n## Events\n\nThe element dispatches a `push-registration:error` event (`bubbles: true`) when it cannot complete the subscription flow:\n\n```ts\ntype PushRegistrationErrorDetail = { reason: PushRegistrationErrorReason; error?: unknown }\n```\n\n`reason` is one of:\n\n- `unsupported` — the browser does not support Service Worker or the Push API.\n- `permission-denied` — the user denied (or dismissed) the notification permission prompt.\n- `subscribe-failed` — Service Worker registration or activation, or `pushManager.subscribe()`, failed; the original error is available as `error`.\n\nThe element only notifies the reason code; presenting user-facing copy for each reason is the responsibility of the host application.\n\n## Behavior notes\n\n- On unsupported browsers, the element disables the parent form's `button[type=\"submit\"]` on the next animation frame after `connectedCallback` runs (the button is not guaranteed to exist in the DOM yet at `connectedCallback` time).\n- On success, the element calls `form.submit()` directly, which bypasses the form's `submit` event handlers and constraint validation. Frameworks like Turbo or Rails UJS do not intercept this call, so the result is a full page navigation.\n- The element registers the Service Worker with `updateViaCache: 'none'`, so the script itself ignores the browser's HTTP cache.\n- Before calling `pushManager.subscribe()`, the element waits for the Service Worker to become active, since `register()` can resolve while the worker is still `installing` and `subscribe()` requires `registration.active` to be set.\n\n## TypeScript\n\nImporting the package augments the global `HTMLElementTagNameMap`, so `document.querySelector('push-registration')` is typed as `PushRegistration` without any extra work.\n\n```ts\nimport { PUSH_REGISTRATION_ERROR_EVENT, type PushRegistrationErrorReason } from '@aki77/push-registration-element'\n\ndocument.addEventListener(PUSH_REGISTRATION_ERROR_EVENT, (event) => {\n  event.detail.reason\n})\n```\n\n## Browser support\n\nSafari versions below 16.4 do not support `ElementInternals`. To support those browsers, import [`element-internals-polyfill`](https://www.npmjs.com/package/element-internals-polyfill) **before** importing this package.\n\n## License\n\nMIT\n","readmeFilename":"README.md","homepage":"https://github.com/aki77/push-registration-element#readme","bugs":{"url":"https://github.com/aki77/push-registration-element/issues"}}