Showing posts with label iOS. Show all posts
Showing posts with label iOS. Show all posts

Jul 24, 2020

Troubleshooting Custom Capacitor Plugin: No such module 'PushNotifications'

As a Capacitor hybrid app developer, default plugins offered by Capacitor can be not enough to achieve what we want for our project.

For beginner like me, who hope to create a simple custom plugin, set aside Javascript related code, it can be a tough experience as we have to learn and put into practise for both Android and iOS build.

Building a custom plugin for Capacitor (Ionic)

Fortunately, Capacitor has built-in API we could use to build any custom plugin.

No such module 'PushNotifications' (iOS)

On one of my custom plugin, it has dependency on Pusher's client iOS SDK which is imported through cocoapod. Running app "build" on xcode on this plugin is successful.

On my ionic app project folder, when import the created custom plugin causes error, and I get 
"No such module 'PushNotifications'
for importing the custom plugin. Which it's weird as I've checked and certain PushNotifications plugin installed in pods folder on both the actual app project and in the custom plugin.

When I navigate inside xcode Pods project, I'm able to see PushNotifications library correctly placed under pods folder.



Solution:

1. In the Capacitor custom plugin folder, find the .podspec file (usually located at root folder of your Plugin project), and add s.xcconfig to your podspec file, it's added to tell xcode about where to look the PushNotifications framework required by this plugin in your main project.
	
		
  require 'json'

  package = JSON.parse(File.read(File.join(__dir__, 'package.json')))

  Pod::Spec.new do |s|
    s.name = 'CapacitorPusherBeams'
    s.version = package['version']
    s.summary = package['description']
    s.license = package['license']
    s.homepage = package['repository']['url']
    s.author = package['author']
    s.source = { :git => package['repository']['url'], :tag => s.version.to_s }
    s.source_files = 'ios/Plugin/**/*.{swift,h,m,c,cc,mm,cpp}'
    s.ios.deployment_target  = '11.0'
    s.dependency 'Capacitor'
    s.swift_version = '5.0'
    s.xcconfig = { 'FRAMEWORK_SEARCH_PATHS' => "${PODS_CONFIGURATION_BUILD_DIR}/PushNotifications" }
  end

	

2. Or, alternatively, you can add the PushNotification framework path manually as below (you'll have to do this every time when the plugin get updated or after you run npx cap update)
Steps
  1. Go to Pods project's Build settings, find "Framework Search Paths"
  2. Select your affected plugin (by the missing module error mentioned above)
  3. Add the missing path to both Debug and Release as needed.

Oct 24, 2019

How to do Over The Air (OTA) distribution? (This tutorial is written for Adhoc Version only)

Why OTA Distribution?

You might have wondered is it possible to distribute your iOS app easily through your website.
If you're just distributing iOS app within your organization, you get to skip Apple's iOS review process which it got its fame by its strictness. With OTA you can just start publishing iOS app without the worries being rejected by App Review.

2 Types of iOS OTA Distribution

Each one require different type of Apple Developer enrolment:
  1. Adhoc Distribution - Apple Developer license
  2. Enterprise Program - Require high cost program (Apple Developer Enterprise Program)
Caveat: For 2nd point above, OTA distribution is meant for the purpose of distributing iOS app within one organization. Distributing the iOS app publicly is an act against EULA of Apple.

Differences between adhoc and enterprise OTA distribution:
  1. Adhoc OTA distribution only allow devices registered under the Provision Profile used by iOS build
  2. Enterprise distribution require your device to manually permit and "to trust" the distribution publisher.

In this article, I would only explain how to do the OTA under adhoc build, as I haven't got the opportunity to be enrolled into Apple Enterprise Program.
Even so, if you had Googling around, you would find out the distribution steps has similarity, the only different is the available choices during ipa generating.

What do you need for Adhoc OTA distribution?

Requirements:
  • Apple Developer Program (USD 99 annually)
  • iOS Distribution Certificate & releasing Profile (to be created in Apple Developer platform)

Steps to start generating iOS app for OTA distribution


Step 1: Change your device target to "Generic iOS Device" and start "Archive"

Archive

Step 2: Once the app is successfully archived

Successful Archive

Step 3: Select distribution method (choose Ad Hoc for small group distribution)


Note: Ad Hoc distribution allows devices registered under the attached to the releasing Profile to install the iOS build (ipa) only.
Ad Hoc - Distribution Method choices

Step 4:  Enable OTA installation

This step would enable add OTA installation by adding extra script (manifest.plist) later in the exported outcome. The plist file is required to allow Safari browser identify the app and communicate with your iOS device later.
Enable OTA installation

Enter hosting URL


Step 5: Signing App With Certificate and Profile

Automatic signing - xcode will try to find a suitable signing setting, it'll create a proper certificates/profiles into the Developer account
Manual - you use back known & existing setting (next screenshot)
Re-sign app



Step 6: Compile and Export

Compilation

Final Step: Exporting

Exported Files

Step 7: Final, minimal content required for manifest.plist for hosting

From step 6 above, manifest.plist & TSAwesomeProj.ipa are the only required files for simple OTA installation. You can find a lot of information in the original manifest.plist file,
Part of the content from manifest.plist file


but what's required is just as below. This is the content enough to get OTA installation working.
Simplified Version


Finally, only a simple HTML code is needed for OTA installation to happen in Safari browser. You just need to add "href" attribute value below for hyperlink.
itms-services://?action=download-manifest&url=URL_TO_MANIFEST_FILE
Example: 
<a href="itms-services://?action=download-manifest&url=https://test.com/manifest.plist">TSAwesomeProj Sample</a>

Nov 13, 2015

Cordova Plugin not found

Today I ran into Cordova plugin mapping issue.

Spent around 2 hours time to find out the root cause of the missing plugin,
it happens every time we rebuild iOS before any plugin is cloned.

To replicate the problem:

  1. In the cordova app project directory, remove "plugins" & "platforms" folders
  2. run `cordova platform add ios` to add platform directly (this step will fetch required plugins stated in config.xml and generate the iOS platform)
  3. Once iOS platform is ready, run `cordova run ios`.
The three steps above will lead you to problems like screenshot below.
plugins not found
Plugins not found
ERROR: Plugin 'File' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.
["File334867545","File","requestAllPaths",[]]
ERROR: Plugin 'NetworkStatus' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.
inJSON = ["NetworkStatus334867546","NetworkStatus","getConnectionInfo",[]]
ERROR: Plugin 'Device' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.
788:2282747] -[CDVCommandQueue executePending] [Line 159] FAILED pluginJSON = ["Device334867547","Device","getDeviceInfo",[]]
In case I proceed by ignoring those "plugin not found" issues,
and run the buggy app on my device.
I'll end up getting errors like below in my debugging tool's console:
deviceready has not fired after 5 seconds
Channel not fired: onPluginReady
Channel not fired: onCordovaReady


