5 lines
18 KiB
JSON
5 lines
18 KiB
JSON
{
|
|
"id": "api/service-worker/SwPush",
|
|
"title": "SwPush",
|
|
"contents": "\n\n<article>\n <div class=\"breadcrumb-container\">\n <div class=\"breadcrumb\">\n <script type=\"application/ld+json\">\n {\n \"@context\": \"http://schema.org\",\n \"@type\": \"BreadcrumbList\",\n \"itemListElement\": [\n { \"@type\": \"ListItem\", \"position\": 1, \"item\": { \"@id\": \"https://angular.io//api\", \"name\": \"API\" } },\n { \"@type\": \"ListItem\", \"position\": 2, \"item\": { \"@id\": \"https://angular.io/api/service-worker\", \"name\": \"@angular/service-worker\" } },\n { \"@type\": \"ListItem\", \"position\": 3, \"item\": { \"@id\": \"https://angular.io/api/service-worker/SwPush\", \"name\": \"SwPush\" } }\n ]\n }\n </script>\n <a href=\"/api\">API</a> > <a href=\"api/service-worker\">@angular/service-worker</a>\n </div>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/service-worker/src/push.ts?message=docs(service-worker)%3A%20describe%20your%20change...#L14-L213\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/service-worker/src/push.ts#L14-L213\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n \n <header class=\"api-header\">\n <h1 id=\"swpush\">SwPush<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/service-worker/SwPush#swpush\"><i class=\"material-icons\">link</i></a></h1>\n \n <label class=\"api-type-label class\">class</label>\n \n \n \n </header>\n \n <aio-toc class=\"embedded\"></aio-toc>\n\n <div class=\"api-body\">\n \n <section class=\"short-description\">\n <p>Subscribe and listen to\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Push_API/Best_Practices\">Web Push\nNotifications</a> through\nAngular Service Worker.</p>\n\n \n </section>\n \n \n \n <section class=\"class-overview\">\n<code-example language=\"ts\" hidecopy=\"true\">\nclass <a href=\"api/service-worker/SwPush\" class=\"code-anchor\">SwPush</a> {\n <a class=\"code-anchor\" href=\"api/service-worker/SwPush#messages\"><span class=\"member-name\">messages</span>: Observable<object></a>\n <a class=\"code-anchor\" href=\"api/service-worker/SwPush#notificationClicks\"><span class=\"member-name\">notificationClicks</span>: Observable<{...}</a>\n <a class=\"code-anchor\" href=\"api/service-worker/SwPush#subscription\"><span class=\"member-name\">subscription</span>: Observable<PushSubscription | null></a>\n <a class=\"code-anchor\" href=\"api/service-worker/SwPush#isEnabled\"><span class=\"member-name\">isEnabled</span>: boolean</a>\n <a class=\"code-anchor\" href=\"api/service-worker/SwPush#requestSubscription\"><span class=\"member-name\">requestSubscription</span>(options: { serverPublicKey: string; }): Promise<PushSubscription></a>\n <a class=\"code-anchor\" href=\"api/service-worker/SwPush#unsubscribe\"><span class=\"member-name\">unsubscribe</span>(): Promise<void></a>\n}\n</code-example>\n\n \n \n\n</section>\n\n\n \n<section class=\"see-also\">\n <h2 id=\"see-also\">See also<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/service-worker/SwPush#see-also\"><i class=\"material-icons\">link</i></a></h2>\n <ul>\n \n <li><p><a href=\"https://developers.google.com/web/fundamentals/codelabs/push-notifications/\">Push Notifications</a></p>\n</li>\n <li><p><a href=\"https://blog.angular-university.io/angular-push-notifications/\">Angular Push Notifications</a></p>\n</li>\n <li><p><a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Push_API\">MDN: Push API</a></p>\n</li>\n <li><p><a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API\">MDN: Notifications API</a></p>\n</li>\n <li><p><a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Push_API/Best_Practices\">MDN: Web Push API Notifications best practices</a></p>\n</li>\n </ul>\n</section>\n\n\n \n \n \n\n\n\n\n\n\n\n\n<section class=\"instance-properties\">\n <h2 id=\"properties\">Properties<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/service-worker/SwPush#properties\"><i class=\"material-icons\">link</i></a></h2>\n <table class=\"is-full-width list-table property-table\">\n <thead>\n <tr>\n <th>Property</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"messages\"></a>\n <code class=\"\"><span class=\"member-name\">messages</span>: Observable<object></code>\n </td>\n <td><span class=\"read-only-property\">Read-Only</span>\n \n <p>Emits the payloads of the received push notification messages.</p>\n\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"notificationClicks\"></a>\n <code class=\"\"><span class=\"member-name\">notificationClicks</span>: Observable<{\n action: string;\n notification: NotificationOptions & {\n title: string;\n };\n}></code>\n </td>\n <td><span class=\"read-only-property\">Read-Only</span>\n \n <p>Emits the payloads of the received push notification messages as well as the action the user\ninteracted with. If no action was used the <code>action</code> property contains an empty string <code>''</code>.</p>\n\n <p>Note that the <code>notification</code> property does <strong>not</strong> contain a\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Notification\">Notification</a> object but rather a\n<a href=\"https://notifications.spec.whatwg.org/#dictdef-notificationoptions\">NotificationOptions</a>\nobject that also includes the <code>title</code> of the <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Notification\">Notification</a> object.</p>\n\n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"subscription\"></a>\n <code class=\"\"><span class=\"member-name\">subscription</span>: Observable<PushSubscription | null></code>\n </td>\n <td><span class=\"read-only-property\">Read-Only</span>\n \n <p>Emits the currently active\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/PushSubscription\">PushSubscription</a>\nassociated to the Service Worker registration or <code>null</code> if there is no subscription.</p>\n\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"isEnabled\"></a>\n <code class=\"\"><span class=\"member-name\">isEnabled</span>: boolean</code>\n </td>\n <td><span class=\"read-only-property\">Read-Only</span>\n \n <p>True if the Service Worker is enabled (supported by the browser and enabled via\n<code><a href=\"api/service-worker/ServiceWorkerModule\" class=\"code-anchor\">ServiceWorkerModule</a></code>).</p>\n\n \n </td>\n </tr>\n \n </tbody>\n </table>\n</section>\n\n\n\n<section class=\"instance-methods\">\n <h2 id=\"methods\">Methods<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/service-worker/SwPush#methods\"><i class=\"material-icons\">link</i></a></h2>\n \n <a id=\"requestSubscription\"></a>\n<table class=\"is-full-width method-table instance-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"requestsubscription\">\n requestSubscription()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/service-worker/SwPush#requestsubscription\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/service-worker/src/push.ts?message=docs(service-worker)%3A%20describe%20your%20change...#L154-L180\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/service-worker/src/push.ts#L154-L180\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n <tr>\n <td class=\"short-description\">\n <p>Subscribes to Web Push Notifications,\nafter requesting and receiving user permission.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><span class=\"member-name\">requestSubscription</span>(options: { serverPublicKey: string; }): Promise<PushSubscription></code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table instance-method-overload-parameters\">\n <tbody>\n \n <tr class=\"instance-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>options</code>\n </td>\n <td class=\"param-type\"><code>object</code></td>\n <td class=\"param-description\">\n <p>An object containing the <code>serverPublicKey</code> string.</p>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns\">Returns</h6>\n <p><code>Promise<PushSubscription></code>: A Promise that resolves to the new subscription object.</p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n \n </tbody>\n</table>\n\n \n <a id=\"unsubscribe\"></a>\n<table class=\"is-full-width method-table instance-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"unsubscribe\">\n unsubscribe()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/service-worker/SwPush#unsubscribe\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/service-worker/src/push.ts?message=docs(service-worker)%3A%20describe%20your%20change...#L181-L208\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/service-worker/src/push.ts#L181-L208\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n <tr>\n <td class=\"short-description\">\n <p>Unsubscribes from Service Worker push notifications.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><span class=\"member-name\">unsubscribe</span>(): Promise<void></code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-1\">Parameters</h6>\n <p>There are no parameters.</p>\n\n \n <h6 class=\"no-anchor\" id=\"returns-1\">Returns</h6>\n <p><code>Promise<void></code>: A Promise that is resolved when the operation succeeds, or is rejected if there is no\n active subscription or the unsubscribe operation fails.</p>\n \n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n \n </tbody>\n</table>\n\n \n</section>\n\n\n\n \n<section class=\"usage-notes\">\n <h2 id=\"usage-notes\">Usage notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/service-worker/SwPush#usage-notes\"><i class=\"material-icons\">link</i></a></h2>\n <p>You can inject a <code><a href=\"api/service-worker/SwPush\" class=\"code-anchor\">SwPush</a></code> instance into any component or service\nas a dependency.</p>\n<code-example path=\"service-worker/push/module.ts\" region=\"inject-sw-push\" header=\"app.component.ts\">\nimport {<a href=\"api/service-worker/SwPush\" class=\"code-anchor\">SwPush</a>} from '@angular/service-worker';\n/* . . . */\nexport class AppComponent {\n constructor(readonly swPush: <a href=\"api/service-worker/SwPush\" class=\"code-anchor\">SwPush</a>) {}\n/* . . . */\n}\n\n</code-example>\n<p>To subscribe, call <code><a href=\"api/service-worker/SwPush#requestSubscription\" class=\"code-anchor\">SwPush.requestSubscription()</a></code>, which asks the user for permission.\nThe call returns a <code>Promise</code> with a new\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/PushSubscription\"><code>PushSubscription</code></a>\ninstance.</p>\n<code-example path=\"service-worker/push/module.ts\" region=\"subscribe-to-push\" header=\"app.component.ts\">\nprivate async subscribeToPush() {\n try {\n const sub = await this.swPush.requestSubscription({\n serverPublicKey: PUBLIC_VAPID_KEY_OF_SERVER,\n });\n // TODO: Send to server.\n } catch (err) {\n console.error('Could not subscribe due to:', err);\n }\n}\n\n</code-example>\n<p>A request is rejected if the user denies permission, or if the browser\nblocks or does not support the Push API or ServiceWorkers.\nCheck <code><a href=\"api/service-worker/SwPush#isEnabled\" class=\"code-anchor\">SwPush.isEnabled</a></code> to confirm status.</p>\n<p>Invoke Push Notifications by pushing a message with the following payload.</p>\n<code-example language=\"ts\">\n{\n \"notification\": {\n \"actions\": NotificationAction[],\n \"badge\": USVString\n \"body\": DOMString,\n \"data\": any,\n \"dir\": \"auto\"|\"ltr\"|\"rtl\",\n \"icon\": USVString,\n \"image\": USVString,\n \"lang\": DOMString,\n \"renotify\": boolean,\n \"requireInteraction\": boolean,\n \"silent\": boolean,\n \"tag\": DOMString,\n \"timestamp\": DOMTimeStamp,\n \"title\": DOMString,\n \"vibrate\": number[]\n }\n}\n</code-example>\n<p>Only <code>title</code> is required. See <code>Notification</code>\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Notification#Instance_properties\">instance\nproperties</a>.</p>\n<p>While the subscription is active, Service Worker listens for\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/PushEvent\">PushEvent</a>\noccurrences and creates\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Notification\">Notification</a>\ninstances in response.</p>\n<p>Unsubscribe using <code><a href=\"api/service-worker/SwPush#unsubscribe\" class=\"code-anchor\">SwPush.unsubscribe()</a></code>.</p>\n<p>An application can subscribe to <code><a href=\"api/service-worker/SwPush#notificationClicks\" class=\"code-anchor\">SwPush.notificationClicks</a></code> observable to be notified when a user\nclicks on a notification. For example:</p>\n<code-example path=\"service-worker/push/module.ts\" region=\"subscribe-to-notification-clicks\" header=\"app.component.ts\">\nthis.swPush.notificationClicks.subscribe(\n ({action, notification}) => {\n // TODO: Do something in response to notification click.\n });\n\n</code-example>\n\n</section>\n\n\n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/service-worker\n - api/service-worker/ServiceWorkerModule\n - api/service-worker/SwRegistrationOptions\n-->\n<!-- links from this doc:\n - /api\n - api/service-worker\n - api/service-worker/ServiceWorkerModule\n - api/service-worker/SwPush#isEnabled\n - api/service-worker/SwPush#messages\n - api/service-worker/SwPush#methods\n - api/service-worker/SwPush#notificationClicks\n - api/service-worker/SwPush#properties\n - api/service-worker/SwPush#requestSubscription\n - api/service-worker/SwPush#requestsubscription\n - api/service-worker/SwPush#see-also\n - api/service-worker/SwPush#subscription\n - api/service-worker/SwPush#swpush\n - api/service-worker/SwPush#unsubscribe\n - api/service-worker/SwPush#usage-notes\n - https://blog.angular-university.io/angular-push-notifications/\n - https://developer.mozilla.org/en-US/docs/Web/API/Notification\n - https://developer.mozilla.org/en-US/docs/Web/API/Notification#Instance_properties\n - https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API\n - https://developer.mozilla.org/en-US/docs/Web/API/PushEvent\n - https://developer.mozilla.org/en-US/docs/Web/API/PushSubscription\n - https://developer.mozilla.org/en-US/docs/Web/API/Push_API\n - https://developer.mozilla.org/en-US/docs/Web/API/Push_API/Best_Practices\n - https://developers.google.com/web/fundamentals/codelabs/push-notifications/\n - https://github.com/angular/angular/edit/master/packages/service-worker/src/push.ts?message=docs(service-worker)%3A%20describe%20your%20change...#L14-L213\n - https://github.com/angular/angular/edit/master/packages/service-worker/src/push.ts?message=docs(service-worker)%3A%20describe%20your%20change...#L154-L180\n - https://github.com/angular/angular/edit/master/packages/service-worker/src/push.ts?message=docs(service-worker)%3A%20describe%20your%20change...#L181-L208\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/service-worker/src/push.ts#L14-L213\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/service-worker/src/push.ts#L154-L180\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/service-worker/src/push.ts#L181-L208\n - https://notifications.spec.whatwg.org/#dictdef-notificationoptions\n-->"
|
|
} |