[DX-287] Web push notifications tutorial

src/data/nav/pubsub.ts

@@ -242,6 +242,10 @@ export default {
         {
           name: 'Getting started',
           pages: [
+            {
+              name: 'Web Push',
+              link: '/docs/push/getting-started/web',
+            },
             {
               name: 'APNs',
               link: '/docs/push/getting-started/apns',

src/pages/docs/push/getting-started/apns.mdx

@@ -13,9 +13,11 @@ You'll learn how to set up your `AppDelegate` to manage push notifications, regi
 1. [Sign up](https://ably.com/signup) for an Ably account.
 2. Create a [new app](https://ably.com/accounts/any/apps/new), and create your first API key in the **API Keys** tab of the dashboard.
 3. Your API key will need the `publish` and `subscribe` capabilities. For sending push notifications from your app, you'll also need the `push-admin` capability.
-4. Install [Xcode](https://developer.apple.com/xcode/).
-5. You'll need a real iOS device to test push notifications (the simulator doesn't support APNs).
-6. Set up Apple Push Notification service (APNs) certificates through the [Apple Developer Portal](https://developer.apple.com/).
+4. For channel-based push, add a rule for the channel with **Push notifications enabled** checked. In the dashboard left sidebar: **Configuration** → **Rules** → **Add** or **Edit** a rule,
+then enable the Push notifications option. See [channel rules](https://ably.com/docs/channels#rules) for details.
+5. Install [Xcode](https://developer.apple.com/xcode/).
+6. You'll need a real iOS device to test push notifications (the simulator doesn't support APNs).
+7. Set up Apple Push Notification service (APNs) certificates through the [Apple Developer Portal](https://developer.apple.com/).
 
 ### (Optional) Install Ably CLI <a id="install-cli"/>
 
@@ -197,6 +199,8 @@ func didDeactivateAblyPush(_ error: ARTErrorInfo?) {
 ```
 </Code>
 
+Now you are ready to receive push notifications.
+
 ## Step 3: Receive push notifications <a id="step-3"/>
 
 Use `UNUserNotificationCenterDelegate` methods to receive push notifications.
@@ -231,7 +235,7 @@ func userNotificationCenter(_ center: UNUserNotificationCenter,
 ```
 </Code>
 
-Push notifications can be sent either directly to your device ID (or client ID),
+Push notifications can be sent either directly to your `deviceId` (or `clientId`),
 or posted to a channel, in which case you first need to subscribe your device to that channel:
 
 <Code>
@@ -266,7 +270,7 @@ func unsubscribeFromChannel(_ channelName: String) {
 ```
 </Code>
 
-Sending push notifications using device ID or client ID requires the `push-admin` capability for your API key.
+Sending push notifications using `deviceId` or `clientId` requires the `push-admin` capability for your API key.
 Use this method for testing purposes. In a production environment, you would typically send push notifications
 from your backend server (by posting messages with `push` `extras` field to a channel).
 
@@ -554,7 +558,7 @@ with a `push` `extras` field using Ably CLI:
 
 <Code>
 ```shell
-ably channels publish --api-key "{{API_KEY}}" exampleChannel1 '{"data":{"foo":"bar","baz":"qux"},"extras":{"push":{"notification":{"title":"Test push","body":"Hello from CLI!"}}}}'
+ably channels publish exampleChannel1 '{"name":"example","data":"Hello from CLI!","extras":{"push":{"notification":{"title":"Ably CLI","body":"Hello from CLI!"},"data":{"foo":"bar"}}}}'
 ```
 </Code>
 
@@ -563,10 +567,10 @@ Send the same command again and verify that no notification is received.
 
 You can also send push notifications right from your app. The next step will show you how.
 
-## Step 5: Send pushes with code <a id="step-5"/>
+## Step 5: Send push with code <a id="step-5"/>
 
 Just as you can send push notifications through the Ably CLI or dashboard, you can also send them directly from your app
-using device ID (or client ID), or channel publishing methods. For channel publishing, you don't need the admin capabilities
+using `deviceId` (or `clientId`), or channel publishing methods. For channel publishing, you don't need the admin capabilities
 for your API key.
 
 Add the following methods to your `AppDelegate` class:
@@ -596,7 +600,7 @@ func sendPushToDevice() {
 }
 
 /// Send push notification to a specific client ID
-func sendPushToClientId() {
+func sendPushToClient() {
     let recipient = [
         "clientId": realtime.auth.clientId ?? "push-tutorial-client"
     ]
@@ -681,7 +685,7 @@ struct SendPushSection: View {
                 }
 
                 Button(action: {
-                    appDelegate.sendPushToClientId()
+                    appDelegate.sendPushToClient()
                     statusMessage = "Sending push to client ID..."
                 }) {
                     HStack {