#PhonegapBuild
Explore tagged Tumblr posts
Visit Tumblr Blog
Explore Tumblr blogs with no restrictions, modern design and the best experience.
Last Seen Tumblr Blogs
Fun Fact
Tumblr.com rank in the US is 25.
Link
RT @mwbrooks: @rocksetta @PhoneGapBuild Hey Jeremy, sorry I missed your message. I’m at Adobe but not dedicated to PG. I’d recommend filing an issue on PGB’s issue tracker if it’s a bug (works locally but not PGB) otherwise asking on the forums. https://t.co/XgYnPrtWKO I’d love to see your demo when it’s ready! via @develop_mobile
0 notes
Text
Tweet by mwbrooks
The @phonegap push plugin has been updated to 2.0.0-rc5 removing the need for a hook. Should work on @PhoneGapBuild. Try it out raise issues http://pic.twitter.com/yw9WkCkeJR
— Simon MacDonald (@macdonst) June 20, 2017
0 notes
Text
Android - 404 Not Found (from cache)
I encountered a frustrating issue the other day after upgrading to PhoneGap version cli-5.2.0 on Android. My requests to Fitbit's API began to fail, resulting in 404 errors. I was incredibly stumped - the exact same code worked fine on iOS. I ran the code on my iPhone and my Android tablet and pulled up both requests side by side. All details in the requests were the same: URL, HTTP method, etc. Everything except the status code - 200 OK for iOS and 404 Not Found (from cache) for Android.
Why a 404, specifically? Was something wrong on Fitbit's end? Couldn't be - it went through on Android. Finally it hit me - "(from cache)"? That's odd! After some Google searches, I had the answer.
As the Cordova docs explain, the more recent PhoneGap "cli" type versions coupled with Android's security model require the Cordova whitelist plugin. I was testing on an Android 4.4 device, so that makes sense. What the first link doesn't explain, but this blog post does, is that "Network requests are blocked by default without the plugin." Ok then!
After installing the whitelist plugin and rerunning my code, I got an error pop-up with the following message:
"SecurityError: Refused to load the script 'https://api.fitbit.com/' because it violates the document's Content Security Policy."
The whitelist plugin docs explain that there are 4 types of security policies to be aware of:
Navigation: Controls which URLs the WebView itself can navigate to
Intent: Controls which URLs the app is allowed to ask the system to open. This doesn’t apply to plugins - only hyperlinks and calls to window.open( )
Network Request: Controls which network requests (images, XHR/HTTP) are allowed to be made via Cordova native hooks.
Content Security Policy: Controls which network requests (images, XHR/HTTP) are allowed to be made via the webview directly.
I load images and make REST API calls via the webview directly, so I needed a CSP. After much fiddling, consulting links like this one, I got it to work. Add this to your index.html page to the <head> element:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-eval' 'unsafe-inline'; media-src *">
Yes, the "unsafe" portions are troubling, but apparently they are required for PhoneGap to work properly.
Additionally, I needed the Network Request portion, which is set in config.xml:
<access origin="*://*.fitbit.com/*" />
<access origin="*://*.cloudfront.net/*" /> (Fitbit profile images hosted here)
You’ll be tempted to just use origin=“*” (asterisk to allow all requests) but keep your app secure by explicitly allowing access only from the resources you will connect to!
To explain why I saw the 404 issue: by not specifying the CSP in my HTML file, the whitelist plugin most likely uses a default, very restrictive one that would not allow for external HTTP requests. When my code tried to make one, it was blocked and instead looked for the requested resource (api.fitbit.com) locally within the app. Of course, that route/path doesn't exist, hence the 404 not found error. This explanation is mostly just pieced together from the documentation I've shared here, so if anyone out there knows more, I'd love to know!
3 notes
·
View notes
Text
MAX Day 2: Chris Griffith and the Super Secret
Chris Griffith, R&D Engineer at Qualcomm, joins us to building mobile applications with jQuery Mobile and PhoneGap Build. ��We also discuss his helper application, ConfigGap.
Hosted by Garth Braithwaite and Leif Wells Produced by Mark Rondina
2 notes
·
View notes
Text
Making long video clips
One of the biggest things we've heard from people in our nghtclub app beta test group is that it's too hard to edit videos down to the length limit using their iPhones. Currently our beta app has a limit of 12 seconds, but most people have videos already on their phone and they want to upload them to the site. Editing videos is possible on the iPhone using the standard camera app, but it's really a pain. You have to set the in and out points and it takes forever, subtly tweaking the points until you have a video that is the right length; the app doesn't tell you how long the segment you've selected is. Lots of trial and error.
In version 0.1.3 of the iPhone app, we've increased the length allowed both for capturing a new video and uploading an existing video to a full 2 minutes. We've also increased the length of the clip from 12 seconds to 20 to make sure you get that sick drop in your video. If the video you choose is longer than 20 seconds you'll now see a slider bar representing a clip lasting 20 seconds. Simply slide it back and forth until you get the perfect clip and upload away.
We ran into some technical challenges with this one:
iOS Safari doesn't allow for canvas drawImage so it wasn't possible to have the thumbnails at interval for the range selection. To get the snapshots of the video we play the HTML5 video at 10x speed and use drawImage to capture the frame to a <canvas> element. This works on Android, but not on iOS. Thanks to Apple for not following the standard. If in the future they turn this on we'll definitely add in the thumbnails, but this is unlikely since it's been an issue since iOS 5.
Any element sitting above (z-index) an HTML5 <video> tag does not actually sit above the video on the stack. It looks like it's on top, but any touches will go straight through and interact with the video. We had to design around this constraint which is why the 20 second range selector is below the video and not touching/over it at all.
We're using PhoneGap Build to deploy our test build and, unfortunately, it went down for about 24 hours. It's hard to realize how reliant you are on a cloud service until it's not there. For a while our test deployments would actually try to install random apps built by PhoneGap Build. It was quite odd to be clicking the link to download and install nghtclub only to have some random app try and install.
We have a couple more changes to make on the back end to ensure the new videos can upload. Luckily just a few days ago Amazon introduced a new feature allowing for clips to be generated using AWS Elastic Transcoder. This is huge for us. Our entire application is built on the various AWS offerings and we use the transcoding service to convert all of the videos uploaded into a common bitrate and format (mp4/h264). This was really perfect timing for our move to longer videos as we can now simply extract the clip while transcoding.
What does this mean to our users? A couple of things.
Users will now upload the entire < 2 minute video even though they are only making a clip lasting 20 seconds. This means there is a greater chance at timeout or error on upload. We may need to introduce a local save so that if there is a failure for some reason we can upload the video at a later time.
We will store the entire, original 2 minute video which means users will be able to change their clip or make multiple clips from the same video.
We'll do some more evaluation once we get the new version out to our beta testers. For now we're hoping the connection is stable enough, but I'm not too confident of this. Plus we're still waiting on a few bugs within Cordova 3.1 which are leaving us hamstrung. PhoneGap hasn't exactly progressed smoothly to iOS 7 and there are some growing pains. Build is improving, but there is still a ways to go before a truly cross-device JS/HTML based app solution is viable. We're always debating if we should go full native...
0 notes
Text
Revenge of the CSP: iOS 10.2 and UIWebView Issue Resolved
This past weekend, I upgraded my iPhone to iOS 10.2. All was well, until I happened to open one of my PhoneGap apps and saw some weird freezing issues. Upon further investigation, they were Content Security Policy issues, seen in Console output as:
Refused to load frame 'gap://ready' because it violates the following Content Security Policy directive: "default-src *". For reference, in PhoneGap Build, I’m using PhoneGap version cli-6.3.0 (iOS 4.2.0 / Android 5.2.1 / Windows 4.4.1).
It appears as though in one of the recent iOS 10.X updates, Content Security Policies became stricter under the UIWebView (they're already like that if you use the newer WKWebView).
Not fun (and fortunately, rare) to have an OS upgrade completely break an app! Fortunately, the fix was straight forward.
In index.html, I had: default-src *;
I changed it to: default-src 'self’ gap:;
I had: (no connect-src directive)
I added a "connect-src" directive, needing to allow connections to Fitbit’s API. Just specifying the root URL works here - no need to specify every single endpoint: connect-src: https://api.fitbit.com;
I had: (no img-src directive)
I added an "img-src" directive, which allows external images to be loaded: img-src * data:;
Here's the final CSP my app is using. Note that your app may need different values! For more details, Mozilla has great documentation.
<meta http-equiv="Content-Security-Policy" content="default-src 'self' gap: mailto:; connect-src https://api.fitbit.com; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-eval' 'unsafe-inline'; img-src * data:; media-src *">
0 notes
Text
"It's Not You, It’s Me": Start Using NPM for PhoneGap Build Plugins Now
In just a few days (November 15th, 2016), PhoneGap Build's plugin directory is going away in favor of Node Package Manager (NPM). No need to panic! There are several paths you can take to move over to NPM.
Option 1 - "I'm using a popular plugin": Use NPM referral link
In a great move, PG Build has given us the option to see the plugin's equivalent on NPM or submit a suggestion ourselves.
Navigate to the StatusBar plugin page for example. Here, we see a link to the most likely (submitted by users, so may not be correct!) equivalent plugin on NPM:
Clicking the “probably here” link brings us over to NPM. Most, especially official, PhoneGap plugins begin with “cordova-plugin” so usually it’s safe to assume that they are equivalent. As we’ll see below though, that’s not always the case - review the NPM one in detail and test it before putting out a new version of your app.
In our config.xml, replace the PhoneGap Build version with the updated NPM one:
<plugin name="cordova-plugin-statusbar" spec="2.1.3" source="npm" />
NPM link not there? If you happen to know the NPM equivalent, please consider helping others out by submitting it's module name at the bottom of the plugin page. For example, I'm using the PG Build Google Analytics plugin, but found and submitted cordova-plugin-google-analytics as it's replacement.
Option 2 - No "NPM referral link" on PG plugins page: Find plugin on NPM
In this new world, you need to use NPM: https://www.npmjs.com/. PhoneGap/Cordova plugins generally begin with "cordova-plugin" in their names, so begin your search with that coupled with whatever you're looking for: cordova-plugin-something-cool. When you find a plugin, the latest version number to use will be seen on the right hand side of the page:
In this example, the config.xml reference should be:
<plugin name="cordova-plugin-google-analytics" spec="1.7.1" source="npm" />
Option 3 - Last Ditch Option: Fork from GitHub
What is there is no referral link and/or you can't find an equivalent on NPM? Fork it from GitHub to your personal account and reference it from there. This also works in the case that the NPM plugin is not quite the same as the PGB one and you don't have time to update your code just yet. I actually needed to do this step for the Google Analytics plugin - it turns out the namespaces and methods are slightly different. I'll update the code eventually, but I want to ship out some other changes shortly.
Navigate to the plugin page on PG Build. Under "Other Details", you'll see a Repository link:
Copy the link. Over in your config.xml, your old reference probably looks like:
<gap:plugin name="com.adobe.plugins.gaplugin" version="2.4.0" />
Change it to point to the GitHub version using source="git" and name to spec. On a new app build, PGB pulls the code from GitHub now:
<plugin spec="https://github.com/phonegap-build/GAPlugin" source="git" />
As a final step, consider forking the repository for future reference or to maintain a copy in case it's deleted. Navigate to the repository's GitHub page, then click the Fork button in the upper right hand corner. The repository now appears in your account as a "forked repository". When I navigate to my forked version of GAPlugin now, it's essentially copied/saved for future reference: https://github.com/dotNetkow/GAPlugin
Happy plugin hunting!
0 notes
Text
Cut Your PhoneGap Build App Size In Half With This One Weird Trick!
I’m in the midst of wrapping up my first Pluralsight course on PhoneGap Build Fundamentals and stumbled upon this today: if you include a special file into each icon and splash screen image directory, PhoneGap Build will only include the platform specific icon/splash files in each app binary created.
For years now (and I suspect I’m far from the only one), I’ve assumed that PG Build already does since, since we specify the image file paths in the config.xml file. Nope! All images are always included. Include a PGB Omit file with no file extension (.pgbomit) into each icon/splash directory. I tested it with the app I’m building for the course:
Before: 6.4MB
After: 3.3MB
Basically half of the original size! Awesome.
Details can be found at the newly revamped PhoneGap docs page:
A typical use case is for a directory containing the icons and splash screens for an app. Place .pgbomit in that directory and none of those files/directories will be included in the binary app package, except those copied and used for icons and splash screens for a specific platform.
0 notes
Text
PhoneGap Build: "Certificate doesn't match profile" fix found
After a couple of months without building my apps on PhoneGap Build, I came back to the site only to see build errors. Very strange, as all of my certificates and keys were valid. On the PhoneGap community forums, others had the same issue.
TLDR; Re-export your developer certificate (.p12 file) from Keychain Access on your Mac in addition to creating a new Provisioning Profile from developer.apple.com.
The PhoneGap Build documentation for "Certificate doesn't match profile" states that you should try regenerating the provisioning file. However, I found that exporting a new copy of my developer certificate from the Keychain app did the trick!
My best guess for why this happened is that PhoneGap Build must have updated something on their end. This could be the case with Apple too - maybe there is newer metadata included when we re-export the p12? We may never know, but I'm hopeful this will help others in the future!
I've logged an enhancement to the Adobe team to update their docs to include this as another troubleshooting step.
0 notes
Text
Development Tips when using PhoneGap Build Plugins
Plugins are an incredibly useful way to bring native functionality to PhoneGap apps. Once you start including them though, complexity can skyrocket, mainly because you are now dependent on actual devices to test. This can lead to frustration as feedback loops are increased. To help shorten these, follow these tips:
Practice safe programming practices: add a check that the plugin exists before attempting to use it:
if (window.plugins !== undefined && window.plugins.myPlugin !== undefined) {
// safe to use plugin now
}
Without those, app may unexpectedly crash/become unresponsive.
Read the plugin documentation carefully. It's easy to miss a required parameter (especially with JavaScript's lack of static typing), setup steps, or even object casing ("gaPlugin" vs. "GAPlugin"). Also beware that the docs may be out of date - if you are following instructions perfectly but still have trouble try checking the plugin's open issues section if available. Oftentimes out of date documentation has been noticed by someone else, but the project leader hasn't accepted the pull request that fixes it yet. I've had this happen two separate times!
Use various tools to troubleshoot issues.
a. Local debugging: Open the app in a browser locally - are there script errors or other issues that may make the plugin issue a red herring?
b. Remote debugging: Add extra console logging messages and exception handling to narrow down the issue directly.
Are there any other tips that I should add? Let me know below.
0 notes
Text
Leveraging the PhoneGap Developer App as a PhoneGap Build user
The PhoneGap App is a great new addition to Adobe's suite of PhoneGap tools. It allows you to seamlessly push new code to a native device, resulting in much faster development, whether you are building PhoneGap locally or in the cloud. What is not immediately obvious is how PhoneGap Build users can leverage it, if at all. Well, fortunately, we can!
Unfortunately, you can’t just point the tool at your existing app directory like I’d hoped and run it. You'll need to run the “phonegap create [my-app]” command first (where [my-app] is the name of the app and subsequent folder that is created). This creates a bunch of template files and folders. The key here is the “www” folder: this is where your existing Build code should go.
That's really all there is to it, although it's not all rainbows and sunshine. As of May 2014, PhoneGap Build isn't currently supported at all, which means no 3rd party plugins (supported Adobe ones work though!), remote debugging, or hydration (although that is basically provided and arguably the point of the PG App). Support is planned, but for now you can move your code into the new "www" structure or perhaps set up a Grunt task to do so.
0 notes
Text
Creating a Top 5 iOS Fitness App using PhoneGap Build
I reached out to PhoneGap a month or so ago, asking to be featured and/or write a guest blog post. They were fantastic to work with and very excited to share my post:
Creating a Top 5 Fitness App with PhoneGap Build
It's a bit technical as I give an overview of the capabilities that PhoneGap Build offers, but worth taking a look if you are interested in the current state of HTML5 web apps in 2014 and beyond. Enjoy!
0 notes
Text
Tips for Moving from PhoneGap Build 2.9 to 3.x
I'm in the process of upgrading Fitwatchr from PhoneGap Build version 2.9 to 3.3 (the latest available on the Build service as of March 2014). Here are some notes on potential "gotchas":
Debugging, plugin, or random app issues: Occasionally when testing on a mobile device, you may experience odd issues like plugins not working when they worked previously, logging not displaying in the debug window, etc. When this happens, it's best to start fresh with a new build: remove the app from the device, rebuild it, and start again.
ChildBrowser plugin:
When referencing it in JavaScript, a capital 'C' is needed in the variable name. Use "ChildBrowser" instead of "childBrowser".
The "install" method is deprecated. No need to call this anymore from your onDeviceReady method.
The Dialogs plugin is needed if you're using native alert messages (aka navigator.notification.alert). Additionally, the alert function now requires the callback function variable; it will fail without it:
Works: navigator.notification.alert('message here', alertCallback); No Longer Works: navigator.notification.alert('message here');
Splash Screen issues still abound in version 3.3, as evidenced by the Build GitHub Issues page and forums. From my testing it appears as though splash element order matters in the config.xml file, from smallest to largest. It really shouldn't, especially since the PG documentation for splash screens is incorrect. They currently show:
<gap:splash src="splash/ios/2048X1496-LANDSCAPE.png" gap:platform="ios" width="2048" height="1496" />
<gap:splash src="splash/ios/1536X2008-PORTRAIT.png" gap:platform="ios" width="1536" height="2008" />
When 2048x1496 is listed first, PG shows the Portrait image, even in Landscape view (on my iPad mini retina, at least. Not tested on other devices). The correct order should be:
<gap:splash src="splash/ios/1536X2008-PORTRAIT.png" gap:platform="ios" width="1536" height="2008" />
<gap:splash src="splash/ios/2048X1496-LANDSCAPE.png" gap:platform="ios" width="2048" height="1496" />
If you are also moving to PhoneGap Build 3.3 and can share other tips, please comment. Especially relating to plugins!
0 notes
Text
PhoneGap Build Template project on GitHub
Fitwatchr is built on the PhoneGap Build platform, a fantastic resource for creating mobile apps that run on multiple devices.
I've uploaded a new template library onto GitHub that provides a great way to get started with the platform. It offers a simple structure and leverages Kendo UI Mobile. Get it here.
Any questions, please contact me!
0 notes