DEV Community: William Shepherd

How to Add Push Notifications to a Vue App

William Shepherd — Wed, 22 Dec 2021 23:08:44 +0000

This guide will help you quickly add push notifications to your Vue application (for free) with the OneSignal-Vue plugin. To follow this tutorial, you will need to have some working knowledge of Vue 2 and its tooling. The focus of this guide is to demonstrate how to push a notification to a Vue app. It does not cover how to create a new Vue app; for that, please refer to Vue's documentation on how to create a new Vue project.

Guide Overview

Part 1: Set Up Your OneSignal Account
Web Configuration
Part 2: Configure Your Vue Application
Initializing the OneSignal Vue Plugin
Using the Plugin on Components
Share Your Feedback

Part 1: Set Up Your OneSignal Account

To begin, log in to your OneSignal account. If you don't have a OneSignal account, you can easily create a free account.

Web Configuration

To begin, log in to your OneSignal account and click the _ New App/Website _ button on the dashboard.

Name your app and select Web as your platform.

Click the button labeled, Next: Configure Your Platform so you can choose how you'd like to integrate into your Vue app.

In the Web Configuration window, select the Custom Code integration option and provide a name you'd like to use to refer to your website along with the site URL where the app is hosted. If you don't know your site URL yet, don't worry —you can set it to your localhost and update it once you deploy your Vue app.

In the meantime, enable _ Auto Resubscribe _ by moving the toggle to the right to ensure that your dev build always gets notified even when you clear your browser’s data. You'll also need to enable _ Local Testing _ so that you can receive push notifications on your dev machine.

Click the Save button to continue the configuration process.

In the 4. Upload Files section, click the Download OneSignal SDK Files button to get the service workers needed to receive push notifications or download the SDK files from our Github repository.

Part 2: Configure Your Vue Application

Now, you can follow the instructions that ship with the onesignal-vue package on npm.

Install onesignal-vue in your Vue project using your preferred package manager.

yarn add onesignal-vue
npm install --save onesignal-vue

Extract the service worker files from the archive you downloaded from the OneSignal dashboard and copy the files into your project’s public directory.

Initializing the OneSignal Vue Plugin

Now you can set up the plugin by modifying main.js to import the package and initialize the plugin by setting the appId property to your OneSignal application identifier.

import Vue from "vue";
import OneSignal from "onesignal-vue";

import App from "./App.vue";

Vue.config.productionTip = false;

Vue.use(OneSignal);

new Vue({
  render: h => h(App),
  beforeMount() {
    this.$OneSignal.init({
      appId: "<You OneSignal application identifier",
      allowLocalhostAsSecureOrigin: true,
    });
  },
}).$mount("#app");

Using the Plugin on Components

Once initialized, use the plugin on any component you like. For this tutorial, we're going to call it from the HelloWorld.vue component to present a slide prompt that allows visitors to your site to opt-in to push notifications.

Find the <script> tag and set a callback for the beforeCreate lifecycle hook in the exported object.

import OneSignal from "onesignal-vue";
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  beforeCreate() {
    this.$OneSignal.showSlidedownPrompt();
  },
};

The integration is complete. You can test it out by starting the app using yarn serve then opting into push notifications.

You should have received a test push notification indicating the integration is successful.

Share Your Feedback

We'd love to know what you think of this plugin and answer any additional questions you have. To connect with us, create an issue on GitHub or ping us on the OneSignalDevs Discord server to share your experience. We appreciate any insight you can share to help us better serve Vue.js users!

To stay in the loop with the latest product updates and innovations, follow the OneSignal Developers Twitter. For additional support and dev inspiration, tap into our global developer community.

>> Connect with the OneSignal Developer Community

Using SMS as a Fallback Option for Push Notifications

William Shepherd — Thu, 08 Jul 2021 18:24:07 +0000

Using SMS as a fallback communication channel for users who are not subscribed to push notifications can help you reach a larger portion of your audience while respecting their communication preferences.

For example, a coffee company may use mobile push notifications to let customers know when their order is ready for pickup. To deliver a seamless customer experience for all patrons, they could set up SMS as a fallback communication channel in the event that a customer is not subscribed to push notifications. Doing so will ensure that more customers receive order pickup alerts and also creates a more inclusive and customer-centric brand experience.

