Book page

Push Notifications & Progressive Web Apps (PWA)

Open Social
Open Social Open Social • 24 April 2018

Push Notifications

Open Social supports push notifications via a browser. Push notifications are great for personalized communication and help deliver the right information at the right time. Push notifications are sent for the same activities that trigger a notification email for users (e.g. another user likes their event).

 

PWA


 

As a site manager, you need to enable this feature, and users will then be prompted to enable push notifications to stay up to date with community activities.

Users can enable or disable the push notifications on their settings page at a later stage as well.
 

Important!
The technique we use for these notifications is not yet 'globally' supported. It can only be enabled for devices that support this technique. This includes most Android devices (mobile and tablet) and the major browsers on a desktop machine.
Two current notable exceptions are iOS devices (mobile and tablet) and the Safari browser (desktop), which don’t support push notifications via the browser yet. 
More info on this technique: https://www.getopensocial.com/blog/open-source-technology/progressive-web-apps 

 

How to enable the feature

Push notifications can be enabled on the Social PWA settings page.  On this page, other settings for progressive web apps can also be adjusted, such as names, icons, and colors. The Social PWA settings page can be reached via the site manager dashboard. 
 

site manager dashboard
 

social pwa settings
 

Configure PWA

 

Add (pin) your community to your mobile home screen


Together with the push notifications, we also added a functionality that allows users to add your community site to their device’s (mobile and tablet) home screen.

Android: The browser of a user will automatically display a button that nudges users to add the community to the home screen. This occurs when the browsers detect that the button is beneficial, for example when you've been visiting this site regularly.

 

iOS: You can add the site as a shortcut to your home screen, but this will not give you the app-like experience like on Android. But having a shortcut on your phone with a nice logo is already useful. 

In order to do so, launch the Safari browser on Apple’s iOS and navigate to the website or webpage you want to add to your home screen. Tap the Share button on the browser’s toolbar — that’s the rectangle with an arrow pointing upward. It’s on the bar at the top of the screen on an iPad, and on the bar at the bottom of the screen on an iPhone or iPod Touch. Tap the Add to Home Screen icon in the Share menu.
 

homescreen



You’ll be prompted to name the shortcut before tapping the Add button. The shortcut can be dragged around and placed anywhere, including in-app folders — just like a normal app icon. (To create app folders on iOS, touch-and-drag an app’s icon onto another app’s icon and hold it there for a moment.) When you tap the icon, it will load the website in a normal tab inside the Safari browser app.

 

Other browsers, like Chrome for iOS, don’t offer this feature. Due to the limitations of Apple’s iOS. Only Apple’s own Safari browser is allowed to do this.