To workaround this issue,
you'll need to rebuild the cordova iOS platform again with all the plugins fetched at first.

Now, since I have all the required plugins ready (from previous added iOS platform),
I'll keep the fetched plugins (inside plugins folder) and follow the steps below.

Remove and add back the iOS platform:
  1. cordova platform rm ios
  2. cordova platform add ios

Oct 8, 2015

Cordova Development - iOS iTunesArtwork in ad hoc distribution

As how everyone explained around the internet, you need files named "iTunesArtwork" (512px X 512px) & "iTunesArtwork@2x" (1024px X 1024px).

iTunesArtwork - 512 x 512
iTunesArtwork@2x - 1024 x 1024

And they must be filename without extension.
If your image file is iTunesArtwork.png then name it to iTunesArtwork (without the ".png").



Once you have your artwork ready, rebuild your iOS Cordova build.
cordova run ios 
After then, the generated app (applicaiton) file:
generated-app.app (in /mobile_app_root/platforms/ios/build/device/generated-app.app directory)



right click on the generated-app.app and select "Show Package Contents"




After you click [Show Package Contents], it will direct you into a new directory.
This is the directory where you should place your iTunesArtwork & iTunesArtwork@2x files.



In root folder, is where you place your  iTunesArtwork & iTunesArtwork@2x files.


Try it in iTunes app, you'll see the result.


References:
Customizing the App
iTunesArtwork And Xcode

Cordova Development - How to release an iOS build from app bundle generated from "Cordova run ios"

By running, cordova command, cordova run ios will generated an iOS application bundle in
cordova-project-directory/platforms/ios/build/device/app-name.app

 Using manual way to distribute testing build, you'll need to:


  1. Create a folder named "Payload" (only 'Payload' name would work)
  2. Paste your app-name.app into the Payload folder created in 1st step
  3. zip/compress the Payload folder
  4. once compressed, the Payload folder become Payload.zip, rename the 'Payload.zip' to app-name.ipa
  5. Place it into iTunes, and start install with it.

Sep 24, 2015

Replace default look of SELECT box or dropdownlist on mobile webview

I am using onsen-ui HTML5 UI framework to create my webview mobile app.
With the help of:
  <ons-list-item modifier="tappable">
  </ons-list-item>
On onsen-ui, it does not help inherit existing design into the select box.
An example below.

Default design of the select box on iOS
In this case,
we'll have to write a custom CSS class for the select box to replace the default design.


  .custom-select-box {
    color: inherit;
    font: inherit;
    line-height: initial;
    direction: rtl;
    overflow: hidden;
    height: 40px;
    width: 100%;
    padding: 5px 8px;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    option {
      direction: initial;
    }
  }

the main part which replace the default view is:
directional: inherit;
appearance: none;
border: none;

Final result

Sep 20, 2015

Building Cordova iOS app with xcode7 run into "Build failed with Ld build/Debug-iphoneos/ normal armv7" problem

This problem occur because of the enable_bitcode feature of xcode7, and I suspect this occur is because some cordova plugin we're using does not contain bitcode.



In order to solve this problem:
As default value is a "Yes" for iOS, you'll need to disable it on your own.

To do: Disable "Enable Bitcode" setting inside Build Settings.

  1. select targeted app
  2. select "Build Settings" tab
  3. at the search bar under the tabs, search for the keyword "bitcode" (or find it under Build Options)
  4. change Enable Bitcode to "No".


Enable Bitcode



Try to Build your app again.

References:
What does enable bitcode do in xcode 7