How to implement quick actions home screen for ionic + capacitor app

Ionic Framework Ionic Angular
1

Hey community,

I tried to implement Quick Actions Home Screen for the app (ionic, capacitor, Angular - latest version at the moment). I didn’t find standard plugins for Capacitor to make it possible. I used to try: App, AppLauncher, Platform plugins and called listening events. It didn’t work.

After that I added 1 method to ios/App/App/AppDelegate.swift and saw the first result, but when the app was launched only. If not, could find a solution.

Do you know a solution for quick actions? Looking forward for any help which you could provide.
Many thanks.

  1. ios/App/App/Info.plist
<key>UIApplicationShortcutItems</key>
	<array>
		<dict>
			<key>UIApplicationShortcutItemIconType</key>
			<string>UIApplicationShortcutIconTypeCompose</string>
			<key>UIApplicationShortcutItemSubtitle</key>
			<string>Your app, your way</string>
			<key>UIApplicationShortcutItemTitle</key>
			<string>Customize App Icon</string>
			<key>UIApplicationShortcutItemType</key>
			<string>my.quick.action1</string>
		</dict>
		<dict>
			<key>UIApplicationShortcutItemIconType</key>
			<string>UIApplicationShortcutIconTypeLove</string>
			<key>UIApplicationShortcutItemSubtitle</key>
			<string>Favorite affirmations</string>
			<key>UIApplicationShortcutItemTitle</key>
			<string>View Favorites</string>
			<key>UIApplicationShortcutItemType</key>
			<string>my.quick.action2</string>
		</dict>
	</array>
  1. ios/App/App/AppDelegate.swift:
   func application(_ application: UIApplication, performActionFor shortcutItem: UIApplicationShortcutItem, completionHandler: @escaping (Bool) -> Void) {
       handleQuickAction(shortcutItem)
       completionHandler(true)
   }

  func handleQuickAction(_ shortcutItem: UIApplicationShortcutItem) {
      let bridge = (self.window?.rootViewController as! CAPBridgeViewController).bridge

      switch shortcutItem.type {
      case "my.quick.action1":
          bridge?.eval(js: "window.dispatchEvent(new CustomEvent('openCustomizeIcon'));")
      case "my.quick.action2":
          bridge?.eval(js: "window.dispatchEvent(new CustomEvent('openFavorites'));")
      default:
          print("Quick Action: Unknown action triggered")
      }
  }
  1. src/app/pages/settings-modal/settings-modal.page.ts
ngAfterViewInit() {
    // alert('ngAfterViewInit');

    window.addEventListener('openCustomizeIcon', () => {
        // alert('openCustomizeIcon');
        this.openCustomizeIcon();
    });

    window.addEventListener('openFavorites', () => {
        // alert('openFavorites');
        this.openFavorites();
    });
  }
2

Were you able to get this working? It looks like you were pretty close.

3

Thanks to this post i figured out how do to this (: so thank you, first of all.
The gist:

in AppDelegate:

    func application(_ application: UIApplication, performActionFor shortcutItem: 
        UIApplicationShortcutItem, completionHandler: @escaping (Bool) -> Void) {
        let bridge = (self.window?.rootViewController as! CAPBridgeViewController).bridge
        print("Holy Cow! a quick action has been pressed!")
        bridge?.webView?.evaluateJavaScript("handleQuickAction('"+shortcutItem.type+"')")
        completionHandler(true)
    }

in info.plist

	<key>UIApplicationShortcutItems</key>
	<array>
		<dict>
			<key>UIApplicationShortcutItemType</key>
			<string>im a shortcut type :P</string>
			<key>UIApplicationShortcutItemTitle</key>
			<string>im a title that the user will see on homepage :P</string>
		</dict>
	</array>

and then on JS i just implemented the handleQuickAction on the global windowObject:

    window.handleQuickAction = (type: QuickActions) => {
      console.log('a quick action has been pressed!')
      console.log({ type })
      alert(type)
    }

Cheers!

4

We have just published a plugin for this: Capacitor App Shortcuts Plugin - Capawesome It supports Android and iOS. Feel free to check it out. :raised_hands:

1 Like