Step 1: Complete your Vue.js project
Progressier allows augmenting your Vue.js web app with additional functionality, including push notifications and PWA installation. You can add Progressier to your project once it's ready to go and your app is available at a custom domain.
Step 2: Register for a Progressier account
Progressier is a no-code tool that lets you quickly add new features to Vue.js web apps without any programming. It typically takes just a few minutes to set up Progressier with a Vue.js app.
If you haven’t done so already, create your Progressier account. It comes with a free trial (no credit card required!) so you can test all features free of charge for 14 days without risk.
Step 3: Create your PWA
Progressier will turn your Vue.js project into a PWA. Enter your app's name, tell us how it was built (you might want to choose Vue.js when prompted) and copy-paste your app's URL in the Domain field.
Step 4: Finish setting up your Vue.js PWA
Once logged in to the dashboard, follow the instructions in the Get Started section to complete your Vue.js integration. With Vue.js, it typically takes about 4 minutes.
Step 5: Authorize push notifications
Head back to your app's domain. You should be prompted to allow notifications. If not, click on the Floating Action Button at the bottom-right corner of your app. There are also other widgets you can use to ask users to allow notifications.
Step 6: Notify your device with a test notification
Our Push Composer allows you to compose a notification, select a specific group of users of your Vue.js app to send it to, and even schedule its actual delivery from 15 minutes to 14 days in the future.
Step 7: Sync push subscriptions with user profiles (optional)
Sending the same notification to every user for marketing purposes is one thing. Sending notifications programmatically to a user to react to events in your Vue.js app is another. Luckily, Progressier comes with a solution for both use cases. Simply connect your user data (e.g. a user ID or user email), then call our Push API in your server-side code to send a push notification to a specific user. You don't have to manage push subscriptions on your end.
Why should you add push notifications to your Vue.js web app?
Boosted conversion rates
By delivering personalized and targeted messages to users, push notifications can help increase conversion rates and drive sales. For example, if you have an e-commerce app, you can send push notifications with special offers or discounts to entice users to make a purchase.
Improved user engagement
Push notifications can help keep users engaged with your app by delivering timely and relevant updates and information. This can be especially useful for apps that are used infrequently, as push notifications can help keep the app top-of-mind for users.
Driving traffic to your Vue.js app
Push notifications can provide users with a reason to open the app, which can help drive traffic back to it. For example, if you have a news app, you can send push notifications to alert users to breaking news stories or other updates.
Weighing the cons of using push notifications in your Vue.js app
Users may opt out of receiving push notifications if they find them to be too frequent or irrelevant. Also Google sometimes auto-blocks push notifications for users that frequently block them.
What are the best push services for Vue.js apps?
There are many different push notification service providers to choose from for your Vue.js app, and the best one for you will depend on your specific needs and requirements. Some of the most popular push notification service providers include:
- Firebase Cloud Messaging (FCM): a Google service that allows developers to send messages to their clients. Free but limited capabilities and scaling.
- OneSignal: OneSignal is a cross-platform push notification service that enables developers to send targeted messages to their users. You can compare it with Progressier here.
- Progressier: probably the best option if you develop web apps as it also comes with additional functionality designed to enhance web apps specifically, e.g. targeted push notifications.
- Amazon Simple Notification Service (SNS): This is a flexible, cross-platform messaging service provided by Amazon that supports a wide range of platforms, including Android, iOS, and the web. It offers features such as topic-based subscriptions and message filtering.
Building your own integration with the Web Push API
Creating your own push solution is feasible, but requires some non-trivial engineering. Chances are you'll be better off using an established push service provider. But if you still want to do this yourself, here are the four components you'll need:
1. Widgets to allow push notifications: you can directly call the native push interface. But if users block notifications right here and there, you won't be able to ask them again. Or you can display a widget that tells users why they should allow notifications before actually calling the native browser interface. This is the recommended way to do this.
2. A push subscription database: once a user has allowed push notifications, you'll be given a specific API endpoint for each user. Save it into your database so you can message users later.
3. An interface for preparing the payload of the notification: a push notification is a JSON object with properties such as title, body, and icon which define the content of the notification itself. You must have a user interface that allows you to define these parameters before they're sent to your push queue.
4. A delivery service: if you have more than a few hundred simultaneous recipients, you'll need to build a push queue that takes care of processing push notifications.
On which devices and browsers can push notifications be received?
You can send push notifications to users on most browsers, including Chrome (Windows, Android, macOS), Firefox (Windows, Android, macOS), Edge (Windows, Android, macOS) and Safari (iOS, macOs).
