Struggling to unleash the power of Chrome kiosk apps - google-chrome-app

Our company designs museum and visitor center exhibitory, and my main job is designing touch screen kiosk applications. Enamored by Vidya's introduction to Kiosk Apps using Chrome boxes, I quickly had my boss procure one for testing. I have since gained a firm grasp of Chrome App structure going though Google's tutorials (manifest files, MVC, etc) and have found the performance of our little HP Chromebox plus HTML5 development to be pretty impressive. I'm developing on my Macbook using Chrome Canary to run and test the apps.
I'm adding in this background information so you can better understand my goals. We of coarse need these apps to launch full screen upon power up. No login or user installation is desired. I prepare the boxes in my office, install them at the exhibit, the end. We certainly don't want our multimedia apps to be sitting up on the Chrome Web Store for others to download and install.
So, I've gotten to the point where I want to install a simple kiosk app on our HP Chromebox. Unfortunately Vidya did not go into detail on this part. The page from her article only touches upon adding kiosk_enabled" : true to the manifest file.
So here's what I've tried so far: I've moved my app folder onto an SD card and moved it from there onto our HP Chromebox into the "Downloads" folder (apparently the only folder). I sign into Chrome Browser on the box with my company account (do I have to do this?) and load up chrome:extensions. I click "load unpacked extension..." and select my app folder. The app installs and I am able to manually launch it by clicking "Launch". Next, I click the "Manage kiosk applications..." button and enter the app ID into the field. This is where I get stuck. Clicking "Add" produces an "Invalid Application" error.
Looking around the web I have found lots of confusing information:
I must "Wipe" the Chromebox in order to use a Ctrl+Alt+K key command to truly enable kiosk mode. (Google's instructions on how to do this stops with Samsung and Asus 'boxes, I have an HP, not to mention the "Manage Kiosk Applications" button is already visible to me).
I must upload my App to the Webstore as either public or unlisted, and then download and install it onto my Chromebox. Really? I don't want to sell my app or make it available to anyone. It is only meant to run in our exhibit. Our apps could be gigs of data with HD videos!
I must make my Chromebox "Managed" or "Enterprise" or "Enroll" it for Work and Education Administration. In most cases, we'll be installing one or two of the 'boxes to allow users to navigate though static HTML pages. I don't have a need to manage a fleet remotely (at least not yet). So, the aforementioned complications seem unnecessary, and expensive if I understand things correctly.
Can someone point me to the definitive process for achieving my goal of an auto starting, full screen kiosk application on my Chromebox?

I'm not an expert on this but kiosk apps are defined by "kiosk_enabled": true in manifest.json. What's important to know, though, is that from what I've seen they can work in three different modes:
If they are installed as an unpacked extension (for example, in development) they will be available as apps in your logged in environment and run but full screen mode. They're essentially "normal" apps except that they are full screen.
If they are installed using the "Manage kiosk applications..." button then they are available without logging in. On the log in screen at the bottom you'll be able to see the app and click to start it without logging in. However they won't start automatically. AFAIK you also can't load an unpacked extension in this way.
If you enable "kiosk mode" for Chrome OS then you can make kiosk apps auto start. At least on the Asus CB you do have to do the CTRL-ALT-K keystroke BEFORE you log in for the first time. This is for an unmanaged device. Now, when you load the app using "Manage kiosk applications..." in chrome://extensions and hover your mouse over it in the dialog you should seen a "enable auto-start" or similar button. You need to select this. Now, when you restart the system the app should automatically start. If you want to cancel this just as the app is loading you can press CTRL-ALT-S. A message indicates this on the screen, too.
Hope that helps,
Simon

Can't help you with anything related to kiosk, but you can generate a CRX file from the Extensions page on your development system, get that onto the Chromebox, put the Extensions page of the Chromebox into developer mode, and then drag the CRX to the Extensions page and drop it. You should see a dialog asking you if you want to install it. This is a completely different form of install than loading an unpacked extension and may get around whatever limitations you're seeing.
UPDATE: (1) Extensions page on Chromebox doesn't have to be in Developer Mode, (2) CRX to be dragged must be in the Downloads directory, not on Google Drive. Didn't test external device (SD card or USB drive).

