Web and Push Notifications in Joomla!�joo.nu/jd17Vigo�English - https://docs.google.com/presentation/d/1pSNicSambwlhttCZP__Y3r1nxIfwGhLd2680lCodV_Q/edit?usp=sharing�Spanish - https://docs.google.com/presentation/d/19rPs3QNLwr2s_osaohsOj7ARSqYLA4Ojv0MXmwvzyfU/edit?usp=sharing

Aníbal Sánchez

@anibal_sanchez

Blog.AnibalHSanchez.com

JoomGap - JoomGap.com

Extly Extensions - Extly.com

Extly Tech - Extly.tech

​

Sábado, 23 de Septiembre de 2017

Summary

Continuing with the session about Mobile App Development for Websites, which took place at Joomla! Day Madrid 2017 (May 12), we are now going to present the integration of Web and Push Notifications in Joomla!.

Notifications are a new way of communicating directly with users. They have an unlimited potential, but also a capacity that must be used with care. In this presentation, we will introduce the integration of Joomla! with Web Notifications and the integration of a SlimApp with Push Notifications and our Joomla! site. Finally, we will also present notification management services such as OneSignal or Pushwoosh.

Mobile Apps Development for Websites�http://joo.nu/slidesslimappjdaymad17

JoomGap/SlimApp-JDayMadrid2017�https://github.com/JoomGap/SlimApp-JDayMadrid2017

​

April 2016 - JoomlaDay La Rioja 2016�Joomla integration with Mobile Apps

​

Sep 2015 - JoomlaDay Sevilla 2015�Mobile App Development for Joomla!

​

​

Nov 2015 - Joomla World Conference 2015�Mobile apps development for Joomla

​

Previous Sessions

April 2016 - Joomla Madrid Meetup�A mobile app per Joomla! website

• Team Leader of Extly Extensions and JoomGap SlimApps
• 15+ years of internet development experience
• Joomla! Volunteer
• Extensions Directory (JED) Assistant Team Manager
• Google Summer of Code 2017 Mentor

​

About….

Ruta del Cares. Asturias, España

Acerca de...

JoomlaDay Vigo 2017

Bronze Sponsor

https://www.joocial.com

A powerful content hub to manage multiple social and notification channels.

Agenda

1. Notifications. Why!
2. Project for a Web Solution
3. Success Cases
4. Notifications Architecture
5. Which PUSH service do I use?
6. Advanced Integration
7. One more thing …

​

​

Notifications. Why!

?

Notifications. Why!

?

Notifications. Why!

“Apps with Native Performance and Background Execution”

Progressive Web Apps - PWA

​

Application Manifest and Service Workers are W3C stantards..

“Hybrid Apps” - iPhone 5 / iOS 6

Why Notifications!

Convergence

Project for a Web Solution

• A Responsive Website,
• With a mobile app,
• Sharing all the functionality,
• Android, Apple iOS, and Desktop support,
• With Web, Html y JavaScript technology,
• Easy to maintain
• Powered by Open Source technologies

... and the website must have Web notifications, and the app must have Push notifications ... and you can upload photos taken from the phone camera.

Success Case: SI SAN JUAN

News from the Government of San Juan

Government of San Juan Information Service (Argentina) - https://sisanjuan.gob.ar

By Imagen y Sistemas - Diseño y desarrollo de sitios web - Powered by Joomla and K2

Success Case: SI SAN JUAN

News from the Government of San Juan

Government of San Juan Information Service (Argentina) - https://sisanjuan.gob.ar

By Imagen y Sistemas - Diseño y desarrollo de sitios web - Powered by Joomla and K2

The Push API allows web applications to receive messages sent from a server, regardless of whether the web application is in the foreground or even loaded into a user agent. Push API - Web APIs | MDN

Notifications Architecture (PUSH Api)

Service Worker

There are a large number of PUSH service providers: Amazon SNS, Firebase, Ionic Push, Kumulos, OneSignal, PushAlert. Pushwoosh, Urban Airship. Android - Firebase, etc.

Which Push Service do I use?

Joomla - OneSignal Integration

Creating an account in OneSignal - Configuration.

​

Joomla - OneSignal Integration

Service Worker Definition, with Joomla! extensions

​

1. Browser: Chrome, Firefox, Safari, Opera. Microsoft Edge (?).
2. HTTPS
3. Download Web Push for Joocial plugins�https://extensions.joomla.org/extensions/extension/mobile/web-push-for-joocial/
4. Manifest Definition
1. Install plg_joocialwebpushmanifest_v8.15.0.zip
5. OneSignal Service Worker Definition
• Install plg_joocialwebpush_v8.15.0.zip
• Plugin Configuration
6. Copy OneSignal SDK Service Worker files to the root directory, OneSignalSDKWorker.js and OneSignalSDKUpdaterWorker.js.

Joomla - OneSignal Integration

Service Worker Definition, with Joomla! extensions

​

​

​

​

​

​

​

​

​

​

​

Documentation: Web Push notifications for Joomla!

​

​

Joomla - OneSignal Integration

Service Worker Definition, with Joomla! extensions

​

​

​

​

​

​

​

​

​

​

​

Documentation: Web Push notifications for Joomla!

​

​

Joomla - OneSignal Integration

Service Worker Definition, with Joomla! extensions

​

​

​

​

​

​

​

​

​

​

​

Documentation: Web Push notifications for Joomla!

​

​

https://blog.anibalhsanchez.com

Send a Notification - OneSignal

Advanced: SlimApp - OneSignal Integration

JoomGap / SlimApp-JDayVigo2017

https://github.com/JoomGap/SlimApp-JDayVigo2017

config.xml

Advanced: Send Notifications from Joomla!

One more thing … EasyArticles - Joocial Notifications

The Web will continue to change at an accelerated pace, due to convergence.

StackIdea’s EasyArticles: A cutting-edge tool that provides a superb creative experience, along with Joomla! article management on the front-end

In Conclusion

• A content management system supports multiple views of the content
• Web Clients can access from Android, Apple iOS y Desktop
• A mobile App can work based on a WebView to the site
• Joomla! offers a very flexible web platform
• Mobile functionality can be integrated into the web and the CMS. Examples: Notifications, Location, Camera, etc.
• From Joomla! you can fully manage the functionality of the App.

Questions?

Contact

JoomGap - Create amazing Apps!�https://www.joomgap.com/ - team@joomgap.com

App for DJ-Classifieds

Succes Case: Gramado Onde Ir

Social Network and News related to tourism

Turismo, Entretenimento, Lazer & Negócios. (Brasil) - https://gramado.onde.ir

By Onde.ir Web Services - Powered by Joomla y EasySocial

Success Case: Alerta Mascotas

Alerta mascotas is a free digital platform that aims to facilitate the reunion between lost pets and their owners..

https://www.alertamascotas.com

By Hiperforma - Powered by Joomla y DJ-Classifieds