Netmera Developer Guide
Netmera Docs
  • Netmera Developer Guide
  • Platforms
    • iOS
      • New iOS (Swift)
        • SDK Integration
        • Push Notifications
          • Delegate Methods
          • Widget and In-App Messages
          • Media Push
          • Carousel, Slider and Thumbnail Push
        • Deep Linking
          • Custom Deep Links
        • Sound & Vibration
        • Push Inbox
        • Events
        • Geofence & Location
        • User Attributes & Preferences
        • Advertising ID
        • Changelog
      • Former iOS (Objective-C)
        • SDK Integration
        • Push Notifications
          • Delegate Methods
          • Push Payload Receivers
          • Widget and In-App Messages
          • Customizing In-App Messages
          • Media Push
          • Carousel, Slider and Thumbnail Push
          • Custom Web View Presentation
          • Push Icon
        • Live Activities
        • Deep Linking
          • Custom Deep Links
        • Sound & Vibration
        • Push Inbox
        • Events
        • Geofence & Location
        • User Attributes & Preferences
        • Data Transfer
        • Advertising ID
        • SSL Pinning
        • Changelog
    • Android
      • SDK Integration
        • Huawei Integration
        • Huawei Message Receipt
        • Custom FCM and HMS Implementations
        • Android Integration FAQs
      • Push Notifications
        • Widget and In-App Messages
        • Push Callbacks
        • Custom Web View Presentation
        • Push Icon
      • Deep Linking
        • Custom Deep Links
      • Sound & Vibration
      • Push Inbox
      • Events
      • Geofence & Location
        • Background Location Permission
      • User & Attributes
      • Data Transfer
      • Advertising ID
      • App Tracking
      • SSL Pinning
      • Changelog
    • Web
      • SDK Setup
        • Self-Hosted SDK Setup
      • Mobile Web Push for iOS
      • Deep Linking
        • Custom Deep Links
      • Events
      • User & Attributes
    • React Native
      • SDK Integration
      • Push Notifications
        • Widget and In-App Messages
        • Push Callbacks
      • Deep Linking
        • Custom Deep Links
      • Sound & Vibration
      • Push Inbox
      • Events
      • Geofence & Location
      • User & Attributes
      • Changelog
    • Flutter
      • SDK Integration
        • Custom FCM and HMS Implementations
      • Push Notifications
        • Push Notification Permissions
        • Widget and In-App Messages
        • Flutter iOS Media Push
      • Deep Linking
        • Custom Deep Links
      • Sound & Vibration
      • Push Inbox
      • Events
      • Geofence & Location
      • User & Attributes
      • SSL Pinning
      • Changelog
    • Cordova
      • SDK Integration
      • Push Notifications
      • Sound & Vibration
      • Push Inbox
      • Events
      • User & Attributes
    • Unity
      • SDK Integration
      • Sound & Vibration
      • Events
      • User & Attributes
      • Changelog
  • Integrated Modules
    • Optimove
    • Adjust
    • Mixpanel
    • IYS Integration
    • VIA Integration
      • Short URL Consent Requests
      • OTP Consent Requests
        • OTP Confirmation Completion
      • VIA Email Rejection Link Generation
      • ETK Rejection via SMS
  • API Documentation
    • REST API
      • Setup
      • Notifications
      • Events
      • User & Device Management
      • Inbox Feature
      • GDPR
      • Error Responses
  • FAQs
    • Push Notifications FAQs
Powered by GitBook
On this page
  • Step 1: Web Application Manifest File
  • Testing Configuration
  • Step 2: Users Add Your Website to Their Home Screens
  • Step 3: Granting Push Permission
  • Step 4: Sending a Web Push Notification for iOS
  • How to Segment Mobile Web Push Opt-in Users?

Was this helpful?

  1. Platforms
  2. Web

Mobile Web Push for iOS

PreviousSelf-Hosted SDK SetupNextDeep Linking

Last updated 2 months ago

Was this helpful?

Web Push notifications are a powerful tool for engaging users and driving traffic to a website or platform. With the introduction of iOS and iPadOS 16.4+, marketers can now leverage web push notifications on these devices. This allows for a wider reach and enhanced user engagement through web apps added to a user's home screen.

Before implementing Mobile Web Push for iOS, ensure that the Web SDK Setup is completed.

Step 1: Web Application Manifest File

To make your website installable with its own icon and full-screen immersive experience, you must include a Web Application Manifest file. This JSON file defines how the website appears when added to a user’s home screen.

Requirements for manifest.json:

  • The file must be included in your project.

  • The display property should be set to standalone.

  • In some projects, manifest.json is automatically generated; if not, it must be manually added.

  • If a different value is set for display, update it to standalone.

Example manifest.json

{
  "short_name": "Netmera App",
  "name": "Create Netmera App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Testing Configuration

To test your website’s web push capabilities:

  1. Open your website in Safari on an iOS/iPadOS 16.4+ device.

  2. Click the Share button.

  3. Select Add to Home Screen.

  4. Once added, open the app from the home screen to verify that the permission prompt is enabled.

Step 2: Users Add Your Website to Their Home Screens

For users to receive web push notifications, they must first add your website to their home screens.

User Steps:

  1. Open the website on an iOS/iPadOS 16.4+ device.

  2. Click the Share button.

  3. Select Add to Home Screen.

  4. Save the app on the device home screen.

  5. Open the app from the home screen.

  6. Subscribe to notifications via the Fancy Box.

  7. The native permission prompt should appear when the subscribe button is clicked.

Step 3: Granting Push Permission

Once the website is added to the home screen:

  1. Users open the app from the home screen.

  2. The website triggers a Fancy Box requesting push notification permissions.

  3. Users must grant permission to receive web push notifications.

Step 4: Sending a Web Push Notification for iOS

Once users have granted push permissions, notifications can be sent using the Netmera Panel.

Steps to Send a Notification:

  1. Navigate to the Netmera Panel.

  2. Select Create New Campaign > Web > Safari to configure and send notifications to iOS users.

How to Segment Mobile Web Push Opt-in Users?

You can target users who have opted in for Mobile Web Push on iOS by following these steps:

  1. Go to Targeting: Navigate to Targeting > People in your dashboard.

  2. Filter by Platform: Under Platform, select Safari.

  3. Select Device Type: Choose Device Type > Mobile to filter mobile users.

  1. Target Users Found: Once the list is generated, save it as a segment to use in your future campaigns.