'use strict'; import React from 'react'; import io from 'socket.io-client'; import QRCode from 'qrcode.react'; export default class Home extends React.Component { constructor(props) { super(props); this.state = { supported: false, registration: null, haveperm: false, connected: false, socket: io.connect() } } componentDidMount() { this.connect(); this.checksupport(); } componentWillUnmount() { this.setState({socket: this.state.socket.removeAllListeners()}); } connect() { let socket = this.state.socket; let room = this.props.id; socket.on('connect', () => { socket.emit('room', room); this.setState({connected: true}); socket.on('disconnect', () => { this.setState({connected: false}); }); }); socket.on('message', (data) => { console.log("Notification: " + data); this.sendNotification(data); }); } sendNotification(data) { let title = data || 'Received a notification!'; let options = { body: 'Notification from Notica', icon: 'img/icon.png', iconUrl: 'img/icon.png', vibrate: [200, 100, 200] }; if (this.state.registration) { console.log(this.state.registration.showNotification(title, options)); } else { console.log(new Notification(title, options)); } } checksupport() { let supported = ('Notification' in window); this.setState({supported: supported}); if (supported) { Notification.requestPermission(permission => { this.checkperm(permission); try { navigator.serviceWorker.register('/js/sw.js').then((reg) => { this.setState({registration: reg}); }); } catch (e) { // If we are on a browser without serviceWorker this.setState({registration: false}); } }); } } checkperm(permission) { if (permission === 'granted') { this.setState({haveperm: true}); } else { this.setState({haveperm: false}); } } render(){ let id = this.props.id; let storSupport = this.props.storSupport; let supported = this.state.supported; let haveperm = this.state.haveperm; let connected = this.state.connected; return (
This browser does not support desktop notifications.
Please give this site permission to display notifications.
this.checkperm(Notification.permission)}>
Check Again
Unable to connect to the Notica server.
Attempting to reconnect...
This page is monitoring for notifications.
}Notica is a Bash function / alias that sends a notification to a tab in your browser when it's ran:
$ long-running-command; notica Finished!
This will wait until the first command completes before running Notica. That way you can go do other things while your long task runs. Then you will recieve a notification on any devices that have the Notica website open with your unique ID.
Run this command:
$ echo 'notica() { curl --data "d:$*" https://notica.us/{id} ; }' >> ~/.bashrc && source ~/.bashrc
Now open this page on any devices you want to receive the notifications on: {'https://notica.us/' + id}
Curl is required to use Notica.
Add this line to your .bashrc
file:
notica() { curl --data "d:$*" https://notica.us/{id} ; }
Source your .bashrc
file to apply the changes:
$ source .bashrc
All done! Now open this page on any devices you want to receive the notifications on: {'https://notica.us/' + id}
Notica uses Local Storage to keep track of your unique ID. If you would like to generate a new random ID, click here.
Here are some different ways to use Notica:
Just run it from your terminal:
$ notica
Add a custom message:
$ notica Hello world!
Get an alert when a command finishes:
$ sudo apt-get update; notica Done!
Get an alert when a command succeeds:
$ make all && notica Success!
Get an alert when a command fails:
$ make all || notica Failed!
Bookmark this page! It is unique to the function in your .bashrc
file.
Notifications will be sent to all open pages with the same ID code in the URL.
Use quotes on messages with special characters:
$ notica "This is awesome :)"
Open this page on your phone:
Notica was written by Tanner Collin after he got tired of checking if his commands were done running.
Notica is free and open-source software: https://github.com/tannercollin/Notica
Thanks to exdevlin for thinking of the name. Thanks to all the devs behind Node.js, React, webpack, and socket.io.