The B2 has a great android app and also a great webpage but is missing a great iPhone or iOS app. Thankfully with a few lines of code and Safari's "Add to home screen" you can have a great icon linked "app" for your iPhone:
Notes before you start:
- your Brennan B2 needs a static or never changing IP address. Tips on how to do this can be found on the Brennan website.
- The code will also not survive any official updates, but any created webapp will still work even after an update. You will need to re-do these steps if you wish to make any changes to the icon etc - (18th October UPDATE No longer true, Martin now hosts the icon and changes to the code on the B2 itself).
Steps:
1. Host the following "icon" png file. I suggest a dropbox public folder (howto link).
2. You need to log on to the Brennan and edit index.html file.
This can be found at /var/www My screenshots below, assume editing with vi, but please use which ever method you fill comfortable with, but of of scope for this post.
Add the following 2 lines - making sure you edit the link to the location of your icon file (My dropbox will not be around forever ;-) ):
<link rel="apple-touch-icon" sizes="180x180" href="https://dl.dropboxusercontent.com/u/1531955/apple-touch-icon-180x180.png">
<meta name="apple-mobile-web-app-capable" content="yes">
3. Using Safari, goto the IP address of your B2:
Then click the middle icon "Box with up arrow" to "Share or add Bookmark":
Then click "Add to Home Screen". On the next screen click "Add"
This adds an the webapp icon and allows you to control your B2 as an app seemingly independent from the Safari web browser.
For more on developing iOS webapps I suggest the following links to start with:
- https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
- http://blog.teamtreehouse.com/optimizing-mobile-web-apps-ios
Have fun.
Pat
