Detect phonegap app from wordpress - wordpress

I am building my app in phonegap. In that app I am calling my wordpress website like window.location="http://www.example.com/";.
Because of window.location my app UI and mobile browser UI are looks same. So I want to detect phonegap app to defer from browser UI. Is there any way to do this.

#JayTh
Okay. Thanks. VERY GOOD TO KNOW. I spend hours getting beginners to understand issues. You got them.
Okay, once you load a webpage from a website you are NOT allowed to access any of the Cordova Plugin APIs. However, you can access HTML5 API, like camera and geolocation. Again, you cannot access any of the Cordova Plugin APIs, and any of the 800+ 3rd-party APIs.
The best way to access the web, is via inAppBrowser. However, the third paragraph states:
The InAppBrowser window behaves like a standard web browser, and can't access Cordova APIs. For this reason, the InAppBrowser is recommended if you need to load third-party (untrusted) content, instead of loading that into the main Cordova webview.
Apple is serious about their security, so if they detect you are going around this, they may reject your App. Just to be clear on this, there is a new security protocol, which Phonegap Build now requires, and so does Apple. With Phonegap Build, it will create the required Apple ATS entries into the Info.plist.
So, the best I can do at this point is give you three (3) links.
Top Mistakes by Developers new to Cordova/Phonegap
Core Plugins Setup
HOW TO apply the Cordova/Phonegap the whitelist system
On 1., you have hit #5 When designing the app, thinks phonegap works like a website or webbrowser.. For the remainder, I recommend just reading the bold sentences.
On 2., if you want to use the Cordova Plugins, it is best to use the version numbers, if not you will get the latest, and your code may break. This is because now, Phonegap Build now uses NPM for the plugins. And many times bugs fixes get into the plugin, that require the latest compiler - and Phonegap Build is always at least one version behind.
On 3., You'll need to use the whitelist to apply the fixes that maybe required for any new plugins you are using.
If you have more questions, I can answer them in comments. If it get too complicate, we can move to Google Group of Cordova/Phonegap - Best of Luck.

Related

Load Progressive Web App inside iframe

When loaded a PWA (Progressive Web App) inside a iframe, it will work normal (saving Web Workers, offline availability, etc) or some features will be blocked?
I have a PWA that uses an iframe. It uses some pretty advanced features, including a web-worker (in addition to the service worker) that I implemented long before recently porting it over to a PWA. All of those features work the same, with the additional benefit of controlled caching of specified resources. I haven't seen anything in the documentation to suggest otherwise, and can honestly say it works amazing! So fast to load now, it's in the app drawer, etc., even installs and looks like a normal app on desktop. My only issue is the soft-keyboard overlaps in fullscreen, but there is a solution, I've seen it work.
My suggestion-- try it. It's pretty easy to set up. Test your features. I am sure you will be impressed.

Meteor mobile build vs having a phonegap browser

Why is the difference between using a simple phonegap browser app pointed at your site vs using meteor's mobile build options?
a simple phonegap browser app pointed at your site
Not sure exactly why you would be ready to use this option, compared to a simple shortcut / link to your site, or even an "installable" Web App.
Anyway, since you point at your site, it means you require an Internet connection whenever you open your app, and you are limited by what a website can access to on your device.
meteor's mobile build options
It becomes similar to a native app (it is actually called a "hybrid" app), so you can use it totally offline, and you can access more device functionalities (file system, notifications, etc.).
Nothing really specific to Meteor here, it is rather why using a hybrid app v.s. a shortcut.
In the end, you should base your decision on your requirements:
Do you need to access your app while offline?
Is your app primary functionality accessing "real time" content that makes no sense using your app while offline? (like news, forums, etc.)
Do you need to access specific device functionalities, that are not accessible by a normal website?
You should have plenty resources on that topic on the Internet.
Your question might rather be: what is the difference between a standard hybrid app (typically built through Cordova / Phonegap) and one built through Meteor?
In that case, you are asking what Meteor brings specifically? (as it uses Cordova under the hood to build the app)
First of all, you have all advantages of Meteor framework for normal website (minimongo, isomorphic methods, etc.)
You also have by default the Hot Code Push functionality. You can also set it up on your Cordova / Phonegap app, but you will have to configure it yourself, whereas Meteor does everything for you.
Finally, you might benefit from Meteor packages that bring Cordova plugin + client code + server code, something unique to Meteor as it is a full-stack framework.

Converting WordPress website to Progressive Web App

