In this article, I show you an easy way to set up browser push notifications. fist of all, you have a question what is push notification? let me explain a bit more. Push notification is the fastest way to get up and running with Javascript desktop notifications. Push notifications are messages that can be sent directly to a user’s Desktop via browser.
You can watch the following tutorial and you can continue reading this article.
Follow the Steps given here for setup push notification.
Step 1: You can quickly install Push via npm
npm install push.js –save
Step 2: Update webpack.mix.js
Add following code into webpack.mix.js for copy and publish assets like js in the public directory. you can see the example here
mix.copy('node_modules/push.js/bin/push.min.js',
'public/assets/js/push.min.js');
I hope you know how to use laravel mix. you can watch this video tutorial if you want to know more about the laravel mix.
fire, npm run dev command and publish js.
Step 3: Add assets in blade file
Add script before closing body tag.
<script src="{{ asset('assets/js/push.min.js') }}"></script>
Step 4: Add this code where you want to show a push
// add logo in public dir and use it here
const iconPath = '{{ asset('logo.PNG') }}
Push.create("Hello Shailesh!",{
body: "Welcome to the Dashboard.",
timeout: 5000,
icon: iconPath
});
