PWA Push Notification Tutorial    
This topic is assigned to Admin

--Admin--
Feb 19, 2018 12:37 PM

We are glad to announce that the Push Notification option for Progressive Web Apps is released.

 
Now you will be able to send Push Notifications to any of your PWA (Progressive Web App) same as for Android apps. Consider to follow the PWA Tutorial in case you will have any difficulties in creating and publishing a PWA.
 
The new section is added in your PWA Dashboard.
 
See screenshot for more details.
 
 
 
1. Enabling Push Notifications
 
To enable Push Notifications for your PWA, you will need to enter PWA Settings in General tab. There you will see the Enable Push Notifications option. To enable it check the mentioned option and Save Changes.
 
See Screenshot for more details:
 
 
 
 
After you enabled the related option you can publish your PWA. Note that you will have to publish your live PWA again, if you had enabled Push Notification option after the application was published. 
 
2. Sending Push Notifications
 
To send a Push Notification you will need to enter the Push Notification section.
 
You will be able to send next parts of the Notification:
 
2.1 Title. (1)
Here you will be able to specify the Title of the Push Notification. This field is required.
 
2.2 Push Notification Message. (2)
Here you will be able to specify the Push Notification Message. This field is required.
 
2.3 Image (3)
 
With this option you can set a Local or an External image to be shown in the Push Notification Message once received.
 
2.4 Action (4)
 
With this option you can set an action to the Push Notification. You can set a Local page or an External link to be opened.
 
2.4.1 None - with this action user will able to set the Annoncements (if it was added to the PWA before publishing) to be opened once the Notification will be pressed. If the Announcements page is not added then the index.html page will be loaded by default
 
2.4.2 Go to local page - with this action user will able to set a Local Page to be opened once the Notification will be pressed.
 
2.4.3 Go to external URL - with this action user will able to set an External URL to be opened once the Notification will be pressed.
 
See screenshot for more details:
 
 
 
 
3. Receiving the Push Notification:
 
The Push Notifications will be received only if the end user will grant the permission for the Push Notifications to be received. Once the user will open the PWA a Pop-up with the related permission request will be loaded. User will be able to Block or Allow the Push Notifications.
 
See screenshot for more details:
 
 
 
 
An example of a received Push Notification:
 
 
 
It contains the Push notification title, message, image and PWA URL.
 
Note that the Push notification will be received if the PWA is installed to Home Screen on your Android device or the PWA is opened in a supported browser and the Push Notifications are accepted.
 
Announcement feature
 
In your PWA you can also include the Announcement page where a history of all received Push Notifications will be displayed.
 
See screenshot for more details:
 
 
PN Topics feature
 
In your PWA you can use the PN Topics page with which the owner of the app can specify different Push Notification topics, so the users will be able to subscribe to these.
 
See screenshot for more details:

These features operate similar to the Android version of the pages and can be found in the Marketplace.
 
4. Mentions:
 
4.1 PWA Push Notifications will work only for Android devices and Desktop Browsers. Push Notifications are not available for iOS.
 
4.2 Push Notification will be received only if the user accepts the permission for the Push Notifications to be Received and browser is not in incognito mode.
 
4.3 In case the user does not have the browser opened or the device does not have internet connection, message will be displayed when internet connection will appear.
 
4.4 Not all browsers will support Push Notifications.
 
Supported Browsers:
Chrome 64 and higher
Firefox Version 57 and higher
Opera Version 50 and higher
 
4.5 Push Notifications will be available only for the HTTPS domains. You will not be able to use the Push Notification option for unsecured PWA domains.
 
4.6 Every new device that accesses the PWA and grants the Push Notification permissions will be able to receive the notifications after 1-2 min
 
Consider to open a Support Ticket if you will have any related issues or questions.
 
THANK YOU FOR USING SEATTLECLOUD!

    1