In order to add your app from Manage Kiosk Applications, you will need to publish your app to the Chrome Web Store. If you don't want your app to be public you can publish it as Unlisted, which means that anyone with the link can install it. Unfortunately, if the app is published as Private you will not be able to add it as a kiosk app. [source]
Beyond that, the only thing you need to do to create a kiosk app is to include "kiosk_enabled": true in your manifest.json file.

Related

How to install a Progressive Web App on a mobile device?

Im using an iPhone to browser thru various PWA demos online.
Is the installation as simple as adding the URL to the Home Screen?
Well, as of today, iOS lacks proper support for PWAs, so you won't get any PWA-specific benefits of adding the Web app that is a PWA to the Home Screen on your iPhone. Basically, yes, you will have a shortcut on your Home Screen, but it wouldn't give you any Service Worker capabilities and also your users will never be prompted to add the app to the Home Screen automatically.
On iOS there is only a non-standard Apple solution with meta tags available that allows you to customize the appearance of your website when added to the Home Screen to some extent. See Apple docs.
See What Web Can Do and caniuse.
UPDATE Jun 2018: As of Safari 11.3, iOS supports PWA installation and Service Worker features. However it does not prompt for installation, so the only way to "install" a PWA is to use good old "add to home screen" menu link. Also, it still does not support Service Worker-based Push messaging.

Access wordpress website from phone hosted locally through Xammp

I have a test WordPress website hosted locally by my PC. This is fine but i am now wanting to test the website on a phone and tablet (iPhone and iPad).
I have looked online for all the options and i can't get any to work (changing the httpd files and i have tried everything else) I can type my IP address of my PC with the port number added at the end and this takes me to the Xampp control panel page but i cant access my website by typing 'IPaddress/websitename'.
Can someone please give me a full step by step of what i need to do to be able to see my locally xampp WordPress website from my iPhone and iPad.
Your phone is probably not on the same network as your PC, and you might not be sharing your XAMPP website over the network. It would be possible to make your website available to your phone, but it is likely to be quite a lot of work, and might be insecure.
A better idea would be to shrink your desktop browser down to phone / tablet size, and check the layout that way. You can even throttle the internet speed, to simulate slower connections, and choose specific device models. On Chrome, this is called device mode. You will need to turn on Chrome developer tools first, which is done by clicking View -> Developer -> Developer Tools, in the Chrome toolbar. You will see a little icon there (see the link for a screenshot).
If you are going to make the site live, you should still probably check it with a real phone / tablet, but for the first steps, using 'device mode' is a good place to start.

is there any api to make a shortcut of chrome standalone app to a desktop

normally what happens when you install an app is that it creates a shortcut from where you can launch it on desktop or start menu. However, chrome apps for now are places in chrome app launcher that is packed with all other chrome apps. It's all good and fine. But is there a way to place my app on desktop with user's consent if need be.
There is a way to do it manually. Like if user right clicks on the app in chrome app launcher and click create shortcut which has checkboxes showing places where shortcuts are going to be created ex: desktop, startmenu...
Without a icon of your app on desktop it still doesn't feel like a standalone app.
You can check out the chrome.management.createAppShortcut API that is added recently. Now it's only available on the dev channel:
chrome.management.createAppShortcut("app_id");
There is no way to do this. Users can also drag their app from the app launcher to the desktop to create a shortcut.
An API to prompt the user for this isn't something we're likely to support. Personally I think users would find it annoying, as it is simple and easy to create shortcuts where they want.
If you disagree please file a feature request at http://crbug.com. It would be there is some action we could take, e.g. educate users better that they can create shortcuts, but crbug.com is a better place to discuss.

can you install an iphone app with an invisible icon?