This 5-step guide will demonstrate how to compose OneSignal Web Push SDK with the OneSignal Rest API to enable SMS for users who are not subscribed to push notifications on your site. This example is based on the OneSignal + Next.js integration sample app. All of the components needed to implement this use case can be implemented using any web technology and are not limited to Next.js and React.

This guide assumes that you have already configured the OneSignal Twilio integration.

1. Check if the current user has subscribed to push notifications

The OneSignal Web Push SDK provides an asynchronous function, known as isPushNotificationEnabledCallBack, that returns a boolean value that describes if the current user has push notifications enabled. You’ll call this function on the client once the component mounts to the DOM.

2. Tag users who have push notifications disabled

If the user does not have notifications turned on, you'll need to tag the user with some metadata to target them via our Segments feature.

You can tag users by calling the sendTag function made available by our Web Push SDK. The tag name is arbitrary, so I’m using subscribed_to_push as the tag for this example. You can filter users based on these tag values — something you’ll take advantage of when creating a new audience segment.

To enable an SMS notification as a fallback to push notifications, apply the subscribed_to_push tag based on whether or not the user has push notifications enabled.

3. Create an API endpoint that creates an SMS

To control when a notification is sent to the user, you'll need to create an API route to request the OneSignal API to send a notification on demand. You can achieve this with the notifications endpoint on the OneSignal API.

To send a text message notification, construct a request with the following shape.

