Implementation

If you've completed the steps described in the Setup guides, you are now ready to implement our Web library in your app. Our library supports Chrome 59 and higher (desktop) and Chrome 61 (Android) and higher, Opera 47 (desktop & Android) and higher, Firefox 54 (desktop & Android) and higher and Safari on MacOS 10.9 and higher.

Download Library

We distribute this version of our Web library as a jQuery plugin. You will need to add jQuery and other dependencies in order to make this plugin work.

Developing in localhost

For your convenience while developing in your local machine, we have included a simple web server using Node.js. You can of course skip this if you already have a local development environment your you are implementing it already in your own web server. Extract the contents of the jQuery library to your development folder in your computer, then open your terminal and navigate to that folder. In the root of that folder type the following:

npm install

This will install as the module dependencies so you can run a local server for testing purposes. After this you should be able to run the project by typing the following:

node server

If everything is ok you should be able to see it at http://localhost:3333. If you are using it in your own server, copy the contents of the public/ folder to a publicly accessible directory in your server. Then simply access that location to see it in action. Please note that service workers required HTTPS when served from a web server.

Add Dependencies

To make it extremely easy to implement this library, we have chosen to create a jQuery plugin. Obviously you will be required to include jQuery in your website. So go ahead and add the following (can also be a local version of jQuery) to the pages you intend to include our library. Preferably this should be added just before the closing body tag.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

Right after that line you should add the following (again you can use a local version of this file):

<script src="//cdnjs.cloudflare.com/ajax/libs/UAParser.js/0.7.9/ua-parser.min.js"></script>

The library above is needed in order to retrieve some information about your browser required for our library to work.

Then you should grab our library (included in public/resources/js) right after the line above, as follows:

<script src="/resources/js/notificare.jquery.min.js"></script>

Most modern websites already include a Web App Manifest file, if you do not, make sure you copy this one and save its contents in a file called manifest.json in the root directory. Then in your html page, add the following line between the opening and closing head elements:

<link rel="manifest" href="/manifest.json" />

Learn more about Web App Manifest files here.

Finally you need to make sure you add the service worker file located in public/push-worker.js to your root directory. This will be the file that makes your website receive notifications even when it is not open. Learn more about Service Workers files here.

Configuration

Our library by default will lookup for a file named config.json in your root directory. This file will carry the basic configuration needed to use the library. Make sure you replace all the data to match your own:

{
    "appHost": "YOUR_DOMAIN_HERE",
    "appVersion": "1.0",
    "appKey": "YOUR_APP_KEY_HERE",
    "appSecret": "YOUR_APP_SECRET_HERE",
    "soundsDir": "/MY_SOUNDS_FOLDER/",
    "serviceWorker": "push-worker.js",
    "serviceWorkerScope": "./",
    "geolocationOptions": {
        "timeout": 60000,
        "enableHighAccuracy": true,
        "maximumAge": 100000
    }
}

Now open that Web App Manifest file we talked earlier and make sure your replace with your own data:

{
    "name": "Website Push",
    "short_name": "Website Push",
    "display": "standalone",
    "gcm_sender_id": "YOUR SENDER ID",
    "gcm_user_visible_only": true
}

Most important, make sure you add the gcm_sender_id which should be the Sender ID which is found in the Firebase Developer Console, which we covered in the Setup guides.

Initializing the Library

Now let's initialize the plugin, in your web pages make sure you add a javascript snippet like this, just before the closing body element and after the all the dependencies mentioned above:

<script>
    $(document).ready(function(){
        var instance = $('body').notificare();
        ... more code
    });
</script>

After this point, you have instantiated the Notificare library and consequently you can use the instance variable to further interact with the plugin. Please note that you can attach the plugin to any element in your page, here we have chosen to attach it to the body but it is not necessarily what you should do. Also depending on your own website setup you might not include this implementation directly in the HTML page. In most cases developers will want to abstract this implementation in their own JS objects or classes. Keep reading our Implementation guides to dive deeper into all the features included in this library.