These days many sites have implemented browser notification. Its a new HTML5 feature which can show a quick alert on desktop. Of course users have to first allow the permission for the desktop notification to be displayed. You can see browser supports for notifications here .
What a Browser Notification displays ?
A notification is a small rectangular shaped box comes either at top or bottom right depending on the browser and OS. It looks really cool with its icon and text. It has following information:
- Icon: A square icon displaying the context of the notification
- Title: Contains a few words about the announcement
- Description: A small description about the event/product
- Source: The URL from which the notification comes
How it works ?
We have created an app which can help you to drive notifications from your Google Spreadsheet. It is very easier to edit a spreadsheet and add a notification rather than changing the code. Announcing a product release or asking for a review is way simpler than you ever thought. Just you need to update the Google Spreadsheet and of course you will have to append a row at the beginning.
In the Google Spreadsheet you can find 5 fields: Unique id, Title, Description, URL and Icon. Unique ID is the column which should be always unique, otherwise users won't see the notification. In the icon column you can put your own site's logo or favicon.
- Make a copy of this Google Spreadsheet
- Go to File → make a copy…
- Put your details in the columns and publish the spreadsheet
- To publish go to File → Publish to the web.. → Publish
- Copy the URL present in that popup.
- There is a variable called "URL" present in the downloaded script. Put the copied URL in that variable.
The code contains a JavaScript part which will fetch the info from the published sheet in JSON. It will check whether the unique id of newly added data (from the spreadsheet) is present in the local storage or not. If it does not find then it will show the notification.
How Spreadsheet data is fetched with JavaScript ?
This uses the JS script https://www.google.com/jsapi . We can query a spreadsheet with SQL like syntax. So in this case the script fetches always first two rows. To do that it uses OFFSET and LIMIT.
- OFFSET – to ignore first N number of rows
- LIMIT – To return N number of rows
So the query becomes 'SELECT A,B,C,D,E LIMIT 2 OFFSET 1'
You can know more about query language references here.