{
    include_phone_numbers: [“+18001234567”],
    name: "Identifier for SMS",
    sms_from: "Twilio phone number",
    contents: {
    en: "English message",
    cn: "Chinese message"
}

Because I’m using Next.js for this example, I need to add a file to pages/api that exports a function that accepts an HTTP request and response object. In this example, I will set up the route to pull the phone number from the request body, but you can look up your users’ phone numbers instead.

4. Call the API endpoint that creates an SMS

The final step to enable automatic fallback to SMS notifications is to post a request to the route responsible for creating the notification. I will make this request in the callback passed to isPushNotificationsEnabled only when the user does not have push notifications enabled.

A text message will now be sent to the numbers in the request body whenever a user navigates to a page using the OneSignal hook. The phone number is currently hard-coded for demo purposes; you may need to get the number from the app state or perform a server-side lookup for the user’s account information if your site requires that user’s login.

5. Push an SMS to the segment of users who are not subscribed to push notifications

To support sending SMS notifications to all users who have opted out of push notifications, you can create a segment in your OneSignal Dashboard and filter by the tag’s value: subscribed_to_push.

The first step to send messages to all users with push notifications disabled is to create a new segment. I’m naming the segment Opted-out of push notifications and filtering by subscribed_to_push is false and the device type is SMS.

Sending an SMS notification to all users in the segment requires creating a message to send and selecting this new segment as the target.

When you click send, the text message will be sent to everyone in the segment, completing the workflow.

Other Updates on the Horizon

We are in the process of developing a new push-to-SMS retargeting functionality that will enhance our SMS fallback delivery capabilities. If you're interested in trialing this feature and providing feedback to inform our product roadmap, click the link below to learn more about participating in our Beta Program.

>> Learn More About the OneSignal Beta Program

Additional Support

Have questions or need some support getting started? We're here to help. Reach out to us at support@onesignal.com or login to your OneSignal account and send us a message from your dashboard.

How to add push notifications into a Next.js App

William Shepherd — Wed, 16 Jun 2021 19:53:12 +0000

Web push notifications are a versatile channel that can be used to enhance your UX, re-engage users, promote new products or features, ignite engagement, drive revenue, and increase user retention. Compared to traditional channels such as email, web push notifications capture user's attention more quickly and can drive immediate engagement, which is ideal for time-sensitive content. The best part? You can add this powerful communication channel to your Next app for free.

In this guide, I'll show you how to integrate with OneSignal in order to add web push notifications to a React app built using the Next.js framework. This article is written with the assumption that you already know a little bit about Next.js — my focus will be on executing the OneSignal integration. In an effort to make this guide as useful to as many people as possible, I will start from scratch and cover the Next.js app setup process as well as the OneSignal integration and messaging process.

At the time this guide was written, I had the following dependencies installed on my system: macOS 11.3.1 , Node v14.15.1, Yarn 1.22.10, Next.js v10.2.0 (latest at the time of writing). You should be able to follow along so long as you have Node version 14 or later.

Guide Overview

Creating Your Next App
Getting the OneSignal SDK
Adding the OneSignal SDK Script to Your App
Part 1: Initializing the OneSignal SDK
Configuring Your Next App in OneSignal
Part 2: Initializing the OneSignal SDK
Sending & Receiving Notifications
Additional Support & Helpful Resources

If you don't yet have a OneSignal account, create a free account before you begin this guide. Don't worry about configuring your account just yet — simply create your login and password and I'll walk you through the platform setup and initialization process later on in this guide.

Creating Your Next App

Execute yarn create next-app.



╭─iamwillshepherd@ares ~/code/onesignal-nextjs ‹main›
╰─$ yarn create next-app .
yarn create v1.22.10
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...

success Installed "create-next-app@10.2.0" with binaries:
      - create-next-app
[##] 2/2Creating a new Next.js app in /Users/iamwillshepherd/code/onesignal-nextjs.

Installing react, react-dom, and next using yarn...

When the command completes, you should see console output similar to this:



Success! Created onesignal-nexgtjs at /Users/iamwillshepherd/code/onesignal-nextjs
Inside that directory, you can run several commands:

  yarn dev
    Starts the development server.

  yarn build
    Builds the app for production.

  yarn start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd /Users/iamwillshepherd/code/onesignal-nextjs
  yarn dev

✨ Done in 4.75s.

You can check out the excellent Next documentation to learn what this (☝🏾) command does.

Execute yarn dev to verify the app works as expected.



╭─iamwillshepherd@ares ~/code/onesignal-nextjs ‹main*›
╰─$ yarn dev
yarn run v1.22.10
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully

Navigate to the URL returned in the output with your browser of choice.

The expected result when navigating to URL in run output.

Getting the OneSignal SDK

Our platform allows you to integrate with dozens of third parties. Because I'm integrating OneSignal into a React app, I must manually add the SDK service workers to the app. For instructions on how to do so, check out our Custom Code Setup Documentation. To get started, download the OneSignal SDK archive here.

Unzip the archive contents into your project into the public directory of your Next app. The OneSignal Web SDK directory contains service workers that do the heavy lifting of handling notifications. These service workers must be publicly accessible, so we use Next's static file servicing to achieve this.

Ignore the contents of public and __MACOSX. Move all JavaScript files from OneSignal-Web-SDK/ to public/.



╭─iamwillshepherd@ares ~/code/onesignal-nextjs/public ‹main*›
╰─$ mv OneSignal-Web-SDK-HTTPS-Integration-Files/*.js .

Confirm that the files have been moved and then remove the highlighted files.

Finally, cleanup the public directory.



╭─iamwillshepherd@ares ~/code/onesignal-nextjs/public ‹main*›
╰─$ rm -rf __MACOSX OneSignal-Web-*

Adding the OneSignal SDK Script to Your App

The OneSignal SDK script must be loaded to make use of the two service workers. Add the OneSignalSDK script under the Head component in pages/index.js.

Add the following script tag



<head>
  <title>OneSignal + Next.js</title>
  <meta
    name="description"
    content="Integrating OneSignal with a Next.js app."
  />
  <link rel="icon" href="/favicon.ico" />
  <script
    src="https://cdn.onesignal.com/sdks/OneSignalSDK.js"
    async=""
  ></script>
</head>

At this point, you have completed the majority of the web app setup process. The last thing you need to do is initialize an OneSignalSDK instance

Configuring Your Next App in OneSignal

Custom code integrations require a bit of JavaScript code to initialize OneSignal. I'm going to focus on HTTP initialization because more people will be able to follow along. HTTPS initialization is very similar to what I'm covering here, so this guide will still be helpful to you.

OneSignal needs a unique key called appId to initialize the SDK. You can obtain this key by logging into your OneSignal account.

If this is the first time you've logged into your OneSignal account, you will be presented with a welcome page asking you to configure the platform. Create a new app for the Web platform named OneSignal Next.js by filling out the form and selecting _ Web _ as your platform.

Configuring new OneSignal app for the Web platform.

If you've already configured your OneSignal for other apps, you can create a new app by selecting +New App from the apps drop-down menu in your dashboard, as shown below.

Select "New App" from the app dropdown menu in your OneSignal dashboard.

Once you've finished filling out the form, click Next: Configure Your Platform.

Under 1. Choose Integration , select the _ Custom Code _ option and fill out the remaining form fields in the 2. _ Site Setup _ section.

Configuring a custom code web integration in OneSignal.

Note that I'm using http://localhost:3000 for my site URL because my dev server serves the site there. Once you're ready to deploy your site, you would change this URL to point to your domain. You'll also want to double-check that you enable the Local Testing option, allowing the integration to work in a development environment.

Lastly, click the Save to complete the application setup process.

The final page of the app creation process reveals appId in the second script. Copy the content of the second script.

Script needed to initialize OneSignal SDK

Initializing the OneSignal SDK

Next.js uses React to render the app, so I have to handle the initialization of the SDK in a way that works with the framework. React provides a mechanism to perform side effects on page load: useEffect (read the doc to learn more). This hook allows code to execute when the page is mounted, which is necessary to init OneSignal.



useEffect(() => {
    window.OneSignal = window.OneSignal || [];
    OneSignal.push(function () {
        OneSignal.init({
            appId: "b40b7cc7-13dc-4662-8b48-efa668f9b72a",
            notifyButton: {
                enable: true,
            },

            allowLocalhostAsSecureOrigin: true,
        });
    });

    return () => {
        window.OneSignal = undefined;
    };
}, []); // <-- run this effect once on mount

This hook should be located in _app.js

Reloading the app should reveal a new UI element (a circular red button with a bell at the center) at the bottom-right corner of the browser viewport.

The bell button is how site visitors can subscribe to receive notifications.

Sending & Receiving Notifications

Now that you've finished the initialization process, you can create and send your first web push notification directly from your OneSignal dashboard. To test out this new messaging functionality, you'll first need to subscribe to receive notifications in your browser.

Subscribing to Notifications

Subscribe to notifications by clicking on the red button at the bottom right of your screen.

Subscribe to notifications by clicking the button at the bottom right corner of your screen.

A dialogue box will appear at the top of your browser window asking you whether you would like to be shown notifications. Click _ Allow _ to subscribe.

Click "allow" to subscribe to notifications for your Next.js app.

To confirm your subscription, navigate to your OneSignal account and select the _ OneSignal Nextjs _ app. Click the Audience tab from the header menu to view subscribed users.

View your subscriber list by selecting your Next.js app and navigating to the audience tab.

Select All Users from the sub-navigation menu to see a list of all subscribed users for this app.

The "All Users" tab shows a list of your current subscribed users.

At this point, you should be your only subscribed user 😅.

Building Your Message

Now that you have a subscriber, you can use OneSignal to push a web notification. To build a new messaging campaign, selecting _ Messages _ from the main navigation menu and click the blue + _ New Push _ button on the top right corner of the screen.

Create a new web push notification in your OneSignal dashboard.

Fill out the form with your message content and message delivery preferences. You will see a preview of how your notification will look on the right side of your screen.

Build your push notification and preview how it will look.

For testing purposes, our notification is configured to send immediately. The notification preview shows what the message will look like for a Mac user who has subscribed to the site using Chrome. Click the Web: macOS button located below the preview image to see how your notification will look on different platforms.

OneSignal's notification preview tool.

It's important to check the preview for all platforms before pushing a notification so that you can make any necessary formatting adjustments. Because this is a demo, I will push this notification even though the layout is broken for the Android web platform.

Sending Your Notification

When you are finished previewing your notification, click Confirm Message to review your selections and click _ Send Message _ to send it to your subscribers (a.k.a yourself).

Review and send your message.

You should see your notification appear on your desktop. If you entered a URL into the Launch URL form field of the message builder tool, then clicking on your notification should open a browser window with your designated URL destination. In my demo example, I entered the GitHub address for this integration guide.

View your web push notification and click on it to trigger your specified action.

Congratulations! You've successfully completed the Next.js and OneSignal integration process and sent your first web push notification.

Additional Support & Helpful Resources

To learn more about web push notifications and explore customization options, check out our Web Push SDK documentation.

If you are using web notifications in a creative way to improve your Next app UX, we want to hear about it! Tag us in a Tweet @onesignal to share your use cases.

Still have questions or want some help getting started? Email us at support@onesignal.com.