I am building a Progressive Web App but there is a very little documentation and support online so far. I am listing down all my questions in this email.
What is the current support of Service Worker API (Offline Mode) for
desktops? I wrote a small app which worked in offline mode for
mobile (Android-Chrome) but not for my Desktop (Chrome 42). We need
to configure development environment for this so we need to know
what will we be needing to test our apps. It doesn't work on
IOS-Safari/Chrome even.
The service work uses caches extensively and there is a very good
way to debug or unregistered service worker internals on Dekstop
Chrome; but if I run my application on Mobile how would I remove
service worker cache?
If I have a responsive application (A WordPress site) and need to
convert it into PWA; would I need to rewrite the application with
RestAPI for mobile version all again? (Read App Shell of PWA). In
PWA, application shell is separate from data however in CMS like
WordPress data is not separate from the UI.
I have been looking for these answers for very long and not being able to find any proper support.
What is the current support of Service Worker API (Offline Mode) for desktops? I wrote a small app which worked in offline mode for mobile (Android-Chrome) but not for my Desktop (Chrome 42). We need to configure development environment for this so we need to know what will we be needing to test our apps. It doesn't work on IOS-Safari/Chrome even.
Safari is not supporting service workers right now but it should work in Chrome 42 although you should consider to update your browser. Anyway, you can check the state of the art in a variety of places:
Service workers: https://platform-status.mozilla.org/#service-worker
Push API: https://platform-status.mozilla.org/#push
Background Sync: https://platform-status.mozilla.org/#background-sync
More about SW:
Is Service Worker Ready? https://jakearchibald.github.io/isserviceworkerready/
Can I Use? http://caniuse.com/#feat=serviceworkers
The service work uses caches extensively and there is a very good way to debug or unregistered service worker internals on Dekstop Chrome; but if I run my application on Mobile how would I remove service worker cache?
You need to debug Chrome for Android from Desktop Chrome.
Anyway, the URL chrome://serviceworkers-internals is available on Chrome for Android although there is no an easy way of clearing offline caches.
If I have a responsive application (A WordPress site) and need to convert it into PWA; would I need to rewrite the application with RestAPI for mobile version all again? (Read App Shell of PWA). In PWA, application shell is separate from data however in CMS like WordPress data is not separate from the UI.
No. Actually, WP has a very well architecture to decouple content from theme. The problem is that run on the server but you don't need your site running on the client to become a PWA. Mozilla is supporting a suite of WP plugins to help progressivizing your WordPress installations:
Offline Shell [github] identifies your shell assets (i.e. theme files) and cache them in an offline cache.
Offline Content [github] identifies your dynamic content and cache it as the user visit it.
Web Push [github] allows you to push real time notifications to your readers as soon as you publish new content.
Add To Home Screen [github] engages your readers by putting your WordPress in the Home Screen.
They are all very young plugins but you can track them on GitHub and contribute if you want!
A very nice and helpful answer is already added by #Salva, but I thought let me add few things which might be helpful.
For 3rd part, I have worked on an automatic progressive web app converter platform, https://www.escalatingweb.com. I think you can use this platform to convert your web app on WordPress into progressive web app. You can use it to convert your web app into pwa within minutes.
I have also written a very nice tutorial to use automatic pwa converter platform http://www.techromance.com/2017/07/22/automatic-pwa-converter-platform/.
For 2nd part,
Just to add to above answer, and for testing purpose, you can delete all the cache for a particular website from site settings, which will also clear service worker's cache.
For 1st part, nothing to add as such.
P.S. Please nobody be offended in case they find it as a cheap way promoting my platform. The intention is just to help the community, either by building the platform or making it aware to the needful audience.
Thank you #McNab for the suggestion. :)
I also using a Wordpress site and there is a plugin can solve your problem. Instead of installing lots of Mozilla's plugin, you can install Super Progressive Web Apps plugin (search for it in plugin install), it works perfectly. Tried both on Android phone and IOS
https://wordpress.org/plugins/super-progressive-web-apps/

does any usertest / screen recording software work with meteor?

I'm trying to better understand user experience by seeing what users are doing on the site. There are various tools out there that will work to track the clickstream, and record pageviews, generating heatmaps etc.
However, they don't seem to work with meteor. Since meteor is not even using ajax - it's data over sockets - and I think the tools do not support this newfangled magic.
I was wondering if anyone has found a remote recording/click tracking tool that works with meteor?
For example:
- http://www.luckyorange.com
who have a note here about hooking into the browsers XMLHttpRequest.prototype.open but that's not gonna work with meteor and more socket level protocols, it seems.
mouseflow.com also just recorded a white screen.
crazyegg.com doesn't even support ajax.
There are some other mobile specific tools like:
- http://www.uxrecorder.com/
but that would require native SDKs. First off I just want to put this up for the web.
There's one company https://lookback.io/explore who actually develop their desktop site in meteor, but they are mobile/iOS only :(
it's quite time consuming to try these out so it would be good to know anyone else's experience, eg:
http://www.getapp.com/alternatives/mouseflow-application
How are people doing remote usability testing of meteor sites?
Mouseflow does work with Meteor, though you might need to enable some extra features in the Mouseflow dashboard. The most notable would be the enhanced tracking mode, Session Support, which is necessary to track Meteor pages.
Additionally, it might be necessary to block some scripts from being loaded in playback, but that is something the Mouseflow crew can easily do from their end, if you contact them through the support links.
Disclaimer: I work for Mouseflow
After trying all the tools, I found inspectlet
http://www.inspectlet.com/
and had no problems integrating that with meteor. It's a new tool and seems to be designed from the start with Single Page apps in mind. Overall their tool is quite minimal but does the job really well and seems to work flawlessly with meteor. They're also a startup and were very responsive on other questions.
I created a small wrapper meteor package around Inspectlet and other a few other useful metrics toolkits, if anyone is interested I'll publish it to atmosphere (let me know here).

Build an App for a Wordpress site. Is PhoneGap the solution?

I have a few Wordpress sites and I would like to create apps (IOS and Android) for all of them. I did some research and found that PhoneGap (or similar products) appears to be the solution.
The App will simply get information from existing Wordpress site. I do not plan to add login/edit/post features to the app at this time. My sites have both Pages and Posts. Does that matter?
Is there any better solution than PhoneGap?
Thanks.
The two current big multi-platform solutions for apps are PhoneGap and Titanium. PhoneGap is less work, but Titanium has better performance and uses the platform default UI. Since you aren't building an advanced app, just reading JSON feeds, PhoneGap should work great for you.
It does not matter that you have both pages and posts. You will need to use a JSON API in order to get the data from WordPress. There are a couple plugins that do this and they are working on adding a JSON api to core right now. Until the core API is done, I would recommend using the WordPress.com JSON API that's included with the JetPack plugin since its made by Automattic and it has great documentation. If you go this route, you can also fairly easily add login/editing/posting later on with OAUTH2.
You should also check out Steroids.js, which builds on top of PhoneGap and adds features like real-time updates to devices without compiling, native UI elements etc.

Resources