push

Setting up GitHub on an iMac and creating a project

June 25, 2017 by Simon

Here is my quick guide on setting up new GitHub repository on an iMac adding files and syncing with a repository. Read the GitHub 101 if you are a beginner. Read my BitBucket guide here.

Advertisement:

Why

Using git allows you to make backups, use code versioning, rollback code, use multiple development machines/have multiple users, auto merging code etc.

Github can be cheaper, more flexible and offer more features than something like Dropbox.

How

Create an account at GitHub and Login ( https://github.com/login ).

Don’t forget to set up Two Factor Authentication for extra security.

Enter your Two Factor Authentication code every time you login.

Before you can read or write to your Git repository you need to set up a link between your computer (Mac) and GitHub by Setting up a Secure SSH Key with GitHub. About SSH.

If you have read any of my guides on setting up servers (e.g The quickest way to setup a scalable development IDE and web server, How to buy a new domain and SSL cert from NameCheap, a Server from Digital Ocean and configure it or Connecting to an AWS EC2 Ubuntu instance with Cloud 9 IDE as user ubuntu and root ) you will be familiar with SSH keys.

You can check your existing SSH Keys by typing the following.

ls -al ~/.ssh

1	ls -al ~/.ssh

Follow this GitHub guide on creating a new SSH key to use with GitHub.

I found I had to do the following in the Mac terminal to get this to work.

eval "$(ssh-agent -s)"
mkdir /gitrsatemp
cd /gitrsatemp
sudo ssh-keygen -t rsa -b 4096 -C "simon@fearby.com"
# specify output as /gitrsatemp/githubrsa
# used a passphrase from https://www.grc.com/passwords.htm
mv /gitrsatemp/* ~/.ssh/
cd ~/.ssh/
ssh-add -K ./githubrsa

eval "$(ssh-agent -s)"

mkdir /gitrsatemp

cd /gitrsatemp

sudo ssh-keygen -t rsa -b 4096 -C "simon@fearby.com"

# specify output as /gitrsatemp/githubrsa

# used a passphrase from https://www.grc.com/passwords.htm

mv /gitrsatemp/* ~/.ssh/

cd ~/.ssh/

ssh-add -K ./githubrsa

You can now add your SSH key to GitHub.

cd ~/.ssh/ 
sudo pbcopy < ./githubrsa.pub

1 2	cd ~/.ssh/ sudo pbcopy < ./githubrsa.pub

You can then add your public key to https://github.com/settings/keys

Add the SSH Key.

You can then test the SSH connection to GitHub.

At first, I tried this but got an error.

sudo ssh -T git@github.com
The authenticity of host 'github.com (192.30.255.113)' can't be established.
RSA key fingerprint is SHA256:key_redacted.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added 'github.com,192.30.255.113' (RSA) to the list of known hosts.

sudo ssh -T git@github.com

The authenticity of host 'github.com (192.30.255.113)' can't be established.

RSA key fingerprint is SHA256:key_redacted.

Are you sure you want to continue connecting (yes/no)? yes

Warning: Permanently added 'github.com,192.30.255.113' (RSA) to the list of known hosts.

This is what I got when I added my SSH Key to my GitHub account. This worked for me (this updated my known_hosts file).

sudo ssh -T git@github.com
Hi SimonFearby! You've successfully authenticated, but GitHub does not provide shell access.

1 2	sudo ssh -T git@github.com Hi SimonFearby! You've successfully authenticated, but GitHub does not provide shell access.

Tip: Don’t forget to save adding your SSH Key to GitHub

If you need help contact GitHub.

GitHub Pricing

GitHub offers free public repository pricing or $7 a month for unlimited personal repositories for personal use. Bitbucket is the Atlassian owned alternative to GitHub, they have free repositories for up to 5 users with 1TB.

Read my Setting up BitBucket on an iMac and creating a project guide.

Read on the differences between GitHub and BitBucket.

Create your first test public Repository.

Load https://www.github.com and click Start a Project, or go to https://github.com/new

To specify a Readme file and an ignore file if need be (we can do this later). You will need to be a paid Git member to create private repositories.

When your repository is created it will be ready to upload files: https://github.com/SimonFearby/testgitproject001

Creating a local folder

Create a local folder for the repository etc.

# create a folder on your desktop
cd ~/Desktop/
mkdir testgitproject001
cd testgitproject001/

# Check the git status
git status
fatal: Not a git repository (or any of the parent directories): .git

# the folder is now ready files from the repository.

# create a folder on your desktop

cd ~/Desktop/

mkdir testgitproject001

cd testgitproject001/

# Check the git status

git status

fatal: Not a git repository (or any of the parent directories): .git

# the folder is now ready files from the repository.

Liking the remote repository to the local folder.

First, we need to initialize git locally by typing the following.

git init
> Initialized empty Git repository in /Users/simon/Desktop/testgitproject001/.git/

1 2	git init > Initialized empty Git repository in /Users/simon/Desktop/testgitproject001/.git/

Now we can add the remote “origin” repository to the local repo.

git remote add origin git@github.com:SimonFearby/testgitproject001.git

1	git remote add origin git@github.com:SimonFearby/testgitproject001.git

We can now see connected remote repositories by typing the following

git remote -v
origin	git@github.com:SimonFearby/testgitproject001.git (fetch)
origin	git@github.com:SimonFearby/testgitproject001.git (push)

git remote -v

origin git@github.com:SimonFearby/testgitproject001.git (fetch)

origin git@github.com:SimonFearby/testgitproject001.git (push)

Syncing (Pulling) the Repository

Generally, you want to pull all files from the remote repository after you create it (and the readme file).

git pull origin master

1	git pull origin master

This worked 🙂

# What directory are we in
pwd
/Users/simon/Desktop/testgitproject001

# No files
ls -al
total 0
drwxr-xr-x   3 simon  staff   102 28 Jun 00:19 .
drwx------+ 53 simon  staff  1802 28 Jun 00:00 ..
drwxr-xr-x  10 simon  staff   340 28 Jun 00:21 .git

# Let's get the repo files

git pull origin master
remote: Counting objects: 4, done.
remote: Compressing objects: 100% (3/3), done.
Unpacking objects: 100% (4/4), done.
remote: Total 4 (delta 0), reused 0 (delta 0), pack-reused 0
From github.com:SimonFearby/testgitproject001
 * branch            master     -> FETCH_HEAD
 * [new branch]      master     -> origin/master

# Is the readme is there.
ls -al
total 32
drwxr-xr-x   5 simon  staff    170 28 Jun 00:30 .
drwx------+ 53 simon  staff   1802 28 Jun 00:00 ..
drwxr-xr-x  13 simon  staff    442 28 Jun 00:30 .git
-rw-r--r--   1 simon  staff  11357 28 Jun 00:30 LICENSE
-rw-r--r--   1 simon  staff     49 28 Jun 00:30 README.md

# What directory are we in

pwd

/Users/simon/Desktop/testgitproject001

# No files

ls -al

total 0

drwxr-xr-x 3 simon staff 102 28 Jun 00:19 .

drwx------+ 53 simon staff 1802 28 Jun 00:00 ..

drwxr-xr-x 10 simon staff 340 28 Jun 00:21 .git

# Let's get the repo files

git pull origin master

remote: Counting objects: 4, done.

remote: Compressing objects: 100% (3/3), done.

Unpacking objects: 100% (4/4), done.

remote: Total 4 (delta 0), reused 0 (delta 0), pack-reused 0

From github.com:SimonFearby/testgitproject001

* branch master -> FETCH_HEAD

* [new branch] master -> origin/master

# Is the readme is there.

ls -al

total 32

drwxr-xr-x 5 simon staff 170 28 Jun 00:30 .

drwx------+ 53 simon staff 1802 28 Jun 00:00 ..

drwxr-xr-x 13 simon staff 442 28 Jun 00:30 .git

-rw-r--r-- 1 simon staff 11357 28 Jun 00:30 LICENSE

-rw-r--r-- 1 simon staff 49 28 Jun 00:30 README.md

Pulling, Pushing, Branches and Forking.

You can read more about pulling, pushing, branches and forking here.

This course helped me https://www.udemy.com/learn-android/

Adding your first local file(s) to the repository

Adding all files to the new directory.

git add -A

1	git add -A

Adding a single file:

git add newfilename.txt

1	git add newfilename.txt

Here is an example of adding a new file.

# Create a new file
touch newfilename.txt

#edit the file.
sudo nano newfilename.txt

# Tell git we want this file to be managed
git add newfilename.txt

# What is the status of this repository
git status
On branch master
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

# Create a new file

touch newfilename.txt

#edit the file.

sudo nano newfilename.txt

# Tell git we want this file to be managed

git add newfilename.txt

# What is the status of this repository

git status

On branch master

Changes to be committed:

(use "git reset HEAD <file>..." to unstage)

Set your default commit username (help)

git config --global user.name "Mona Lisa"

1	git config --global user.name "Mona Lisa"

Set your default commit email address (help).

git config --global user.email "email@example.com"

1	git config --global user.email "email@example.com"

Double check config here

git config --global --edit

1	git config --global --edit

You will need to use vim to insert then save changes. I like the nano text editor better so I am changing the default editor.

Setting your default as nano (and not vim)

nano (and not vim)

git config --global core.editor nano

1	git config --global core.editor nano

Submitting (pushing) changes

# Create a new file locally
touch newfilename.txt

# edit the local file
sudo nanonewfilename.txt

# Tell git we want to include it.
git addnewfilename.txt

# commit the file to the remote (origin) server with a commit message
git commitnewfilename.txt -m "addednewfilename.txt"

# Merge all changes with the remote (origin) server
git push origin master

# Create a new file locally

touch newfilename.txt

# edit the local file

sudo nanonewfilename.txt

# Tell git we want to include it.

git addnewfilename.txt

# commit the file to the remote (origin) server with a commit message

git commitnewfilename.txt -m "addednewfilename.txt"

# Merge all changes with the remote (origin) server

git push origin master

The changes have been pushed (merged)

Adding another file.

This is how I added another single file locally and pushed to the remote (origin) server

# Create a new file locally
touch anothernewfile.txt

# edit the local file
sudo nano anothernewfile.txt 

# Tell git we want to include it.
git add anothernewfile.txt 

# commit the file to the remote (origin) server with a commit message
git commit anothernewfile.txt -m "added anothernewfile.txt"

# Merge all changes with the remote (origin) server
git push origin master

# Create a new file locally

touch anothernewfile.txt

# edit the local file

sudo nano anothernewfile.txt

# Tell git we want to include it.

git add anothernewfile.txt

# commit the file to the remote (origin) server with a commit message

git commit anothernewfile.txt -m "added anothernewfile.txt"

# Merge all changes with the remote (origin) server

git push origin master

Now we have two new public files in a repository and locally.

README.md and markdown

Now we need to make the README.MD file look nice and reflect the changes.

More info in markdown formatting here, here, here and here. Here is a good markdown table generator.

I made some changes (see) and pushed to the repository (origin).

# edit the file
sudo nano README.md 

# Tell git we want to commit the changes
git commit README.md -m "edited README.md"

# Merge local changes with the remote repository (origin)
git push origin master

# edit the file

sudo nano README.md

# Tell git we want to commit the changes

git commit README.md -m "edited README.md"

# Merge local changes with the remote repository (origin)

git push origin master

My local README.md markdown changes

# testgitproject001
Simon's Test Git Project 001

# *Added* **two** test __text__ files (~~they are not important~~)

- [x] newfilename.txt
- [x] anothernewfilename.txt
- [ ] notmergedlocalfile.txt

## This is for my (GitHub guide on my blog](https://www.fearby.com/article/setting-up-github-on-an-imac-and-creating-a-project/)

Inline-style: 
![Simon Fearby Avatar](https://fearby.com/Avatar.jpeg "Simon Fearby Avatar")

# testgitproject001

Simon's Test Git Project 001

# *Added* **two** test __text__ files (~~they are not important~~)

- [x] newfilename.txt

- [x] anothernewfilename.txt

- [ ] notmergedlocalfile.txt

## This is for my (GitHub guide on my blog](https://www.fearby.com/article/setting-up-github-on-an-imac-and-creating-a-project/)

Inline-style:

![Simon Fearby Avatar](https://fearby.com/Avatar.jpeg "Simon Fearby Avatar")

This is what is looks like on GitHub after I commit and push

You can use pages on GitHub with markdown to create versioned documentation and help.

Commit and check the git status frequently

It is strongly advisable to frequently commit files (to a staging/not master repository) and check local it status for any issues. Commit as frequently as you remember.

# A forgotten local edit
sudo nano README.md 

# Show a gitstatus report
git status
On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

	modified:   README.md

no changes added to commit (use "git add" and/or "git commit -a")

# A forgotten local edit

sudo nano README.md

# Show a gitstatus report

git status

On branch master

Changes not staged for commit:

(use "git add <file>..." to update what will be committed)

(use "git checkout -- <file>..." to discard changes in working directory)

modified: README.md

no changes added to commit (use "git add" and/or "git commit -a")

You can push or delete changes if need be.

Adding many subfolders and many files.

Let’s say you have just added three subfolders (iOS Project Code (12 files), Android Projet Code (1255 items) and a Windows Desktop Project Code (.NET) folder (27 items) and you want to add them all to the remote repository (origin).

Now we need to add the 1,294 files to the local repository.

We can simply type the following to tell git we want it to manage all the local files.

# Add all sub folders and files in tbhis folder.
git add .

# Show a local status report.
simon$ git status
On branch master
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

	new file:   .DS_Store
	new file:   Android Project Code/.gitignore
	new file:   Android Project Code/.idea/.name
	new file:   Android Project Code/.idea/compiler.xml
	new file:   Android Project Code/.idea/copyright/profiles_settings.xml
.. 1000+ orther files are listed

# Add all sub folders and files in tbhis folder.

git add .

# Show a local status report.

simon$ git status

On branch master

Changes to be committed:

(use "git reset HEAD <file>..." to unstage)

new file: .DS_Store

new file: Android Project Code/.gitignore

new file: Android Project Code/.idea/.name

new file: Android Project Code/.idea/compiler.xml

new file: Android Project Code/.idea/copyright/profiles_settings.xml

.. 1000+ orther files are listed

Now you can merge the files top remote repository (origin).

git push origin master

1	git push origin master

Don’t forget to updates your README.md file with changes.

fyi: GitHub may take a minute or two to show changes.

# Edt the README.md
sudo nano README.md 

# Commit the changed file
git commit README.md -m "edited README.md again"

# merge chnages.
push origin master

# Edt the README.md

sudo nano README.md

# Commit the changed file

git commit README.md -m "edited README.md again"

# merge chnages.

push origin master

Ignoring local files

You may want to ignore local files or folders. In your git folder type. I like to ignore all files with “secret” in the filename.

AWS recommend you ignore secret keys and logs to prevent inadvertent account access via sharing secret keys.

# Edit your repositories ignore file
sudo nano .git/info/exclude

# Add These exclusions
secret*.*
*secret.*
*secert*.*
*.secret*
*.*secret
*.*secret*

# Edit your repositories ignore file

sudo nano .git/info/exclude

# Add These exclusions

secret*.*

*secret.*

*secert*.*

*.secret*

*.*secret

*.*secret*

You can find other things to ignore here. You can setup global ignore list by reading this.

You can see I have created a few secret files and new thirdnewfile.txt (and added it to git) and committed and pushed and the secret files remain local (they will remain local while they match the ignored list).

ls -al
total 112
drwxr-xr-x  15 simon  staff    510 28 Jun 15:31 .
drwx------+ 53 simon  staff   1802 28 Jun 14:53 ..
-rw-r--r--@  1 simon  staff  12292 28 Jun 15:00 .DS_Store
drwxr-xr-x  14 simon  staff    476 28 Jun 15:34 .git
drwxr-xr-x  15 simon  staff    510 28 Jun 14:59 Android Project Code
-rw-r--r--   1 simon  staff  11357 28 Jun 00:30 LICENSE
-rw-r--r--   1 simon  staff    544 28 Jun 15:19 README.md
drwxr-xr-x   6 simon  staff    204 28 Jun 15:00 Windows Desktop Project Code
-rw-r--r--   1 simon  staff     10 28 Jun 14:06 anothernewfile.txt
drwxr-xr-x   5 simon  staff    170 28 Jun 14:49 iOS Project Code
-rw-r--r--   1 simon  staff     17 28 Jun 15:30 my.secret
-rw-r--r--   1 simon  staff     10 28 Jun 01:10 newfilename.txt
-rw-r--r--   1 simon  staff     26 28 Jun 15:23 secertapikey.txt
-rw-r--r--   1 simon  staff     22 28 Jun 15:23 secretfile.txt
-rw-r--r--   1 simon  staff     21 28 Jun 15:31 thirdnewfile.txt

ls -al

total 112

drwxr-xr-x 15 simon staff 510 28 Jun 15:31 .

drwx------+ 53 simon staff 1802 28 Jun 14:53 ..

-rw-r--r--@ 1 simon staff 12292 28 Jun 15:00 .DS_Store

drwxr-xr-x 14 simon staff 476 28 Jun 15:34 .git

drwxr-xr-x 15 simon staff 510 28 Jun 14:59 Android Project Code

-rw-r--r-- 1 simon staff 11357 28 Jun 00:30 LICENSE

-rw-r--r-- 1 simon staff 544 28 Jun 15:19 README.md

drwxr-xr-x 6 simon staff 204 28 Jun 15:00 Windows Desktop Project Code

-rw-r--r-- 1 simon staff 10 28 Jun 14:06 anothernewfile.txt

drwxr-xr-x 5 simon staff 170 28 Jun 14:49 iOS Project Code

-rw-r--r-- 1 simon staff 17 28 Jun 15:30 my.secret

-rw-r--r-- 1 simon staff 10 28 Jun 01:10 newfilename.txt

-rw-r--r-- 1 simon staff 26 28 Jun 15:23 secertapikey.txt

-rw-r--r-- 1 simon staff 22 28 Jun 15:23 secretfile.txt

-rw-r--r-- 1 simon staff 21 28 Jun 15:31 thirdnewfile.txt

GitHub view.

Local Git View

Note the secret files.

GitHub Desktop Application

I checked out the GitHub Desktop application at https://desktop.github.com/.

The downloaded compressed file.

I extracted and copied the app to the Applications folder.

Now I logged into to the application.

Much respect to GitHub for integrating Two Factor Authentication into the login.

Unfortunately, GitHub Desktop thinks I have zero repositories (I have 9 repositories when I log in via the web using the same email address). I contacted support on Twitter but have not had a response yet?

I was able to clone the repository I made via the command line earlier or add a local repository.

I added a new text file (afileaddedwithgithubdesktop.txt) to the folder and GitHub Desktop noticed this new file straight away. I added this file to the repository.

I pushed all local changes to the origin/remote master repository.

All local changes were merged with the remote origin master (I could never do this with Atlassian’s SourceTree application).

Conclusion

Now I can sync up my projects that to GitHub repositories from the terminal and GitHub Desktop application and benefit from the features of git (backups, versioning, rollbacks, multiple machines/multiple users, auto merging etc).

Next

I will add how to pull a repository to a $5 month Digital Ocean and or AWS (Ubuntu) VM.

Read my Setting up BitBucket on an iMac and creating a project guide.

Git repositories on Raspberry Pi’s.

Related guides

Setting up a development environment on Digital Ocean 14.04

https://www.digitalocean.com/community/tutorials/how-to-install-git-on-ubuntu-14-04

Tips and Troubleshooting

GitHub has a good tips page here. I had @GitHubHelp pro-actively contact me for support on Twitter. Contact GitHub here.

How to add all local files and commit all local files.

git add -A && git commit

1	git add -A && git commit

I hope this is helpful to someone.

20 essential git tips.

P.S Don’t edit live code, use GitHub.

Agile Project Management

Read my blog post on developing software and staying on track here.

I highly recommend you follow Dmitri Iarandine at http://joinagile.com/ (Agile Coach, Trainer, Host of Lean and Mean Agile). Podcast. Author of GET HIRED as SCRUM MASTER).

Dmitri can be found here too.

Soundcloud (Lean and Mean Agile Podcast):
https://soundcloud.com/user-364782318

iTunes:
https://itunes.apple.com/au/podcast/lean-and-mean-agile-podcast/id1269551866

YouTube:
https://www.youtube.com/channel/UC00OZqfM9VmznEOTVzrQQxw

Twitter:
http://twitter.com/iarandine

Udemy:
https://www.udemy.com/agile-coaching-101/

Amazon:
https://www.amazon.com/author/iarandine

Donate and make this blog better

Ask a question or recommend an article

v1.7 added info on agile and staying on track,

How to setup and use push notifications to modern web browsers with OneSignal

October 14, 2015 by Simon Fearby

Summary: A customer browses to your site and agrees to receive notifications. Days, weeks or months later you have something to tell the customer. With OneSignal you can send messages to anyone who has visited your site in the past and agreed to receive notifications. Notifications are like SMS’s but they are delivered to web browsers and are free.

Sep 2016 update: This guide was written 1 year ago, it is still valid but some parts are out of date.

http://www.onesignal.com is an awesome service for sending free push notification to iOS, Android etc. Now they offer Google Chrome/Safari push notifications
to your website (on android and desktop). The guide will be updated to offer Safari setup tips as soon as Safari support is out of beta.

Check out the summary of Web Browser notifications (https://onesignal.com/chrome).

As of the 25th, you can send notifications to FireFox (daily build only).

Setting up your account (for newcomers to OneSignal)

You can use OneSignal to send push notifications to mobile apps and or just web browsers. If you already have a iOS App configured in OneSignal skip the steps below (1.x ~ 3.6) and go to step 1 (“Setting up your account (when you already have a OneSignal app for iOS“) below.

1. You will need to have a one signal account (create one)

2. Go to https://documentation.onesignal.com/docs/web-push-setup and click “Generate a GCM API Key”. (in step 3.3 add a description but not an ip). Don’t forget to save you key.

3.1. Now login to OneSignal and click “Add a new app”

3.2. Enter a “name” and click “next“.

3.3. Then click “Website Push” then click “next”

3.4 Enter your “site url” (https://www.website.com), enter your “api key” and path to an 80×80 pixel image on your web server and click “next”

3.5. Click “Website Push” and click next.

3.6 Jump to step 4 below to setup the Website SDK and upload the files to your website.

5. After you complete the steps in 4.x (below) click the”Check My Progress” to test your API key/SDK Setup and configuration.

6. Send a test push notification.

(or)

Setting up your account (when you already have a OneSignal app for iOS)

1. Open your app and click on App Settings then click Configure next to “Chrome Website (GCM)” and add your Site URL, Google Server Api Key and Icon (80×80 px png).

tip: Do not use my https://cloud.fearby.com server and yes you should really have an https site as it is more secure and boosts SEO (see this guide on buying/configuring an SSL cert)

4. One Signal Website SDK Setup

Next, we will follow the One Signal Website SDK portion of the setup (I will be using the HTTPS guide but there is an HTTP guide).

4.1. Download the latest OneSignal Website SDK code from https://github.com/one-signal/OneSignal-Website-SDK/releases

4.2. Open the Zip and upload the following files from the SetupFiles folder to the root of your website ( https://yoursite.com/manifest.json, OneSignalSDKWorker.js, OneSignalSDKUpdaterWorker.js ).

4.3. Update your manifest.json to include the “name“, “short_name” and “gcm_sender_id“.

{
  "name": "<strong>Your Website Name</strong>",
  "short_name": "<strong>websitename</strong>",
  "start_url": "/",
  "display": "<strong>standalone",
  "gcm_sender_id": "123456789</strong>",
  "gcm_user_visible_only": true
}

{

"name": "Your Website Name",

"short_name": "websitename",

"start_url": "/",

"display": "standalone",

"gcm_sender_id": "123456789",

"gcm_user_visible_only": true

}

4.4 Add the following into any page on your website source code that you want notifications to work on. Don’t forget to replace the app id with your one signals app id (found in your OneSignal app dashboard).

<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">head</span><span class="cm-tag cm-bracket">&gt;</span>
  <span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">script</span> <span class="cm-attribute">src</span>=<span class="cm-string">"https://cdn.onesignal.com/sdks/OneSignalSDK.js"</span> <span class="cm-attribute">async</span><span class="cm-tag cm-bracket">&gt;</span><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">&gt;</span>
  <span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">link</span> <span class="cm-attribute">rel</span>=<span class="cm-string">"manifest"</span> <span class="cm-attribute">href</span>=<span class="cm-string">"/manifest.json"</span><span class="cm-tag cm-bracket">&gt;</span>
  
  <span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">&gt;</span>
    <span class="cm-keyword">var</span> <span class="cm-variable">OneSignal</span> <span class="cm-operator">=</span> <span class="cm-variable">OneSignal</span> <span class="cm-operator">||</span> [];

    <span class="cm-variable">OneSignal</span>.<span class="cm-property">push</span>([<span class="cm-string">"init"</span>, {<span class="cm-property">path</span>: <span class="cm-string">"/"</span>, <span class="cm-property">appId</span>: <span class="cm-string">"<strong>b2f7f966-d8cc-11e4-bed1-df8f05be55ba</strong>"</span>, <span class="cm-property">autoRegister</span>: <span class="cm-atom">false</span>}]);
  <span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">&gt;</span>
<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">head</span><span class="cm-tag cm-bracket">&gt;</span>

<head>

var OneSignal = OneSignal || [];

OneSignal.push(["init", {path: "/", appId: "b2f7f966-d8cc-11e4-bed1-df8f05be55ba", autoRegister: false}]);

</script>

</head>

4.5. Consider deleting “autoRegister: false” to have the following popup appear on your site.

Sending Notifications

1. Login to your OneSignal dashboard, open your app dashboard and click on New Push Notification.

If everything is setup you will have a Google Chrome/Safari/iOS/Android/etc Push Notifications linked up to One Signal.

The message should appear on your desktop in seconds.

When a user clicks the message they are taken to your website.

What happens when the user’s Google Chrome browser is closed and a message is sent.

The message does not deliver but as soon as the user opens Google Chrome the message appears (along with other notifications).

How Uses Opt Out

To disable notifications users can opt out.

How to add a html link based opt-in.

You can add this code to allow users to manually subscribe to notifications on your website.

<body>
  <a href="#" id="registerForPushLink">Subscribe to Notifications</a>  
  <script>
  OneSignal.push(function() {
    function registerForPush(event) {
      OneSignal.push(["registerForPushNotifications"], {modalPrompt: true});
      event.preventDefault();
    }
    document.getElementById("registerForPushLink").addEventListener('click', registerForPush, false);

  });
  </script>
</body>

<body>

<a href="#" id="registerForPushLink">Subscribe to Notifications</a>

OneSignal.push(function() {

function registerForPush(event) {

OneSignal.push(["registerForPushNotifications"], {modalPrompt: true});

event.preventDefault();

}

document.getElementById("registerForPushLink").addEventListener('click', registerForPush, false);

});

</script>

</body>

Firefox Alpha Support

Firefox support is in Alpha testing mode but OneSignal inform “Firefox push notification support is in Alpha testing phase. It only works on the nightly channel of Firefox for Desktop OSes (version 44+). Firefox currently does not have a tray icon for missed notifications on Windows or Linux and clicking no a notification currently can not open a new tab yet. These 2 restrictions should be resolved once Firefox 44 is closer to release. Currently subdomain and ‘site url’ are shared with ChromeWeb. Please setup Chrome web before trying out Firefox push.”

Troubleshooting

I copied the wrong project ID from google and when I accepted the browser request to accept notifications and I could not receive notifications?, I un-checked the project in the Google chrome notifications tray icon and then re-checked it and reloaded my page 🙂

Always make sure the Home link is highlighted in the Google Developers Console and look for the project number here (and not the number in the project drop-down area).

Other

Google also allow you to send push messages directly via their servers (check out their guide: https://developers.google.com/cloud-messaging/ )

If this guide has helped please consider donating a few dollars.

Donate and make this blog better

Ask a question or recommend an article

Personal Development Blog

Coding for fun since 1996, Learn by doing and sharing.

Create your own server on UpCloud here

Follow me on Twitter: @FearbySoftware

View My Old Hobby /blog/

View All Posts.

push

Setting up GitHub on an iMac and creating a project

How to setup and use push notifications to modern web browsers with OneSignal

Popular

Security

Code

Tech

Wordpress

General

push

Footer

Popular

Security

Code

Tech

Wordpress

General