CapacitorJS 2024: is there a way to add widgets for apps?

is there a way to add widgets for apps, in a cross-platform manner? Or at least for just ios/ just android?

What would be the procedure here? Could I hardcode some native code in the native project version which asks at a specific time to add a widget?

Or do i need to build a plugin to achieve this?

Maybe someone can tell me how hard writing a plugin is, or even just the native code. I am wondering

SOLUTION:
just use native code. It’s not a lot of work!

You’ll need to create the widget itself in native code but you’ll also likely need to use Capacitor to set the data used by the widget as well as to trigger a widget refresh anytime you update it.

I used this plugin for iOS and it worked nicely. For Android I had to use custom code and it was more complicated, but that’s partially because I used an Android ListView in the widget.

There is also this Capacitor plugin that supports iOS and Android but I haven’t tried it.

1 Like

Hey @tetsuwanadam do you have some tips to share on the implementation of the Android you did?

Thanks bud

It’s been several months since I made it so I’m rusty on the exact details but basically…

  • Create the widget itself in native Android code, and get the data to display from SharedPreferences.
  • In the Ionic app, use the @capacitor/preferences plugin to update the data in SharedPreferences as needed. Then use the capacitor-android-intents plugin’s ‘sendBroadcastIntent’ function when you need to trigger a widget update
  • In the Android native app’s MainActivity.java, add a BroadcastReceiver the refreshes the widget when it receives the BroadcastIntent mentioned above.
public class MainActivity extends BridgeActivity {
	private BroadcastReceiver broadcastReceiver;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		IntentFilter intentFilter = new IntentFilter();
		intentFilter.addAction("com.myDomain.myApp.ACTION_REFRESH_WIDGET");
		broadcastReceiver = new BroadcastReceiver() {
			@Override
			public void onReceive(Context context, Intent intent) {
				// If the BroadcastIntent matches the one for refreshing the app's widgets then refresh
				if ("com.myDomain.myApp.ACTION_REFRESH_WIDGET".equals(intent.getAction())) {
					Log.d("MainActivity", "BroadcastIntent for widget refresh received. Intent is: " + String.valueOf(intent));

					// Code to refresh widget
				}
			}
		};
		registerReceiver(broadcastReceiver, intentFilter);
	}

	@Override
	public void onDestroy() {
		super.onDestroy();
		unregisterReceiver(broadcastReceiver);
	}

	// Other MainActivity code…
}

Honestly I found it all pretty complicated and it took a long time to implement. I would take a good look at the second Capacitor plugin I mentioned in the previous post and see what it can do for you.

2 Likes

Thank you so much for replying so quickly!
I looked into it but I couldn’t find any instructions or explanation on the implementation.

But you my friend, gave some something to work with, thaaaaank you so much.
:raised_hands: :fireworks: