How to build a Today Widget / App Extension with Ionic?


#1

An app I am working on needs a Today Extension / Widget.
Are there any resources on how to build one into an Ionic app?

I found this, but it’s not written very clearly and from what I understood seems to be a native app that only uses a HTML5 element in the app and widget to display some data :confused:


#2

No reponse, almost no views - Today Widgets seem to be a very interesting topic for Ionic/Cordova developers :slight_smile:

Extensive googling (and asking in Ionic and Cordova Slack) didn’t return any further leads, so it probably hasn’t been tried yet or just isn’t possible. Well, I go on the journey to understand how you would create a Today widget natively alone then - and later see how I maybe can adapt this into an Cordova/Ionic app.

A nice tutorial on how to build a Today widget natively:

Using the first few steps I actually can add a “Hello world” Today widget to a Cordova iOS project (/platforms/ios/projectname.xcodeproj) - great first result. Now I “only” have to find out if and how I can include a webview there and how this can access the same data as my app…


#3

After getting a first impression by the raywenderlich tutorial how all the Today Extension stuff natively works (Extensions are basically small, independent apps that are embedded into the main app) I looked at “html5 based widget” post and app again:


Now this makes more sense:

The author built a Swift app that uses a WebView (not Cordova!) to display an Ionic 1 app (from /www). He also has a Today Extension that displays a Ionic 1 app in a WebView. To make the Ionic 1 files accessible he has to copy it in a build step of the Extension. (And he did a lot of unrelated things with notifications and share extension that I don’t care about right now. Also the chart he is using seems to break Ionic header and footer a bit…)

Making the project work with current XCode needs some kind of conversion (I think he used an earlier Swift version…) but it actually runs on the simulator. The app works and the today extension actually displays the widget.html with the charts!

Problem is: It doesn’t work on my real test device! There I only get a black rectangle instead of the white webview showing the page.

I opened an issue with the project on GitHub, asking the author if he actually tried it on a real device and not only a simulator back when he wrote the post.

Today Extensions seem to be really ‘light’ in that they get killed and mangled very fast when they use too much (>16 MB!) memory which causes all kind of funny behaviour or “Unable to Load” messages. Also they seem to be “a bit” hard to debug as there is no console output from them. Doesn’t help that I have no idea about XCode in the first place.


#4

Sidenote:

Before I noticed that the “html5 based widget” example code only works in the simulator and not on real devices I spent a few hours replicating the Today Extension with Webview in my Cordova project. There it also works in the simulator, showing my main index.html of an Ionic 2 app, but on the real device I don’t even see the WebView but the Widget crashes and only displays “Unable to Load” :confused:

Simulator:

Real Device:


#5

If anyone is reading this: Here you can have a look at the Ionic/Cordova project I tried to expand: https://github.com/piotrowski/ionic-ios-today-extension The commit messages include all actions/changes that I did in XCode (so I actually remember the next time…).

Well, next step was to build a pure Swift project to understand when things start to go south and make sure I didn’t mess up anything else on the way (remember: first time building a native app).

  1. Auto Layout is so painful when you have no idea what you are doing
  2. Most example code online is old and broken. So so broken.
  3. XCode is a bitch (seriously, how can you work with this?)

But, I made it work! Here is my project that contains a Webview in both the main app and the widget:

Both show a super simple HTML file I created in the project with no additional functionality.

Next steps:

  • External URLs?
  • Cordova?
  • WKWebView?
  • Communication between main app and widget?

#6

Loading https://www.ft.com crashes the widget instantly :confused:


#7

I just read through this and I admire your dedication to the topic.

Please keep on researching!

You are on the right track though, you’ve definitely nailed that it’s a native thing, not usually meant to be a hybrid thing. External URLs are probably expected to crash, I doubt they want external resources loaded like that.

Communication between the app and widget might be able to be accomplished by something like MMWormHole, but I caution that this isn’t super easy. It’s more native code, because there is a middle-man extension that has to run to fetch and handle data.

A better option to start with might be to try and sync data with a common database between the app and the extension.

I look forward to seeing more progress, keep up the good work :slight_smile:


#8

Actually it really is a memory thing - small external pages are almost no difference to local files. But ft.com is just much too big. As in apps itself there seem to be no further restrictions to what WebView can call (except it has to be https by default now).

I stumbled over MMWormHole, too - I think it was mainly used for communicating with the Apple Watch in Cordoa projects. Native iOS projects have the same problem, communication between host app and widget is quite complicated.
Most seem to use NSUserDefaults (or something like that), a key-value-store for app settings. There are plugins for Cordova to write and read that, so if I get Cordova to work in there this could be a solution.

That was my first idea, too - but as far as I understood it after reading some posts on native development of these widget it won’t be that easy as the main app and widget don’t share a “context” - so they even can’t access the same files and databases. That’s the reason for NSUserDefault and similar.

Thanks!

One of the things I have no idea about at all yet is how to add this to a Ionic/Cordova project without manual intervention :confused:


#9

NSUserDefaults I think runs into the same problem though with the contexts, I got something working a long time ago but I can’t remember what I did :sob:

I know cordova is working on some more stuff to manage projects, but yeah, for adding targets and such it gets really time consuming


#10

I just wanted to say thanks for your hard work so far, Susan. I’ve been assigned a project that needs this as well. I will post any progress that I make here on this thread!


#11

Awesome!

Check out this issue on my GH repo where some nice additional building blocks have been posted:

I also got an awesome response on StackOverflow with a plugin that solves part of the problem:

Good luck!