Skip to main content

Local notifications in an Html5 powered iOS app(native)

Ok, so I have already written about why I decided to take the route of building an hybrid(Html5/Native) app, such that I get to know the native environment. So that post also mentions how I have built this Xcode starter project which can serve as a template for building html5 iOS apps using the Ionic framework.  Recently, I wrote about about how that initiative of mine helped someone. and what I have done now is created a branch, Notifications which provides some sample code for adding local notifications to the project. In this post, I am going to talk about what is in the Notifications branch.

Questions

1) Why build a Hybrid app such that I need to write some native code?
Well one of the reasons outlined in my previous post, was that I wanted my app to use local notifications. 


2) But scheduling local notifications is so simple, why add some sample code for it?
Yes scheduling local notifications is simple and this tutorial does a good job of showing how to do it. However when I started working on my first iOS app(My Day Todos), it was a little before mid-2014, so Xcode 6 was still in beta and there was not a lot of stuff for Swift out there.

Solution + explanation

When you run the code from the notifications branch in an iOS simulator or an iOS device, you will be presented with an interface, such as this.


As you can see I am working with a project template generated by using the command ionic start myApp tabs, which at the time generated something like what you see above. Also what you see above is screenshot of the code running in the Xcode simulator that has been rotated to the left. Now lets look at what all those above buttons do and the code that is run when you click on it

Each of the buttons above trigger a function in the Swift based View Controller using the techniques described in this post.

Schedule notifications for test

The purpose of this is just to schedule some local notifications. Clicking that buttons triggers the methods below
private func setTestNotifications(){
    var date = NSDate()
    //4 calls before this
    scheduleNotifications(date.dateByAddingTimeInterval(60), message: "5")
}

private func scheduleNotifications(date: NSDate, message: String) {
    let notification:UILocalNotification = UILocalNotification()
    notification.fireDate = date
    notification.timeZone = NSTimeZone.defaultTimeZone()
    notification.fireDate = date
    notification.soundName = UILocalNotificationDefaultSoundName
    notification.alertBody = message
    UIApplication.sharedApplication().scheduleLocalNotification(notification)
}

Cancel all notifications 

So this does exactly what you think it does i.e. it cancels all notifications. However, I do provide a commented out codesnippet in it, should you want to cancel a specific notification. 
private func cancelNotifications(){
 UIApplication.sharedApplication().cancelAllLocalNotifications()
 /*
 below is the code for cancelling specific notifications
 for n:AnyObject in UIApplication.sharedApplication().scheduledLocalNotifications {
    let not:UILocalNotification = n as UILocalNotification
    let alertBody = not.alertBody!
     if alertBody == "3" {
        UIApplication.sharedApplication().cancelLocalNotification(not)
      }
  }*/
}

Print notifications to console

Again, this does exactly what you would expect it to do i.e. it prints all the scheduled local notifications.
private func printNotifications(){
 for n:AnyObject in UIApplication.sharedApplication().scheduledLocalNotifications {
 let not:UILocalNotification = n as UILocalNotification
 println("alertBody:\(not.alertBody)")
 }
}

So what is next?

Well you are welcome to fork this repo, and you can also clone the repo and you can start working with the Notifications branch to get all that which I have outlined in this post.

Comments

Popular posts from this blog

Upload to AWS S3 from Java API

In this post, you will see code samples for how to upload a file to AWS S3 bucket from a Java Spring Boot app. The code you will see here is from one of my open-source repositories on Github, called document-sharing. Problem Let’s say you are building a document sharing app where you allow your users to upload the file to a public cloud solution. Now, let’s say you are building the API for your app with Spring Boot and you are using AWS S3 as your public cloud solution. How would you do that? This blog post contains the code that can help you achieve that. Read more below,  Upload to AWS S3 bucket from Java Spring Boot app - My Day To-Do (mydaytodo.com)

Html5 based widget for an iOS app: Today extension powered by the Ionic framework

At some point the thought of adding a Widget to my iOS app came to mind which was followed by starting work on adding a widget for my app, My Day Todos . Obviously the first step was to learn how to add a Widget to an iOS app and in that learning process I discovered many things about widgets in iOS first of which was a widget in iOS is a an app extension i.e a  Today Extension . While I am still haven't finished working on the widget for my iOS app, I thought I would take some time out and share what I have learned. In this post, I will share a few important tips and provide an example of how to add a Widget to an iOS app and have the widget UI powered by Html5 via  Ionic framework . I added some code to my Github repo, Html5StarterAppWithSwift in order to show how this can be achieved. There are already too many tutorials out on the Web on how to add a Today extension to an iOS app so I won't be including that here. Instead I will focus on sharing some of the useful tip...

Build a Full-Stack Image Upload App with Node.js, Express, React, and Vite (Beginner Tutorial)

 If you’re new to full-stack web development and want a hands-on project to practice React frontend integration with a Node.js + Express backend , this tutorial is for you. In this guide, we’ll walk through a simple but powerful app that lets users upload images, store them on the server, and display them back in the browser. This project is based on my GitHub repo: node-express-react-simple-fileupload . It’s designed to be beginner-friendly, SEO-optimized, and a great starting point for anyone learning JavaScript full-stack development . 🛠️ Technologies Used Here’s the tech stack powering this project: Node.js – JavaScript runtime for the backend. Express.js – Lightweight web framework for building REST APIs. Multer – Middleware for handling file uploads. CORS – Enables cross-origin requests between frontend and backend. React.js – Frontend library for building user interfaces. Vite – Fast development server and build tool for React. Fetch API – For making HTTP requests ...