Up next in 10
In Episode 13 of the Azure Essentials Series, we explore Azure Notification Hubs, a powerful tool for sending push notifications to millions of users across multiple platforms. This episode will guide you through setting up and managing Notification Hubs, integrating with your applications, and optimizing your notification delivery strategies. Perfect for mobile app developers, backend engineers, and solution architects aiming to enhance user engagement through timely notifications.
During the episode, we'll cover:
• Introduction to Azure Notification Hubs
- Overview of push notifications
- Benefits of using Azure Notification Hubs
• Core Concepts and Architecture
- Hubs, Namespaces, and Registrations
- Tagging and Segmentation
• Getting Started with Azure Notification Hubs
- Creating and configuring a Notification Hub
- Setting up platform-specific notification services (e.g., APNs, FCM, WNS)
• Sending Push Notifications
- Sending notifications to specific users or groups
- Implementing push notifications in your applications
Show More Show Less View Video Transcript
0:00
e
0:40
[Music]
0:48
[Music]
1:06
[Music]
1:20
hi this is your host habiban and welcome
1:23
hi this is your host habiban and welcome
1:23
hi this is your host habiban and welcome to my show a your essential Series in
1:27
to my show a your essential Series in
1:27
to my show a your essential Series in today episode we will talk about as your
1:30
today episode we will talk about as your
1:30
today episode we will talk about as your notification hubs aure notification Hub
1:33
notification hubs aure notification Hub
1:33
notification hubs aure notification Hub is a scalable crossplatform push
1:36
is a scalable crossplatform push
1:36
is a scalable crossplatform push notification service provided by
1:38
notification service provided by
1:38
notification service provided by Microsoft Azure that enables you to send
1:41
Microsoft Azure that enables you to send
1:41
Microsoft Azure that enables you to send targeted and personalized notifications
1:44
targeted and personalized notifications
1:44
targeted and personalized notifications to millions of mobile services across
1:47
to millions of mobile services across
1:47
to millions of mobile services across various platforms including iOS Android
1:51
various platforms including iOS Android
1:51
various platforms including iOS Android and Windows it simplifies the process of
1:54
and Windows it simplifies the process of
1:54
and Windows it simplifies the process of sending push notifications by offering a
1:57
sending push notifications by offering a
1:57
sending push notifications by offering a unified API that allows developers to
2:01
unified API that allows developers to
2:01
unified API that allows developers to broadcast notifications or send
2:03
broadcast notifications or send
2:03
broadcast notifications or send personalized messages to specific users
2:06
personalized messages to specific users
2:06
personalized messages to specific users devices groups or user
2:09
devices groups or user
2:09
devices groups or user segments so let's start this this is the
2:12
segments so let's start this this is the
2:12
segments so let's start this this is the agenda of our today
2:14
agenda of our today
2:14
agenda of our today episode uh first of all we will have
2:16
episode uh first of all we will have
2:16
episode uh first of all we will have introduction to aure notification hubs
2:19
introduction to aure notification hubs
2:19
introduction to aure notification hubs uh we will discuss about key components
2:21
uh we will discuss about key components
2:21
uh we will discuss about key components of uh notification hubs then we will
2:24
of uh notification hubs then we will
2:24
of uh notification hubs then we will talk about tagging and segmentation of
2:27
talk about tagging and segmentation of
2:27
talk about tagging and segmentation of notification we will also uh explore the
2:30
notification we will also uh explore the
2:30
notification we will also uh explore the supported notification platforms uh we
2:33
supported notification platforms uh we
2:33
supported notification platforms uh we will have a discussion on the benefits
2:37
will have a discussion on the benefits
2:37
will have a discussion on the benefits and the use cases of aure notification
2:40
and the use cases of aure notification
2:40
and the use cases of aure notification Hub uh so this is your host abib rman I
2:44
Hub uh so this is your host abib rman I
2:44
Hub uh so this is your host abib rman I am times cop Corner MVP Microsoft
2:48
am times cop Corner MVP Microsoft
2:48
am times cop Corner MVP Microsoft certified Solutions developer and
2:50
certified Solutions developer and
2:50
certified Solutions developer and currently working as a lead software
2:52
currently working as a lead software
2:52
currently working as a lead software developer at no
2:54
developer at no
2:54
developer at no software uh first of all we will talk
2:57
software uh first of all we will talk
2:57
software uh first of all we will talk about uh key components of Azure
3:01
about uh key components of Azure
3:01
about uh key components of Azure notification hubs when working with
3:03
notification hubs when working with
3:03
notification hubs when working with Azure notification hubs three key
3:06
Azure notification hubs three key
3:06
Azure notification hubs three key components you need to understand or
3:08
components you need to understand or
3:09
components you need to understand or name spaces hubs and registrations so
3:12
name spaces hubs and registrations so
3:12
name spaces hubs and registrations so here is a brief overview of each thing
3:16
here is a brief overview of each thing
3:16
here is a brief overview of each thing basically a name space in Azure
3:18
basically a name space in Azure
3:18
basically a name space in Azure notification Hub is a container for one
3:21
notification Hub is a container for one
3:21
notification Hub is a container for one or more notification hubs it provides a
3:25
or more notification hubs it provides a
3:25
or more notification hubs it provides a way to group multiple hubs together
3:27
way to group multiple hubs together
3:27
way to group multiple hubs together under a single manage ment
3:31
under a single manage ment
3:31
under a single manage ment domain uh the main purpose of name space
3:34
domain uh the main purpose of name space
3:34
domain uh the main purpose of name space is to organize and manage your
3:36
is to organize and manage your
3:36
is to organize and manage your notification hubs especially when you
3:38
notification hubs especially when you
3:38
notification hubs especially when you have multiple applications or
3:40
have multiple applications or
3:40
have multiple applications or environments like development testing
3:42
environments like development testing
3:42
environments like development testing and
3:43
and
3:43
and production uh a typical use case would
3:46
production uh a typical use case would
3:46
production uh a typical use case would be a company that manages multiple apps
3:50
be a company that manages multiple apps
3:50
be a company that manages multiple apps each with its own notification Hub but
3:52
each with its own notification Hub but
3:52
each with its own notification Hub but all grabbed under a single name space
3:54
all grabbed under a single name space
3:54
all grabbed under a single name space for each of management uh then we have
3:58
for each of management uh then we have
3:58
for each of management uh then we have hubs a hub is a single instance of aure
4:01
hubs a hub is a single instance of aure
4:01
hubs a hub is a single instance of aure notification hubs that enables you to
4:04
notification hubs that enables you to
4:04
notification hubs that enables you to send push notifications to various
4:06
send push notifications to various
4:06
send push notifications to various platforms such as an IOS and
4:10
platforms such as an IOS and
4:10
platforms such as an IOS and Android Etc the purpose of notification
4:14
Android Etc the purpose of notification
4:14
Android Etc the purpose of notification hubs acts as a central point uh to send
4:17
hubs acts as a central point uh to send
4:17
hubs acts as a central point uh to send push notifications to mobile devices it
4:20
push notifications to mobile devices it
4:20
push notifications to mobile devices it abstracts the platform specific apis and
4:24
abstracts the platform specific apis and
4:24
abstracts the platform specific apis and handles the complexities of multiple
4:26
handles the complexities of multiple
4:26
handles the complexities of multiple push notification platforms uh for for
4:29
push notification platforms uh for for
4:29
push notification platforms uh for for instance an app named news app could
4:33
instance an app named news app could
4:33
instance an app named news app could have a single notification Hub to manage
4:35
have a single notification Hub to manage
4:35
have a single notification Hub to manage and send notification across both IOS
4:38
and send notification across both IOS
4:38
and send notification across both IOS and Android
4:40
and Android
4:40
and Android platforms and then we have
4:42
platforms and then we have
4:42
platforms and then we have registrations uh a registration is a
4:45
registrations uh a registration is a
4:45
registrations uh a registration is a device specific entry in a notification
4:48
device specific entry in a notification
4:48
device specific entry in a notification Hub each device that needs to receive
4:51
Hub each device that needs to receive
4:51
Hub each device that needs to receive push notification must register itself
4:54
push notification must register itself
4:54
push notification must register itself with the Hub registrations are used to
4:57
with the Hub registrations are used to
4:57
with the Hub registrations are used to store device tokens or handles that are
5:00
store device tokens or handles that are
5:01
store device tokens or handles that are required to send notifications to the
5:03
required to send notifications to the
5:03
required to send notifications to the respective devices they also include any
5:06
respective devices they also include any
5:06
respective devices they also include any Tex that specify which notifications a
5:09
Tex that specify which notifications a
5:09
Tex that specify which notifications a device should receive uh we have uh two
5:13
device should receive uh we have uh two
5:13
device should receive uh we have uh two types of
5:14
types of
5:14
types of registrations uh with Native
5:16
registrations uh with Native
5:16
registrations uh with Native registration is used when you want to
5:19
registration is used when you want to
5:19
registration is used when you want to send platform specific push
5:21
send platform specific push
5:21
send platform specific push notifications and template registration
5:24
notifications and template registration
5:24
notifications and template registration is used to define a payload template for
5:27
is used to define a payload template for
5:27
is used to define a payload template for notifications that allows for
5:29
notifications that allows for
5:29
notifications that allows for localization and
5:33
personalization uh on next we have
5:36
personalization uh on next we have
5:36
personalization uh on next we have tagging and
5:38
tagging and
5:38
tagging and segmentation basically uh this is a very
5:42
segmentation basically uh this is a very
5:42
segmentation basically uh this is a very powerful feature in aure notification
5:44
powerful feature in aure notification
5:44
powerful feature in aure notification hubs that allows you to deliver targeted
5:48
hubs that allows you to deliver targeted
5:48
hubs that allows you to deliver targeted and personalized push notifications to
5:50
and personalized push notifications to
5:50
and personalized push notifications to specific groups of users or devices uh
5:54
specific groups of users or devices uh
5:54
specific groups of users or devices uh these features enable developers to
5:56
these features enable developers to
5:56
these features enable developers to enhance user engagement by sending
5:59
enhance user engagement by sending
5:59
enhance user engagement by sending relevant notifications to users based on
6:03
relevant notifications to users based on
6:03
relevant notifications to users based on their preference Behavior location or
6:06
their preference Behavior location or
6:06
their preference Behavior location or any other
6:07
any other
6:07
any other criteria uh so in Azure notification Hub
6:12
criteria uh so in Azure notification Hub
6:12
criteria uh so in Azure notification Hub tags are labels that you can assign to
6:15
tags are labels that you can assign to
6:15
tags are labels that you can assign to device registrations to group devices or
6:19
device registrations to group devices or
6:19
device registrations to group devices or users with similar interest or
6:22
users with similar interest or
6:22
users with similar interest or characteristics tax allows you to send
6:24
characteristics tax allows you to send
6:24
characteristics tax allows you to send notifications to specific segments of
6:27
notifications to specific segments of
6:27
notifications to specific segments of your user base without changing the app
6:30
your user base without changing the app
6:30
your user base without changing the app code and few key points about tagging
6:34
code and few key points about tagging
6:34
code and few key points about tagging are uh they provide flexible grouping uh
6:38
are uh they provide flexible grouping uh
6:38
are uh they provide flexible grouping uh and TX can be any string value making
6:41
and TX can be any string value making
6:41
and TX can be any string value making them highly flexible tax can represent a
6:44
them highly flexible tax can represent a
6:44
them highly flexible tax can represent a users's location for example New York or
6:47
users's location for example New York or
6:47
users's location for example New York or preferences sports or device type which
6:50
preferences sports or device type which
6:50
preferences sports or device type which is IOS so you can tag anything flexibly
6:54
is IOS so you can tag anything flexibly
6:54
is IOS so you can tag anything flexibly in aure notification Hub uh and then we
6:57
in aure notification Hub uh and then we
6:57
in aure notification Hub uh and then we have Dynamic updates TXS can be updated
7:01
have Dynamic updates TXS can be updated
7:01
have Dynamic updates TXS can be updated dynamically as user Behavior or
7:04
dynamically as user Behavior or
7:04
dynamically as user Behavior or preference changes uh then a single
7:07
preference changes uh then a single
7:07
preference changes uh then a single device can have multiple tags enabling
7:10
device can have multiple tags enabling
7:10
device can have multiple tags enabling complex and high customized
7:12
complex and high customized
7:12
complex and high customized segmentation for instance a user
7:16
segmentation for instance a user
7:16
segmentation for instance a user interested in board technology and
7:18
interested in board technology and
7:18
interested in board technology and finance can receive notification
7:20
finance can receive notification
7:20
finance can receive notification relevant to board topics uh we have uh
7:24
relevant to board topics uh we have uh
7:24
relevant to board topics uh we have uh targeted
7:25
targeted
7:25
targeted notifications by using tags you can send
7:28
notifications by using tags you can send
7:28
notifications by using tags you can send notifications to all devices with a
7:31
notifications to all devices with a
7:31
notifications to all devices with a specific tag for example sending a
7:34
specific tag for example sending a
7:34
specific tag for example sending a notification only to users interested in
7:37
notification only to users interested in
7:37
notification only to users interested in music or uh only the device tags with
7:41
music or uh only the device tags with
7:41
music or uh only the device tags with VIP users so this is how you can uh
7:45
VIP users so this is how you can uh
7:45
VIP users so this is how you can uh specifically Target uh the user for
7:50
specifically Target uh the user for
7:50
specifically Target uh the user for notifications uh next we have
7:52
notifications uh next we have
7:52
notifications uh next we have segmentation basically segmentation is
7:54
segmentation basically segmentation is
7:54
segmentation basically segmentation is the process of dividing your user based
7:57
the process of dividing your user based
7:58
the process of dividing your user based into distinct groups
8:00
into distinct groups
8:00
into distinct groups on specific criteria such as
8:02
on specific criteria such as
8:02
on specific criteria such as demographics behaviors or preference in
8:06
demographics behaviors or preference in
8:06
demographics behaviors or preference in Azure notification hubs uh segmentation
8:09
Azure notification hubs uh segmentation
8:09
Azure notification hubs uh segmentation is achieved using tax allowing you to
8:12
is achieved using tax allowing you to
8:12
is achieved using tax allowing you to tailor your messaging strategy to
8:15
tailor your messaging strategy to
8:15
tailor your messaging strategy to different users groups uh in
8:18
different users groups uh in
8:18
different users groups uh in personalization uh segmentation allows
8:21
personalization uh segmentation allows
8:21
personalization uh segmentation allows you to send personalized notification
8:23
you to send personalized notification
8:23
you to send personalized notification that quarter to the unique interest and
8:26
that quarter to the unique interest and
8:26
that quarter to the unique interest and needs of different user groups uh by
8:29
needs of different user groups uh by
8:29
needs of different user groups uh by sending relative content you can
8:31
sending relative content you can
8:31
sending relative content you can increase user engagement and
8:33
increase user engagement and
8:33
increase user engagement and satisfaction uh segmentation can be used
8:36
satisfaction uh segmentation can be used
8:36
satisfaction uh segmentation can be used on user Behavior based such as ineff
8:38
on user Behavior based such as ineff
8:38
on user Behavior based such as ineff activity or purchase
8:40
activity or purchase
8:40
activity or purchase history uh then we can also uh do geo
8:44
history uh then we can also uh do geo
8:44
history uh then we can also uh do geo targeting segments can be created based
8:47
targeting segments can be created based
8:47
targeting segments can be created based on geographic location to send region
8:50
on geographic location to send region
8:50
on geographic location to send region specific
8:51
specific
8:51
specific notifications uh like local news weather
8:53
notifications uh like local news weather
8:53
notifications uh like local news weather updates or localized
8:56
updates or localized
8:56
updates or localized promotions and very important thing life
8:59
promotions and very important thing life
9:00
promotions and very important thing life cycle marketing segmentation can be used
9:03
cycle marketing segmentation can be used
9:03
cycle marketing segmentation can be used to create user segments based on their
9:06
to create user segments based on their
9:06
to create user segments based on their life cycle stage for example new users
9:09
life cycle stage for example new users
9:09
life cycle stage for example new users returning users and inactive
9:12
returning users and inactive
9:12
returning users and inactive users uh so this is how tagging and
9:16
users uh so this is how tagging and
9:16
users uh so this is how tagging and segmentation
9:18
segmentation
9:18
segmentation Works uh next we have uh sported
9:21
Works uh next we have uh sported
9:21
Works uh next we have uh sported notification
9:24
notification
9:24
notification platforms aure notification hubs support
9:27
platforms aure notification hubs support
9:27
platforms aure notification hubs support a wide range of notification plat forms
9:29
a wide range of notification plat forms
9:29
a wide range of notification plat forms enabling you to send push
9:31
enabling you to send push
9:31
enabling you to send push notifications uh to users across various
9:34
notifications uh to users across various
9:34
notifications uh to users across various devices and operating systems here are
9:38
devices and operating systems here are
9:38
devices and operating systems here are few key supported notification
9:41
few key supported notification
9:41
few key supported notification platforms first of all we have uh Apple
9:45
platforms first of all we have uh Apple
9:45
platforms first of all we have uh Apple push notification Service uh APNs is the
9:49
push notification Service uh APNs is the
9:49
push notification Service uh APNs is the service provided by Apple for sending
9:51
service provided by Apple for sending
9:51
service provided by Apple for sending push notifications to iOS and Mac OS
9:55
push notifications to iOS and Mac OS
9:55
push notifications to iOS and Mac OS devices as your notification hubs
9:58
devices as your notification hubs
9:58
devices as your notification hubs integrate with APNs to allow developers
10:01
integrate with APNs to allow developers
10:01
integrate with APNs to allow developers to send notification to Apple
10:04
to send notification to Apple
10:04
to send notification to Apple devices uh then we have uh Google
10:07
devices uh then we have uh Google
10:07
devices uh then we have uh Google notification service which is Firebase
10:09
notification service which is Firebase
10:09
notification service which is Firebase Cloud
10:10
Cloud
10:10
Cloud messaging we have fcm which was V1 and
10:15
messaging we have fcm which was V1 and
10:15
messaging we have fcm which was V1 and we have GCM which is a current working
10:18
we have GCM which is a current working
10:18
we have GCM which is a current working variant so basically fcm uh formally
10:22
variant so basically fcm uh formally
10:22
variant so basically fcm uh formally known as uh Google Cloud messaging is a
10:25
known as uh Google Cloud messaging is a
10:25
known as uh Google Cloud messaging is a crossplatform messaging solution that
10:27
crossplatform messaging solution that
10:27
crossplatform messaging solution that lets you r L deliver messages at no cost
10:32
lets you r L deliver messages at no cost
10:32
lets you r L deliver messages at no cost asure notification hubs support fcm to
10:35
asure notification hubs support fcm to
10:35
asure notification hubs support fcm to send push notifications to Android
10:37
send push notifications to Android
10:37
send push notifications to Android devices then we have uh Windows
10:40
devices then we have uh Windows
10:40
devices then we have uh Windows notification Service uh wns is a
10:43
notification Service uh wns is a
10:43
notification Service uh wns is a platform specific Service uh provided by
10:46
platform specific Service uh provided by
10:46
platform specific Service uh provided by Microsoft for sending push notifications
10:49
Microsoft for sending push notifications
10:49
Microsoft for sending push notifications to Windows devices aure notification
10:52
to Windows devices aure notification
10:52
to Windows devices aure notification hubs support wns to develop
10:55
hubs support wns to develop
10:55
hubs support wns to develop notifications to Windows Universal
10:58
notifications to Windows Universal
10:58
notifications to Windows Universal platform apps
11:00
platform apps
11:00
platform apps we have a Microsoft push notification
11:02
we have a Microsoft push notification
11:02
we have a Microsoft push notification service which is mpns it's an older
11:06
service which is mpns it's an older
11:06
service which is mpns it's an older notification service for earlier variant
11:08
notification service for earlier variant
11:08
notification service for earlier variant of Windows phone uh it is generally used
11:12
of Windows phone uh it is generally used
11:12
of Windows phone uh it is generally used for legacy applications still running or
11:14
for legacy applications still running or
11:15
for legacy applications still running or Windows phone uh 8.0 or earlier
11:18
Windows phone uh 8.0 or earlier
11:18
Windows phone uh 8.0 or earlier variant we have Amazon device messaging
11:22
variant we have Amazon device messaging
11:22
variant we have Amazon device messaging which is ADM uh ADM is a basically
11:25
which is ADM uh ADM is a basically
11:25
which is ADM uh ADM is a basically notification service provided by Amazon
11:28
notification service provided by Amazon
11:28
notification service provided by Amazon specific specifically for Kindle Fire
11:31
specific specifically for Kindle Fire
11:31
specific specifically for Kindle Fire devices as your notification hubs
11:33
devices as your notification hubs
11:34
devices as your notification hubs support ADM to send push notification to
11:36
support ADM to send push notification to
11:36
support ADM to send push notification to these
11:37
these
11:37
these devices we
11:39
devices we
11:39
devices we have we have uh browser push
11:43
have we have uh browser push
11:43
have we have uh browser push notifications as your notification hubs
11:45
notifications as your notification hubs
11:45
notifications as your notification hubs support web push protocol allowing push
11:48
support web push protocol allowing push
11:48
support web push protocol allowing push notifications to be sent directly to web
11:51
notifications to be sent directly to web
11:51
notifications to be sent directly to web browsers that support push notification
11:54
browsers that support push notification
11:54
browsers that support push notification such as Chrome Firefox and Edge these
11:57
such as Chrome Firefox and Edge these
11:57
such as Chrome Firefox and Edge these are basically uh vapid notification
12:02
are basically uh vapid notification
12:02
are basically uh vapid notification service at the end we have Buu Cloud
12:07
service at the end we have Buu Cloud
12:07
service at the end we have Buu Cloud push so basically uh Buu Cloud push is a
12:11
push so basically uh Buu Cloud push is a
12:11
push so basically uh Buu Cloud push is a popular push notification service in
12:13
popular push notification service in
12:13
popular push notification service in China and it's particularly for Android
12:16
China and it's particularly for Android
12:16
China and it's particularly for Android devices as your notification hubs
12:19
devices as your notification hubs
12:19
devices as your notification hubs support B push to deliver notifications
12:21
support B push to deliver notifications
12:21
support B push to deliver notifications to devices registered with B so these
12:24
to devices registered with B so these
12:24
to devices registered with B so these are uh supported notification platforms
12:28
are uh supported notification platforms
12:28
are uh supported notification platforms by AO push notification
12:31
by AO push notification
12:31
by AO push notification service and we have uh benefits
12:35
service and we have uh benefits
12:35
service and we have uh benefits of a your notification hubs and these
12:39
of a your notification hubs and these
12:39
of a your notification hubs and these several benefits are for developers and
12:41
several benefits are for developers and
12:41
several benefits are for developers and organizations which are looking to
12:43
organizations which are looking to
12:43
organizations which are looking to implement push notifications across
12:46
implement push notifications across
12:46
implement push notifications across multiple
12:47
multiple
12:47
multiple platforms first of all uh aure
12:50
platforms first of all uh aure
12:50
platforms first of all uh aure notification Hub is a cross platform
12:53
notification Hub is a cross platform
12:53
notification Hub is a cross platform push notification service which provide
12:55
push notification service which provide
12:55
push notification service which provide a unique unified API for sending push
12:59
a unique unified API for sending push
12:59
a unique unified API for sending push notifications to multiple platforms such
13:02
notifications to multiple platforms such
13:02
notifications to multiple platforms such as iOS Android Windows as we have
13:05
as iOS Android Windows as we have
13:05
as iOS Android Windows as we have discussed in
13:06
discussed in
13:06
discussed in previous
13:08
previous
13:08
previous slide
13:12
uh form specific apis so you don't have
13:17
uh form specific apis so you don't have
13:17
uh form specific apis so you don't have uh to be worried about APNs or fcm as
13:20
uh to be worried about APNs or fcm as
13:21
uh to be worried about APNs or fcm as your push notification will handle this
13:22
your push notification will handle this
13:22
your push notification will handle this for you uh we have scalability as your
13:26
for you uh we have scalability as your
13:26
for you uh we have scalability as your notification Hub is designed to handle
13:29
notification Hub is designed to handle
13:29
notification Hub is designed to handle massive scale
13:31
massive scale
13:31
massive scale notifications and it can send millions
13:34
notifications and it can send millions
13:34
notifications and it can send millions of push notifications simultaneously to
13:37
of push notifications simultaneously to
13:37
of push notifications simultaneously to to millions of
13:40
to millions of
13:40
to millions of devices uh it also provides
13:42
devices uh it also provides
13:42
devices uh it also provides personalization and targeting uh so it
13:45
personalization and targeting uh so it
13:45
personalization and targeting uh so it supports for tags and templates to
13:47
supports for tags and templates to
13:47
supports for tags and templates to Target specific user segments or
13:50
Target specific user segments or
13:50
Target specific user segments or personalized notifications based on user
13:55
personalized notifications based on user
13:55
personalized notifications based on user preference we have uh Dynamic tag
13:58
preference we have uh Dynamic tag
13:58
preference we have uh Dynamic tag management basically basically tax
14:00
management basically basically tax
14:00
management basically basically tax allows you to group devices and send
14:03
allows you to group devices and send
14:03
allows you to group devices and send notifications to specific segments uh
14:06
notifications to specific segments uh
14:06
notifications to specific segments uh such as users interested in specific
14:08
such as users interested in specific
14:08
such as users interested in specific topics or located in a particular
14:11
topics or located in a particular
14:11
topics or located in a particular geographic
14:12
geographic
14:12
geographic area high availability and
14:16
area high availability and
14:16
area high availability and reliability so Azure is basically robust
14:20
reliability so Azure is basically robust
14:20
reliability so Azure is basically robust infrastructure providing High
14:21
infrastructure providing High
14:21
infrastructure providing High availability and reliability for
14:23
availability and reliability for
14:23
availability and reliability for delivering
14:24
delivering
14:24
delivering notification we have uh Global reach
14:28
notification we have uh Global reach
14:28
notification we have uh Global reach with multiple dat data centers uh with
14:31
with multiple dat data centers uh with
14:31
with multiple dat data centers uh with Azure notification service and it
14:34
Azure notification service and it
14:34
Azure notification service and it basically ensure low latency delivery
14:37
basically ensure low latency delivery
14:37
basically ensure low latency delivery for notifications to users and there is
14:41
for notifications to users and there is
14:41
for notifications to users and there is uh integration with other Azure services
14:44
uh integration with other Azure services
14:44
uh integration with other Azure services so you can seamlessly integrate with
14:47
so you can seamlessly integrate with
14:47
so you can seamlessly integrate with other aure services such as aure app
14:50
other aure services such as aure app
14:50
other aure services such as aure app service aure functions as your logic
14:53
service aure functions as your logic
14:54
service aure functions as your logic apps and as your active
14:56
apps and as your active
14:56
apps and as your active directory and on second loss we have
15:00
directory and on second loss we have
15:00
directory and on second loss we have security and compliance as you know
15:04
security and compliance as you know
15:04
security and compliance as you know assure supports secure communication
15:06
assure supports secure communication
15:07
assure supports secure communication channels and integrates with a your
15:09
channels and integrates with a your
15:09
channels and integrates with a your active directory for authentication and
15:11
active directory for authentication and
15:11
active directory for authentication and authorization so you can ensure handling
15:15
authorization so you can ensure handling
15:15
authorization so you can ensure handling of sensitive data and compliance with
15:18
of sensitive data and compliance with
15:18
of sensitive data and compliance with various regulatory standards making it
15:21
various regulatory standards making it
15:21
various regulatory standards making it suitable for Enterprise
15:23
suitable for Enterprise
15:23
suitable for Enterprise application at the end we have cost
15:26
application at the end we have cost
15:26
application at the end we have cost effective aure provides a cost effective
15:29
effective aure provides a cost effective
15:29
effective aure provides a cost effective solution with a pay ASO uh pricing model
15:33
solution with a pay ASO uh pricing model
15:33
solution with a pay ASO uh pricing model which allows you to only pay for the
15:35
which allows you to only pay for the
15:35
which allows you to only pay for the notifications you send it reduces the
15:38
notifications you send it reduces the
15:38
notifications you send it reduces the cost of business operations with
15:41
cost of business operations with
15:41
cost of business operations with maintaining dedicated push notification
15:44
maintaining dedicated push notification
15:44
maintaining dedicated push notification infrastructure and provide flexibility
15:46
infrastructure and provide flexibility
15:46
infrastructure and provide flexibility to scale up or down based on your
15:51
to scale up or down based on your
15:51
to scale up or down based on your usage uh here are few use cases uh for
15:55
usage uh here are few use cases uh for
15:55
usage uh here are few use cases uh for example we have marketing campaigns so
15:58
example we have marketing campaigns so
15:58
example we have marketing campaigns so using as your notification Hub service
16:01
using as your notification Hub service
16:01
using as your notification Hub service you can send promotional messages
16:03
you can send promotional messages
16:03
you can send promotional messages discounts and offers to targeted
16:05
discounts and offers to targeted
16:05
discounts and offers to targeted customer
16:06
customer
16:06
customer segments uh you can engage your
16:09
segments uh you can engage your
16:09
segments uh you can engage your users by sending notification about new
16:12
users by sending notification about new
16:12
users by sending notification about new content features updates or personalized
16:16
content features updates or personalized
16:16
content features updates or personalized reminders uh we have critical alerts so
16:20
reminders uh we have critical alerts so
16:20
reminders uh we have critical alerts so you can notify users of critical
16:23
you can notify users of critical
16:23
you can notify users of critical information such as security updates
16:26
information such as security updates
16:26
information such as security updates weather alerts or system outages we can
16:29
weather alerts or system outages we can
16:29
weather alerts or system outages we can also use uh push notification for
16:32
also use uh push notification for
16:32
also use uh push notification for transactional messages so we can send
16:35
transactional messages so we can send
16:35
transactional messages so we can send notifications for important transactions
16:37
notifications for important transactions
16:37
notifications for important transactions such as order confirmation payment
16:40
such as order confirmation payment
16:40
such as order confirmation payment receipt or an appointment reminder so
16:43
receipt or an appointment reminder so
16:43
receipt or an appointment reminder so you can use this for many use cases for
16:46
you can use this for many use cases for
16:46
you can use this for many use cases for your Enterprises
16:48
your Enterprises
16:48
your Enterprises application okay now we will have a
16:51
application okay now we will have a
16:51
application okay now we will have a handson demo on Azure notification hub
16:54
handson demo on Azure notification hub
16:54
handson demo on Azure notification hub first of all we will explore how to
16:57
first of all we will explore how to
16:57
first of all we will explore how to create Azure notification hub using aure
17:00
create Azure notification hub using aure
17:00
create Azure notification hub using aure portal we will explore different
17:02
portal we will explore different
17:02
portal we will explore different notification platforms uh we will set up
17:06
notification platforms uh we will set up
17:06
notification platforms uh we will set up web push notifications for JavaScript
17:08
web push notifications for JavaScript
17:08
web push notifications for JavaScript app and we will send the web push from
17:12
app and we will send the web push from
17:12
app and we will send the web push from asp.net core app uh so let me share my
17:16
asp.net core app uh so let me share my
17:16
asp.net core app uh so let me share my screen and we can
17:26
start okay I hope you guys you guys can
17:30
start okay I hope you guys you guys can
17:30
start okay I hope you guys you guys can see my screen now so I already have
17:34
see my screen now so I already have
17:34
see my screen now so I already have opened aure portal if you don't have an
17:38
opened aure portal if you don't have an
17:38
opened aure portal if you don't have an account you can uh sign up with a your
17:42
account you can uh sign up with a your
17:43
account you can uh sign up with a your uh with trial account or you can use PSO
17:46
uh with trial account or you can use PSO
17:46
uh with trial account or you can use PSO subscription model so after uh signing
17:51
subscription model so after uh signing
17:51
subscription model so after uh signing up and then open portal. aso.com so here
17:56
up and then open portal. aso.com so here
17:57
up and then open portal. aso.com so here we can create a new resource click on
17:59
we can create a new resource click on
17:59
we can create a new resource click on create a new
18:03
resource okay so now I need to uh search
18:08
resource okay so now I need to uh search
18:08
resource okay so now I need to uh search for aure notification Hub so let's check
18:12
for aure notification Hub so let's check
18:12
for aure notification Hub so let's check it manually maybe we can find it
18:15
it manually maybe we can find it
18:15
it manually maybe we can find it here or we can search
18:20
from okay let's search
18:23
from okay let's search
18:23
from okay let's search it we can
18:26
it we can
18:26
it we can say as your notif
18:32
H so this is basically a service from
18:35
H so this is basically a service from
18:35
H so this is basically a service from Microsoft so you can select Azure
18:38
Microsoft so you can select Azure
18:38
Microsoft so you can select Azure Services
18:41
only uh let's remove Azure from
18:45
only uh let's remove Azure from
18:45
only uh let's remove Azure from this okay so this is the Azure
18:48
this okay so this is the Azure
18:48
this okay so this is the Azure notification Hub service which is used
18:51
notification Hub service which is used
18:51
notification Hub service which is used for broadcasting push notifications to
18:53
for broadcasting push notifications to
18:54
for broadcasting push notifications to millions of users so uh let's click on
18:57
millions of users so uh let's click on
18:57
millions of users so uh let's click on this we will create a new instance for a
19:01
this we will create a new instance for a
19:01
this we will create a new instance for a your notification Hub
19:07
service okay uh so here is uh create
19:12
service okay uh so here is uh create
19:12
service okay uh so here is uh create window first of all we need to select
19:15
window first of all we need to select
19:15
window first of all we need to select the subscription I will select pay as
19:17
the subscription I will select pay as
19:17
the subscription I will select pay as you go you can select your trial
19:20
you go you can select your trial
19:20
you go you can select your trial subscription or if you are using Pay As
19:22
subscription or if you are using Pay As
19:22
subscription or if you are using Pay As youo then you will have the same step
19:26
youo then you will have the same step
19:26
youo then you will have the same step then we need to select Resource Group so
19:29
then we need to select Resource Group so
19:29
then we need to select Resource Group so I already have one Resource Group which
19:31
I already have one Resource Group which
19:31
I already have one Resource Group which is AES stands for a z essential Series
19:34
is AES stands for a z essential Series
19:34
is AES stands for a z essential Series so I will be using this then we need to
19:37
so I will be using this then we need to
19:37
so I will be using this then we need to provide Nam space details of
19:39
provide Nam space details of
19:39
provide Nam space details of notification hubs so as we have
19:42
notification hubs so as we have
19:42
notification hubs so as we have discussed already uh so this name space
19:45
discussed already uh so this name space
19:45
discussed already uh so this name space is used for grouping multiple
19:47
is used for grouping multiple
19:47
is used for grouping multiple notification hubs uh so this is uh
19:51
notification hubs uh so this is uh
19:51
notification hubs uh so this is uh specifically for your grouping purp so
19:55
specifically for your grouping purp so
19:55
specifically for your grouping purp so you can specify any name space for
19:57
you can specify any name space for
19:57
you can specify any name space for example I can say a
20:00
example I can say a
20:00
example I can say a AES notification Hub then okay so this
20:05
AES notification Hub then okay so this
20:05
AES notification Hub then okay so this is my name
20:07
is my name
20:07
is my name space and here uh basically we create
20:11
space and here uh basically we create
20:11
space and here uh basically we create notification hub for our specific uh app
20:15
notification hub for our specific uh app
20:15
notification hub for our specific uh app or uh specific environment so for
20:19
or uh specific environment so for
20:19
or uh specific environment so for example I'm creating this notification
20:21
example I'm creating this notification
20:21
example I'm creating this notification hub for my mobile
20:24
hub for my mobile
20:24
hub for my mobile app production environment so I will say
20:27
app production environment so I will say
20:27
app production environment so I will say this mobile
20:29
this mobile
20:29
this mobile and then I need to select the location
20:32
and then I need to select the location
20:32
and then I need to select the location where I want to host this service so I
20:34
where I want to host this service so I
20:34
where I want to host this service so I will be using the default which is East
20:37
will be using the default which is East
20:37
will be using the default which is East us uh then we have pricing tier so let's
20:41
us uh then we have pricing tier so let's
20:41
us uh then we have pricing tier so let's see this which pricing tiers are
20:44
see this which pricing tiers are
20:44
see this which pricing tiers are available click on change tier and this
20:47
available click on change tier and this
20:47
available click on change tier and this popup will show we have basically three
20:50
popup will show we have basically three
20:50
popup will show we have basically three tiers F1 which is a free tier this tier
20:54
tiers F1 which is a free tier this tier
20:54
tiers F1 which is a free tier this tier includes 1 million pushes with 500
20:57
includes 1 million pushes with 500
20:57
includes 1 million pushes with 500 active devices
20:59
active devices
20:59
active devices 500 active devices means uh 500 devices
21:04
500 active devices means uh 500 devices
21:04
500 active devices means uh 500 devices which are registered with a your
21:06
which are registered with a your
21:06
which are registered with a your notification Hub so if you will cross uh
21:09
notification Hub so if you will cross uh
21:09
notification Hub so if you will cross uh discount which is 500 then you have to
21:12
discount which is 500 then you have to
21:12
discount which is 500 then you have to upgrade your uh pricing tier otherwise
21:15
upgrade your uh pricing tier otherwise
21:15
upgrade your uh pricing tier otherwise only 500 users will be able to receive
21:18
only 500 users will be able to receive
21:18
only 500 users will be able to receive push
21:19
push
21:19
push notifications uh this is a free service
21:22
notifications uh this is a free service
21:22
notifications uh this is a free service then we have B1 which is basic uh having
21:26
then we have B1 which is basic uh having
21:26
then we have B1 which is basic uh having 10 million push notification
21:29
10 million push notification
21:29
10 million push notification with 200k active devices so this is
21:32
with 200k active devices so this is
21:32
with 200k active devices so this is around uh2 million active devices so uh
21:36
around uh2 million active devices so uh
21:36
around uh2 million active devices so uh which support uh this
21:39
which support uh this
21:39
which support uh this tier have standard tier inside standard
21:44
tier have standard tier inside standard
21:44
tier have standard tier inside standard tier uh basically we have 10 million
21:49
tier uh basically we have 10 million
21:49
tier uh basically we have 10 million include uh pushes we have 10 million
21:51
include uh pushes we have 10 million
21:51
include uh pushes we have 10 million active devices and then we have few
21:55
active devices and then we have few
21:55
active devices and then we have few other uh Services which are bulk
21:57
other uh Services which are bulk
21:57
other uh Services which are bulk operation scheduled push and multi-
22:00
operation scheduled push and multi-
22:00
operation scheduled push and multi- tency but this cost us
22:03
tency but this cost us
22:03
tency but this cost us $200 per month so these are different
22:06
$200 per month so these are different
22:07
$200 per month so these are different Services which you can use uh for our
22:09
Services which you can use uh for our
22:09
Services which you can use uh for our demo purpose we will use the free
22:11
demo purpose we will use the free
22:11
demo purpose we will use the free service which is F1 so select this which
22:15
service which is F1 so select this which
22:15
service which is F1 so select this which is already selected as well then we have
22:18
is already selected as well then we have
22:18
is already selected as well then we have availability zones
22:20
availability zones
22:20
availability zones options uh basically when you will click
22:24
options uh basically when you will click
22:24
options uh basically when you will click on this unable availability zones uh
22:27
on this unable availability zones uh
22:27
on this unable availability zones uh this will basically duplicate your
22:29
this will basically duplicate your
22:29
this will basically duplicate your service on uh different regions and if
22:33
service on uh different regions and if
22:33
service on uh different regions and if there is any uh disaster on specific
22:37
there is any uh disaster on specific
22:37
there is any uh disaster on specific region uh your service will be still
22:39
region uh your service will be still
22:39
region uh your service will be still available from the duplicate region so I
22:43
available from the duplicate region so I
22:43
available from the duplicate region so I this this may have additional cost I
22:46
this this may have additional cost I
22:46
this this may have additional cost I don't need this so I can uh disable this
22:50
don't need this so I can uh disable this
22:50
don't need this so I can uh disable this service and unable disaster recovery so
22:53
service and unable disaster recovery so
22:53
service and unable disaster recovery so I will disable this service as well
22:56
I will disable this service as well
22:56
I will disable this service as well because I'm just doing it for uh demo
22:59
because I'm just doing it for uh demo
22:59
because I'm just doing it for uh demo purpose so let's click on next button
23:02
purpose so let's click on next button
23:02
purpose so let's click on next button this is for tags so you can tag your as
23:05
this is for tags so you can tag your as
23:05
this is for tags so you can tag your as your services here for billing purpose
23:07
your services here for billing purpose
23:07
your services here for billing purpose or for searching purpose and here is the
23:12
or for searching purpose and here is the
23:12
or for searching purpose and here is the review summary so let's click on create
23:16
review summary so let's click on create
23:16
review summary so let's click on create button so as your is basically
23:18
button so as your is basically
23:18
button so as your is basically initialize my deploying
23:33
currently deployment is in progress it
23:35
currently deployment is in progress it
23:35
currently deployment is in progress it will take few
23:43
minutes we have to wait for this
24:05
okay so our notification Hub name space
24:07
okay so our notification Hub name space
24:07
okay so our notification Hub name space is created now it is creating
24:09
is created now it is creating
24:09
is created now it is creating notification Hub so these are two both
24:13
notification Hub so these are two both
24:13
notification Hub so these are two both different things uh this is for example
24:16
different things uh this is for example
24:16
different things uh this is for example if you have uh uh two mobile apps inside
24:20
if you have uh uh two mobile apps inside
24:20
if you have uh uh two mobile apps inside same kind company so you can create a
24:24
same kind company so you can create a
24:24
same kind company so you can create a single name space for one company and
24:27
single name space for one company and
24:27
single name space for one company and then different notification hub for
24:30
then different notification hub for
24:30
then different notification hub for different mobile apps so this is the
24:33
different mobile apps so this is the
24:33
different mobile apps so this is the purpose of name space in notification
24:35
purpose of name space in notification
24:35
purpose of name space in notification Hub
24:38
[Music]
24:43
server deployment is still in progress
25:07
it have been 2
25:12
minutes it will take a little bit few
25:15
minutes it will take a little bit few
25:15
minutes it will take a little bit few time a few more
25:17
time a few more
25:17
time a few more time but we have to wait for this
25:54
deployment still in progress aour is
25:57
deployment still in progress aour is
25:57
deployment still in progress aour is taking a little B more time for
26:01
taking a little B more time for
26:01
taking a little B more time for this sometimes it
26:03
this sometimes it
26:03
this sometimes it takes uh
26:47
okay uh meanwhile uh when Azure is
26:50
okay uh meanwhile uh when Azure is
26:50
okay uh meanwhile uh when Azure is trying to deploy this service uh we can
26:53
trying to deploy this service uh we can
26:53
trying to deploy this service uh we can discuss the uh web application code
26:57
discuss the uh web application code
26:57
discuss the uh web application code which we are going to use for receiving
26:59
which we are going to use for receiving
26:59
which we are going to use for receiving web push notifications on Google Chrome
27:03
web push notifications on Google Chrome
27:03
web push notifications on Google Chrome uh so let's start from this okay first
27:06
uh so let's start from this okay first
27:06
uh so let's start from this okay first of all we have to create service worker.
27:10
of all we have to create service worker.
27:10
of all we have to create service worker. JS so this is basically for receiving
27:14
JS so this is basically for receiving
27:14
JS so this is basically for receiving web push inside your browsers as I am
27:17
web push inside your browsers as I am
27:17
web push inside your browsers as I am not a mobile developer uh so I cannot uh
27:20
not a mobile developer uh so I cannot uh
27:20
not a mobile developer uh so I cannot uh test the mobile push notification so I
27:24
test the mobile push notification so I
27:24
test the mobile push notification so I will be trying to demonstrate this with
27:26
will be trying to demonstrate this with
27:26
will be trying to demonstrate this with web push on
27:29
web push on
27:29
web push on own uh browsers so first of all you need
27:32
own uh browsers so first of all you need
27:32
own uh browsers so first of all you need to create service worker. JS application
27:36
to create service worker. JS application
27:36
to create service worker. JS application and inside this service you have to add
27:40
and inside this service you have to add
27:40
and inside this service you have to add few Events first of all you need to add
27:42
few Events first of all you need to add
27:42
few Events first of all you need to add an event listener for push and this uh
27:47
an event listener for push and this uh
27:47
an event listener for push and this uh event will be receiving event data and
27:50
event will be receiving event data and
27:50
event will be receiving event data and then this data is basically in Json so
27:53
then this data is basically in Json so
27:53
then this data is basically in Json so it will be uh serial deserializing this
27:56
it will be uh serial deserializing this
27:57
it will be uh serial deserializing this data into uh JavaScript objects and then
28:00
data into uh JavaScript objects and then
28:00
data into uh JavaScript objects and then we need to pause these options to show
28:04
we need to pause these options to show
28:04
we need to pause these options to show notification so whenever you will call
28:06
notification so whenever you will call
28:06
notification so whenever you will call this show notification uh a new push
28:09
this show notification uh a new push
28:09
this show notification uh a new push notification will be uh showing inside
28:12
notification will be uh showing inside
28:13
notification will be uh showing inside your
28:14
your
28:14
your browser okay then you also need to add
28:17
browser okay then you also need to add
28:17
browser okay then you also need to add another event listener which is
28:19
another event listener which is
28:19
another event listener which is notification click so whenever any user
28:22
notification click so whenever any user
28:22
notification click so whenever any user will click on that notification the
28:24
will click on that notification the
28:24
will click on that notification the notification will be closed so this is
28:27
notification will be closed so this is
28:27
notification will be closed so this is your service worker uh JS so the purpose
28:31
your service worker uh JS so the purpose
28:31
your service worker uh JS so the purpose of this worker is uh is for working
28:35
of this worker is uh is for working
28:35
of this worker is uh is for working inside your browser in background and
28:38
inside your browser in background and
28:38
inside your browser in background and whenever a new push notification is
28:40
whenever a new push notification is
28:40
whenever a new push notification is received it will uh show you that
28:43
received it will uh show you that
28:43
received it will uh show you that notification next step is you need to
28:45
notification next step is you need to
28:45
notification next step is you need to create an
28:48
create an
28:48
create an app.js and first of all inside this we
28:52
app.js and first of all inside this we
28:52
app.js and first of all inside this we need to register service worker.
28:55
need to register service worker.
28:55
need to register service worker. JS so you whenever we will open open our
28:58
JS so you whenever we will open open our
28:58
JS so you whenever we will open open our application this will register this
29:00
application this will register this
29:00
application this will register this service worker inside your application
29:03
service worker inside your application
29:03
service worker inside your application and from then this service worker will
29:06
and from then this service worker will
29:06
and from then this service worker will be working inside background uh then we
29:10
be working inside background uh then we
29:10
be working inside background uh then we after registering the service worker we
29:12
after registering the service worker we
29:12
after registering the service worker we need to request permission from the
29:15
need to request permission from the
29:15
need to request permission from the browser okay we need to get uh
29:17
browser okay we need to get uh
29:18
browser okay we need to get uh notification permission from the browser
29:20
notification permission from the browser
29:20
notification permission from the browser if permission is granted then we will
29:23
if permission is granted then we will
29:23
if permission is granted then we will show notification if permission is not
29:25
show notification if permission is not
29:25
show notification if permission is not granted we will not show notification
29:28
granted we will not show notification
29:28
granted we will not show notification so okay if permission is granted then we
29:32
so okay if permission is granted then we
29:32
so okay if permission is granted then we need to subscribe to push notification
29:35
need to subscribe to push notification
29:35
need to subscribe to push notification so whenever permission is granted we
29:38
so whenever permission is granted we
29:38
so whenever permission is granted we will be using a weid key so basically
29:42
will be using a weid key so basically
29:42
will be using a weid key so basically weid is a protocol uh for sending push
29:45
weid is a protocol uh for sending push
29:45
weid is a protocol uh for sending push notification from servers to uh web
29:49
notification from servers to uh web
29:49
notification from servers to uh web without using any third party service so
29:52
without using any third party service so
29:52
without using any third party service so with this we will not be using any third
29:54
with this we will not be using any third
29:54
with this we will not be using any third party
29:56
party
29:56
party Service uh so so we will register this
30:00
Service uh so so we will register this
30:00
Service uh so so we will register this device to uh push
30:03
device to uh push
30:03
device to uh push notification we will subscribe for that
30:07
notification we will subscribe for that
30:07
notification we will subscribe for that push notification and if that service uh
30:11
push notification and if that service uh
30:11
push notification and if that service uh is subscribed for push notification and
30:14
is subscribed for push notification and
30:15
is subscribed for push notification and at the end we will generate endpoint and
30:17
at the end we will generate endpoint and
30:17
at the end we will generate endpoint and keys so these endpoint and keys will be
30:21
keys so these endpoint and keys will be
30:21
keys so these endpoint and keys will be used for sending push notification to
30:23
used for sending push notification to
30:23
used for sending push notification to this user as this is uh a
30:29
this user as this is uh a
30:29
this user as this is uh a vapid uh notification protocol so keys
30:32
vapid uh notification protocol so keys
30:32
vapid uh notification protocol so keys are not managed centralized so we will
30:36
are not managed centralized so we will
30:36
are not managed centralized so we will have to manage this for our service we
30:38
have to manage this for our service we
30:38
have to manage this for our service we will only generate these vapid public
30:42
will only generate these vapid public
30:42
will only generate these vapid public key from our uh asure notification Hub
30:46
key from our uh asure notification Hub
30:46
key from our uh asure notification Hub service so this is the code which we be
30:49
service so this is the code which we be
30:49
service so this is the code which we be uh using for showing push
30:52
uh using for showing push
30:52
uh using for showing push notification this is simple index.html
30:55
notification this is simple index.html
30:55
notification this is simple index.html file and I have included this script
30:59
file and I have included this script
30:59
file and I have included this script inside this application so I will run
31:01
inside this application so I will run
31:01
inside this application so I will run this application and my web application
31:05
this application and my web application
31:05
this application and my web application will be subscribed with as your web push
31:08
will be subscribed with as your web push
31:08
will be subscribed with as your web push notifications and then I will send push
31:11
notifications and then I will send push
31:11
notifications and then I will send push notification from asp.net cor MVC
31:14
notification from asp.net cor MVC
31:14
notification from asp.net cor MVC application so but because uh but before
31:18
application so but because uh but before
31:18
application so but because uh but before that we need to check or as your
31:20
that we need to check or as your
31:20
that we need to check or as your notification Hub instance okay so
31:23
notification Hub instance okay so
31:23
notification Hub instance okay so deployment have been completed let's go
31:26
deployment have been completed let's go
31:26
deployment have been completed let's go to the resource
31:30
sorry for
31:34
this okay here you can see that uh
31:38
this okay here you can see that uh
31:38
this okay here you can see that uh notification Hub instance have been
31:42
notification Hub instance have been
31:42
notification Hub instance have been created this is uh the name space for
31:45
created this is uh the name space for
31:45
created this is uh the name space for our notification Hub which is a NH demo
31:48
our notification Hub which is a NH demo
31:48
our notification Hub which is a NH demo and this is notification Hub so we can
31:51
and this is notification Hub so we can
31:51
and this is notification Hub so we can have multiple notification Hub inside
31:53
have multiple notification Hub inside
31:53
have multiple notification Hub inside one name
31:55
one name
31:55
one name space here you can see that activeice
31:57
space here you can see that activeice
31:57
space here you can see that activeice deves are showing total push and here it
32:01
deves are showing total push and here it
32:01
deves are showing total push and here it is showing the uh total limit for push
32:04
is showing the uh total limit for push
32:04
is showing the uh total limit for push notifications for
32:06
notifications for
32:06
notifications for us if we uh scroll down we can see that
32:10
us if we uh scroll down we can see that
32:10
us if we uh scroll down we can see that we have uh APNs which is Apple push
32:14
we have uh APNs which is Apple push
32:14
we have uh APNs which is Apple push notification service so if you want to
32:16
notification service so if you want to
32:16
notification service so if you want to send push notification to
32:19
send push notification to
32:19
send push notification to APNs so you have to create uh APNs
32:23
APNs so you have to create uh APNs
32:23
APNs so you have to create uh APNs account APNs configuration and then you
32:26
account APNs configuration and then you
32:26
account APNs configuration and then you need to add add those details here so as
32:30
need to add add those details here so as
32:30
need to add add those details here so as your notification service will be
32:32
your notification service will be
32:32
your notification service will be collaborating with APNs for sending
32:34
collaborating with APNs for sending
32:35
collaborating with APNs for sending notification to Apple users and likewise
32:38
notification to Apple users and likewise
32:38
notification to Apple users and likewise Windows notification
32:40
Windows notification
32:40
Windows notification service you can enter your package S ID
32:43
service you can enter your package S ID
32:43
service you can enter your package S ID and security key and as your
32:45
and security key and as your
32:45
and security key and as your notification Hub we be sending push
32:47
notification Hub we be sending push
32:47
notification Hub we be sending push notification to wns so likewise we have
32:51
notification to wns so likewise we have
32:51
notification to wns so likewise we have multiple notification platforms we have
32:53
multiple notification platforms we have
32:53
multiple notification platforms we have ADM B uh we have Google so if if you see
32:58
ADM B uh we have Google so if if you see
32:58
ADM B uh we have Google so if if you see Google which is uh fcm Firebase Cloud
33:02
Google which is uh fcm Firebase Cloud
33:02
Google which is uh fcm Firebase Cloud messaging you need private key of your
33:06
messaging you need private key of your
33:06
messaging you need private key of your fcm application you need client email
33:08
fcm application you need client email
33:08
fcm application you need client email and project ID of your fcm and then you
33:11
and project ID of your fcm and then you
33:11
and project ID of your fcm and then you will be able to send notification using
33:14
will be able to send notification using
33:14
will be able to send notification using fcm uh so likewise you can see that as
33:17
fcm uh so likewise you can see that as
33:17
fcm uh so likewise you can see that as your notification Hub provides a unified
33:19
your notification Hub provides a unified
33:19
your notification Hub provides a unified API for sending uh push notifications so
33:23
API for sending uh push notifications so
33:23
API for sending uh push notifications so to all these
33:25
to all these
33:25
to all these platforms for uh demonstration purpose I
33:28
platforms for uh demonstration purpose I
33:28
platforms for uh demonstration purpose I will be using browser web push so here
33:33
will be using browser web push so here
33:33
will be using browser web push so here we will be using this one uh but for
33:36
we will be using this one uh but for
33:36
we will be using this one uh but for using
33:39
this so here we need to enter the
33:42
this so here we need to enter the
33:42
this so here we need to enter the subject name and I need to generate weit
33:48
Keys okay so now we will be using these
33:51
Keys okay so now we will be using these
33:51
Keys okay so now we will be using these keys for sending push notification to
33:55
keys for sending push notification to
33:55
keys for sending push notification to our mobile app I need to enter subject
33:59
our mobile app I need to enter subject
33:59
our mobile app I need to enter subject name so now click on save
34:03
name so now click on save
34:03
name so now click on save button okay notification have updated
34:05
button okay notification have updated
34:05
button okay notification have updated successfully now we will be using these
34:08
successfully now we will be using these
34:08
successfully now we will be using these uh private and public keys for receiving
34:11
uh private and public keys for receiving
34:11
uh private and public keys for receiving and sending notifications so let's copy
34:14
and sending notifications so let's copy
34:14
and sending notifications so let's copy this uh weed public key and I need to uh
34:19
this uh weed public key and I need to uh
34:19
this uh weed public key and I need to uh insert this inside my web application
34:23
insert this inside my web application
34:23
insert this inside my web application code
34:29
so okay so this is my vapid public key
34:34
so okay so this is my vapid public key
34:34
so okay so this is my vapid public key so you guys uh may be confusing about
34:37
so you guys uh may be confusing about
34:37
so you guys uh may be confusing about rapid
34:43
so so we can ask what is
34:51
vapid so basically vapid or voluntary
34:55
vapid so basically vapid or voluntary
34:55
vapid so basically vapid or voluntary application server identif if ation this
34:58
application server identif if ation this
34:58
application server identif if ation this is a protocol which was introduced for
35:02
is a protocol which was introduced for
35:02
is a protocol which was introduced for standardized way to authenticate your
35:04
standardized way to authenticate your
35:04
standardized way to authenticate your service identity to Push
35:06
service identity to Push
35:06
service identity to Push Services okay so this is a voluntarily
35:09
Services okay so this is a voluntarily
35:09
Services okay so this is a voluntarily Service uh for identification there is
35:12
Service uh for identification there is
35:12
Service uh for identification there is uh no third party
35:14
uh no third party
35:14
uh no third party servol for uh sending these push
35:17
servol for uh sending these push
35:17
servol for uh sending these push notifications the browser own services
35:21
notifications the browser own services
35:21
notifications the browser own services like will be used for this service can
35:29
yeah your your screen is not moving I
35:32
yeah your your screen is not moving I
35:32
yeah your your screen is not moving I think your screen sharing
35:33
think your screen sharing
35:33
think your screen sharing stopped okay okay let me uh uh stop my
35:37
stopped okay okay let me uh uh stop my
35:38
stopped okay okay let me uh uh stop my camera
35:39
camera
35:39
camera and let me start my screen
35:49
again when does this issue starts
35:55
[Music]
35:58
can you see
36:10
now Simon is it working fine
36:14
now Simon is it working fine
36:14
now Simon is it working fine now yeah we can see your Azure portal
36:16
now yeah we can see your Azure portal
36:17
now yeah we can see your Azure portal yeah you're inside production mobile
36:18
yeah you're inside production mobile
36:18
yeah you're inside production mobile production now now V code okay okay
36:22
production now now V code okay okay
36:22
production now now V code okay okay that's great so here we need to uh
36:25
that's great so here we need to uh
36:25
that's great so here we need to uh provide webid public key
36:28
provide webid public key
36:28
provide webid public key uh so now I will run this application so
36:31
uh so now I will run this application so
36:32
uh so now I will run this application so I already have one uh extension inside
36:35
I already have one uh extension inside
36:35
I already have one uh extension inside my code so I will be using that just go
36:39
my code so I will be using that just go
36:39
my code so I will be using that just go to index.html file right click and click
36:43
to index.html file right click and click
36:43
to index.html file right click and click on open with live
36:46
on open with live
36:46
on open with live server okay so if I uh inspect this
36:53
service inside
36:56
service inside
36:56
service inside console okay
36:59
console okay
36:59
console okay So currently here you can see that uh
37:01
So currently here you can see that uh
37:01
So currently here you can see that uh notification permission denied uh
37:06
basically let's let me open this inside
37:09
basically let's let me open this inside
37:09
basically let's let me open this inside my
37:13
Chrome okay so if I inspect this and
37:17
Chrome okay so if I inspect this and
37:17
Chrome okay so if I inspect this and console so here you can see that uh I
37:20
console so here you can see that uh I
37:20
console so here you can see that uh I already have granted the permission so
37:23
already have granted the permission so
37:23
already have granted the permission so notification permission granted uh then
37:26
notification permission granted uh then
37:26
notification permission granted uh then service worker registered for this as
37:37
well okay and if you want to see your
37:40
well okay and if you want to see your
37:40
well okay and if you want to see your service worker you can go inside
37:43
service worker you can go inside
37:43
service worker you can go inside application and here you can see that
37:45
application and here you can see that
37:45
application and here you can see that service worker. JS is
37:48
service worker. JS is
37:48
service worker. JS is already so I was uh using this before so
37:52
already so I was uh using this before so
37:52
already so I was uh using this before so that's why it is already
37:55
that's why it is already
37:55
that's why it is already registered Let me refresh it
37:59
registered Let me refresh it
37:59
registered Let me refresh it again okay so now if you see our service
38:03
again okay so now if you see our service
38:03
again okay so now if you see our service worker is running in background and this
38:07
worker is running in background and this
38:07
worker is running in background and this is activated so this service worker will
38:10
is activated so this service worker will
38:10
is activated so this service worker will be used for showing push notification in
38:12
be used for showing push notification in
38:12
be used for showing push notification in background and if I see the console so
38:16
background and if I see the console so
38:16
background and if I see the console so uh notification permission was
38:18
uh notification permission was
38:18
uh notification permission was granted service worker was registered
38:21
granted service worker was registered
38:21
granted service worker was registered and user is also subscribed so here you
38:24
and user is also subscribed so here you
38:24
and user is also subscribed so here you can see that uh this provides me
38:26
can see that uh this provides me
38:26
can see that uh this provides me endpoint which is basically fcm endpoint
38:30
endpoint which is basically fcm endpoint
38:30
endpoint which is basically fcm endpoint uh then we have few Keys as well for
38:33
uh then we have few Keys as well for
38:33
uh then we have few Keys as well for sending push notifications so now we
38:36
sending push notifications so now we
38:36
sending push notifications so now we will be using these keys for sending
38:39
will be using these keys for sending
38:39
will be using these keys for sending push notification from our asp.net cor
38:42
push notification from our asp.net cor
38:42
push notification from our asp.net cor app to web
38:43
app to web
38:43
app to web browser so let's go to vew Studio I
38:47
browser so let's go to vew Studio I
38:47
browser so let's go to vew Studio I already have uh created one push
38:50
already have uh created one push
38:50
already have uh created one push notification service for
38:54
notification service for
38:54
notification service for this so here uh basically you need need
38:57
this so here uh basically you need need
38:57
this so here uh basically you need need one Library which is li. net. HTTP do
39:01
one Library which is li. net. HTTP do
39:01
one Library which is li. net. HTTP do web push so you can install this from
39:03
web push so you can install this from
39:03
web push so you can install this from nugget package manager and after that
39:06
nugget package manager and after that
39:06
nugget package manager and after that you need a Push Service client so you
39:08
you need a Push Service client so you
39:08
you need a Push Service client so you can authenticate this using vapid
39:11
can authenticate this using vapid
39:11
can authenticate this using vapid authentication and here it needs public
39:14
authentication and here it needs public
39:14
authentication and here it needs public key and private key so let's update
39:17
key and private key so let's update
39:17
key and private key so let's update these public and private keys because I
39:20
these public and private keys because I
39:20
these public and private keys because I have created a new instance I already
39:23
have created a new instance I already
39:23
have created a new instance I already have public key so let's update this
39:32
here is my public
39:34
here is my public
39:34
here is my public key and here I need to provide private
39:37
key and here I need to provide private
39:37
key and here I need to provide private key so let's copy that as
39:46
well
39:48
well
39:48
well okay uh so after this uh creating the uh
39:52
okay uh so after this uh creating the uh
39:52
okay uh so after this uh creating the uh Push Service client we need weid
39:55
Push Service client we need weid
39:55
Push Service client we need weid authentication uh and then we will be
39:57
authentication uh and then we will be
39:57
authentication uh and then we will be using as a default authentication for
39:59
using as a default authentication for
40:00
using as a default authentication for this weapon authentication we have a
40:02
this weapon authentication we have a
40:02
this weapon authentication we have a send notification method so this send
40:05
send notification method so this send
40:05
send notification method so this send notification method is getting a push uh
40:08
notification method is getting a push uh
40:08
notification method is getting a push uh subscription uh object and a payload a
40:11
subscription uh object and a payload a
40:11
subscription uh object and a payload a payload is basically Json that we will
40:13
payload is basically Json that we will
40:13
payload is basically Json that we will be sending to the uh user I already have
40:18
be sending to the uh user I already have
40:18
be sending to the uh user I already have integrated this with my home controller
40:20
integrated this with my home controller
40:20
integrated this with my home controller I have created a send push action which
40:22
I have created a send push action which
40:22
I have created a send push action which is HTTP get action and inside this I
40:25
is HTTP get action and inside this I
40:26
is HTTP get action and inside this I have injected uh push notification
40:28
have injected uh push notification
40:28
have injected uh push notification service inside my Constructor you can
40:30
service inside my Constructor you can
40:30
service inside my Constructor you can see this and then I'm calling send
40:33
see this and then I'm calling send
40:33
see this and then I'm calling send notification ASN and now here I need to
40:37
notification ASN and now here I need to
40:37
notification ASN and now here I need to provide few details first of all I need
40:39
provide few details first of all I need
40:39
provide few details first of all I need to send or I need to provide the
40:42
to send or I need to provide the
40:42
to send or I need to provide the endpoint which I have received after uh
40:46
endpoint which I have received after uh
40:46
endpoint which I have received after uh subscribing the push notification from
40:48
subscribing the push notification from
40:48
subscribing the push notification from my browser so I have to update this
40:51
my browser so I have to update this
40:51
my browser so I have to update this currently I am doing all this manually
40:54
currently I am doing all this manually
40:54
currently I am doing all this manually but for your uh real application you
40:57
but for your uh real application you
40:57
but for your uh real application you have to do this automatically because
41:00
have to do this automatically because
41:00
have to do this automatically because vapid is uh independent platform without
41:04
vapid is uh independent platform without
41:04
vapid is uh independent platform without any service so you have to manage all
41:06
any service so you have to manage all
41:06
any service so you have to manage all these things
41:07
these things
41:07
these things manually so let me update these values
41:09
manually so let me update these values
41:09
manually so let me update these values from my
41:13
browser so here I need to copy the
41:16
browser so here I need to copy the
41:16
browser so here I need to copy the endpoint
41:20
first endpoint is basically fcm endpoint
41:24
first endpoint is basically fcm endpoint
41:24
first endpoint is basically fcm endpoint where my uh push notification will be
41:27
where my uh push notification will be
41:27
where my uh push notification will be sent I need o
41:32
key let me update it here and then at
41:36
key let me update it here and then at
41:36
key let me update it here and then at the end I
41:39
the end I
41:39
the end I need p256 DH
41:43
need p256 DH
41:43
need p256 DH key so these keys are for sending push
41:48
key so these keys are for sending push
41:48
key so these keys are for sending push notification okay so now these Keys have
41:51
notification okay so now these Keys have
41:51
notification okay so now these Keys have been updated let's run my
41:53
been updated let's run my
41:53
been updated let's run my application this is basically uh empty
41:56
application this is basically uh empty
41:56
application this is basically uh empty as sp. net cor MVC application that I
41:59
as sp. net cor MVC application that I
41:59
as sp. net cor MVC application that I have created using V studio so you can
42:01
have created using V studio so you can
42:02
have created using V studio so you can create this and then you just need this
42:04
create this and then you just need this
42:04
create this and then you just need this code for sending push
42:06
code for sending push
42:06
code for sending push notification
42:10
okay so here this is let's click on send
42:16
push okay so now you can see that I just
42:19
push okay so now you can see that I just
42:19
push okay so now you can see that I just have received one push which is test
42:22
have received one push which is test
42:22
have received one push which is test notification this is the title of uh
42:25
notification this is the title of uh
42:25
notification this is the title of uh push notification this is hello
42:27
push notification this is hello
42:27
push notification this is hello if I send it
42:29
if I send it
42:29
if I send it again again received uh let me update
42:33
again again received uh let me update
42:33
again again received uh let me update the body of this push to see whether it
42:35
the body of this push to see whether it
42:35
the body of this push to see whether it is working fine or not so I can say
42:38
is working fine or not so I can say
42:38
is working fine or not so I can say hello word
42:42
from as
42:45
from as
42:45
from as your notification
42:48
your notification
42:48
your notification Hub let's run it
42:54
again now click on Sand push
42:58
again now click on Sand push
42:58
again now click on Sand push so now you can see that the body of
43:00
so now you can see that the body of
43:00
so now you can see that the body of notification is Hello World from as your
43:02
notification is Hello World from as your
43:02
notification is Hello World from as your notification Hub and this notification
43:05
notification Hub and this notification
43:05
notification Hub and this notification is receiving inside Google
43:08
is receiving inside Google
43:08
is receiving inside Google Chrome uh so this is how you can send
43:12
Chrome uh so this is how you can send
43:12
Chrome uh so this is how you can send rapid push notification to your web
43:15
rapid push notification to your web
43:15
rapid push notification to your web application web
43:17
application web
43:17
application web push uh I will uh I will uh comment and
43:21
push uh I will uh I will uh comment and
43:22
push uh I will uh I will uh comment and push this code to our existing GitHub
43:24
push this code to our existing GitHub
43:24
push this code to our existing GitHub repo so you guys can access this code
43:27
repo so you guys can access this code
43:27
repo so you guys can access this code for demonstration
43:32
purpose okay so let's come back to the
43:42
slides uh so this was how we have
43:46
slides uh so this was how we have
43:46
slides uh so this was how we have created as your uh push notification or
43:49
created as your uh push notification or
43:49
created as your uh push notification or as your notification H service inside as
43:52
as your notification H service inside as
43:53
as your notification H service inside as your portal then we have uh created a
43:56
your portal then we have uh created a
43:56
your portal then we have uh created a web application
43:57
web application
43:57
web application which which is receiving the push
43:59
which which is receiving the push
43:59
which which is receiving the push notification and then we have created an
44:01
notification and then we have created an
44:01
notification and then we have created an asp.net core MC
44:04
asp.net core MC
44:04
asp.net core MC application which is sending the push
44:08
application which is sending the push
44:08
application which is sending the push notification uh so now let's go to
44:14
slides so let's go to
44:20
slide Simon can you please move to
44:23
slide Simon can you please move to
44:23
slide Simon can you please move to slides
44:30
I'm waiting for Simon Okay so this was
44:33
I'm waiting for Simon Okay so this was
44:33
I'm waiting for Simon Okay so this was Hands-On demo
44:37
Hands-On demo
44:37
Hands-On demo uh okay in uh next
44:41
uh okay in uh next
44:41
uh okay in uh next episode we will talk about realtime
44:44
episode we will talk about realtime
44:44
episode we will talk about realtime communication with Azure signal or
44:47
communication with Azure signal or
44:47
communication with Azure signal or service uh so in this is basically
44:49
service uh so in this is basically
44:49
service uh so in this is basically episode 14 of azure essential series we
44:53
episode 14 of azure essential series we
44:53
episode 14 of azure essential series we will dive into the Azure signal R
44:55
will dive into the Azure signal R
44:55
will dive into the Azure signal R service which is a man managed service
44:57
service which is a man managed service
44:57
service which is a man managed service for adding realtime web functionalities
45:00
for adding realtime web functionalities
45:00
for adding realtime web functionalities to your
45:01
to your
45:01
to your applications we will discover how to
45:03
applications we will discover how to
45:03
applications we will discover how to leverage service ours capabilities to
45:06
leverage service ours capabilities to
45:06
leverage service ours capabilities to enable server client communication with
45:08
enable server client communication with
45:08
enable server client communication with ease this episode is designed for uh web
45:12
ease this episode is designed for uh web
45:12
ease this episode is designed for uh web Developers app developers and solution
45:14
Developers app developers and solution
45:14
Developers app developers and solution architect who are looking to implement
45:16
architect who are looking to implement
45:16
architect who are looking to implement Dynamic responsive and scalable realtime
45:20
Dynamic responsive and scalable realtime
45:20
Dynamic responsive and scalable realtime features in their
45:23
features in their
45:23
features in their project so thank you so much for
45:27
project so thank you so much for
45:27
project so thank you so much for uh watching this episode of azure
45:29
uh watching this episode of azure
45:29
uh watching this episode of azure essential series if you are interested
45:32
essential series if you are interested
45:32
essential series if you are interested to watch the previous episodes of work
45:35
to watch the previous episodes of work
45:35
to watch the previous episodes of work show you can access it from cop Corner
45:39
show you can access it from cop Corner
45:39
show you can access it from cop Corner live aure Essentials uh you can uh see
45:43
live aure Essentials uh you can uh see
45:43
live aure Essentials uh you can uh see the URL in your slides and if you are
45:47
the URL in your slides and if you are
45:47
the URL in your slides and if you are interested to access the code you can
45:49
interested to access the code you can
45:49
interested to access the code you can access my GitHub repo Habib developer
45:52
access my GitHub repo Habib developer
45:52
access my GitHub repo Habib developer slz your essential series and thank you
45:55
slz your essential series and thank you
45:55
slz your essential series and thank you so much again for joining this episode
45:58
so much again for joining this episode
45:58
so much again for joining this episode and for thank you for being the part of
46:01
and for thank you for being the part of
46:01
and for thank you for being the part of seop corner Islamabad chapter uh see you
46:04
seop corner Islamabad chapter uh see you
46:04
seop corner Islamabad chapter uh see you in next episode and have a good day
46:08
in next episode and have a good day
46:08
in next episode and have a good day bye-bye
46:09
bye-bye
46:09
bye-bye [Music]