So I am working on a bundle of applications for my company for the iPad and am trying to figure out if it is possible to install an app but hide the icon. It will not need to be launched from the desktop directly. Instead, I have created a launch desktop that controls login and the launch of the actual apps via custom URL schemes. We decided to do this so we can have many people developing different apps at the time time that quickly and easily connect to a single login and launch desktop. We are trying to make all of the services we offer interconnected.
Does anyone know if this is possible? Or am I going to have to redirect to the login app if the user launches any of the individual apps. That is what we were trying to avoid. It would be incredibly annoying and clunky for the user. Any help would be greatly appreciated! Thanks!
No is the short answer, you can't install an app and hide the icon.
Even if you could, your architecture sounds pretty clunky. If your services are interconnected, then would it not be better to have everything in the same app? There are plenty of ways to share coding between many developers without everyone having their own, separate app.
Maybe.
There used to be a trick where if you installed so many apps that you filled up every page, any apps installed after that would not have a visible icon (but you could run them via a Spotlight search).
If this behavior still exists, then fill up your iPad's launcher/springboard with apps (download 100's of free games, etc.), then install the apps that you want to be invisible, then delete all the games, and your chosen app might remain with an "invisible" icon.

Simplest way to incorporate iPhone file upload when building app with Appcelerator's Titanium Developer

Sorry for the long explanation. Thanks in advance to all who are taking their time.
I am an Ubuntu user who has set up Titanium Developer on a MacMini in order to build an app for the iPhone (and ultimately some other platforms).
Rather than having any local code built in, the app simply points to my website. To do that, all I needed to do was change Titanium's tiapp.xml file to include my website URL. I wrote no other code, nor did I need to include any other files. It simply compiled and ran in the emulator without a hitch.
I've got just one problem: I need to upload files to my website and Apple, as most of you know, has disabled the input field type=file. I've got it working in all other browsers. The action simply calls a php file and passes the file info.
If I didn't have an app, and someone was just manually navigating to my site with the iPhone's Safari browser, I could get around the problem by using CliqCliq, which is a very cool iPhone app. Basically, I use JavaScript window.open() to launch CliqCliq's QuickPic browser in a second Safari window. The user chooses a file; QuickPic uploads it; and the user is returned to the second Safari window that I launched with window.open(). The user closes the window and Safari returns them to the first window (i.e., my website).
The problem is that my website is being shown in my app. (By the way, I don't have my developer license yet, even though I signed up a few weeks ago, and I can't test this in the emulator because I can't install QuickPic into it, I assume.) I wanted to repeat the same steps, described in the previous paragraph, using an iFrame but that didn't seem to work (i.e., the iFrame was blank despite my designating a src). I also tried having a hidden window by using old-fashioned frames and setting the col-width to 0. That also did not work (i.e., Safari, if I recall correctly, opened a separate window).
I'm working a little blind, since I can't test anything on the iPhone, but I figure I have two options: I can either find a way to launch a QuickPic in an iFrame -or- I can find some way to incorporate the Apple toolkit file chooser into the Titanium app.
The problem with the first option -- but again, I don't know until I can try this on the iPhone -- is that I assume both apps (mine and CliqCliq's) could not run at the same time. Even if I had a hidden window, invisible iFrame, etc., the moment it launches QuickPic, I assume my app would quit(?).
The problem with the second option is that I don't have clue as to how to incorporate a file picker into my app by using Titanium (keeping in mind, everyone, that I know very little). Brian at CliqCliq has even offered to give me some code if I can't make Apple's file picker work but again, I'm not sure what to do next.
What do you folks think? What's the best method? And, what's the easiest thing for a simpleton to do?
Thanks.
<input type="file"> is not supported on the iPhone. You'll need to use Titanium's APIs, specifically the Media one (openPhotoGallery or showCamera).
As a side note, Apple reportedly rejects apps that are just a webview displaying a website. You may want to consider putting most of the app code in local storage and using AJAX to fetch content.