I. Enable the PWA
- In your Magento backend, go to Simi PWA > Settings
- Push Notification and Offline Mode
- Enable Chrome Notification for Website: Select Yes to enable both Push Notification and Offline Mode functions of PWA
- Notification Icon URL (png): image URL of the notification icon (ends with “.png”)
- Add to Home Screen Configuration
- Enable: Select Yes to enable Add to Home Screen function
- App Short Name: The name of your PWA after you add it to mobile home screen
- App Name: The name that appears on PWA splash screen
- Icon URL (png): The image URL of your PWA icon which appears on home screen (ends with “.png”)
- Theme Color: The color of PWA header
- Background Color: The background color of your PWA splash screen
- Advanced PWA Configuration
- Enable PWA: Select Yes to enable advanced PWA configuration
- Enable Redirection: Select Yes to enable PWA redirection for your mobile site
- PWA Redirect IP(s): If you want to redirect only some specific IP addresses, enter them here
- PWA Excluded Paths: If you want to exclude any URLs from your PWA, enter their path here (separated by comma). Please note that any URL containing any of these path will be excluded from the PWA.
- PWA Logo URL: URL of the logo that appears in the web app’s header
- PWA Splash Image URL (png): URL of the splash screen image
- PWA Favicon URL: URL of the favicon for PWA
- Action (*After you make changes in Settings, you need to click this button(s) for the changes to take effect):
- Build Sandbox PWA: Apply changes to the test PWA version (sandbox). The PWA sandbox has the form www.your-site.com/pwa
- Build Live PWA: Apply changes to the live PWA version on your website.
- Google Analytics Tracking ID: Add Google Analytics to track your PWA
- Custom Head: Add custom code inside the <head> tag of your PWA
- Custom Footer HTML: Add custom code inside the <footer> tag of your PWA
- Switch Website Version Configuration
- Enable: Select Yes to enable "switch to website version" function. When enabled, it will add a button on PWA menu to allow users to switch to normal website version if they don't like the PWA.
- Button Text: Change text of the "switch back to PWA" button (when user is in normal website version)
- Button Background Color: Background color of "switch back to PWA" button
- Button Text Color: Color of "switch back to PWA" button text
- Button Custom CSS: Add custom CSS to change "switch back to PWA" button style
- Preload Configuration: keep this as default
- Click Save Config to save your changes.
II. Sending Push Notifications
- In your Magento backend, go to Simi PWA > Manage PWA Notification
- Click Add New button
- Device IDs: You can choose to send the notification to one or multiple specific devices. Click button to show a list of registered devices (users who click “Allow” when prompted to show notification for your PWA)
- Title Message: The title of your notification
- Message: The message of your notification
- Direct viewers to: You can choose what happens when users click on the push notification: go to a product page (Product In-app), a category page (Category In-app), or an external website (Website Page)
- Product ID/Category ID/URL: Select which product/category/URL that you want to redirect viewers to. Click button to show your product/category list.
- When your notification is ready to be sent, click Save and Send Notification.