Configuring Airship

This is a tutorial on utilizing airship in your web app. This demo includes a non-sensitive SDK & API key for a default Airship demo.

Table of Contents

1. Development Setup
2. Running
3. Dependencies
4. Workflow
5. UX Research

Step 0: Login to your dashboard > Select project

Step 1: Settings > Channels

Step 2: Channels > Web Notifications

Add a title > URL > Img URL > Hit Update

Step 3: Download SDK Bundle

Step 4: Unzip SDK Bundle (anywhere)

Step 5: There should be 3 files within the SDK

Step 6: Copy snippet.html to your index.html / index.php (bottom)

Step 7: Place the push-worker.js into the root directory of index

Step 8: Register a service worker in your index.html / index.php

<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}
</script>

*This is sourced from the Google Developer docs. Make sure to change the .register('/sw.js') to .register('/push-worker.js').

Step 9: Run index.html on a live server. Right click > Inspect > Console > Ensure the service worker registration is successful

Step 10: Also ensure the push worker is showing in the Console > Sources

Step 11: Go to system preferences

Step 12: Make sure notifications are turned on in your settings

Step 13

Run the following code in your server's terminal

To allow notifications for your browser (this is usually ran with a button displayed on the frontend).

To get the user identifier of the browser (usually this works in tandem with the user login info)

Make sure to copy that number.

Step 14: Go back to Airship > Audience > Test Groups

Step 15: Test Groups > Create Test Group

For large scale projects your groups will most likely be sectioned by user-type, etc.

Step 16: Fill in the group name to your choice > Create

Step 17: In that group > Add test user

Step 18: Fill in the details, Click Add

Your User Identifier is the number discovered in Step 13

Step 19: Time to create a message > Messages > Messages Overview

Step 20: Create (in the top right corner)

Step 21: Select Message

Step 22: Select Channel > And select one group of respective user

In this case I chose the All Users group. Normally you would target specific users or test users.

Step 23: What type of message is this > Select > Next

Step 24: Fill in details marked below > Next when done

Step 25: Delivery > Send Now (for testing purposes)

Step 26: Delivery > Web Only > Require Interaction true

This is a UX preference. Select items that match your UX needs.

Step 27: Review and Send > Send Test

Step 28: Send a test message > Test audience > select the group we made in Step 18 > Send

Step 29: Rejoice! Your notif should show up