Dynamic resizing of app window (bounds) via webview - javascript

I have build simple desktop application, which is loading content into webview element.
Now I am looking for some options how to resize application window based on some Javascript action called from DOM inside webview.
For example:
By default I am displaying some information related to the team of people using this Chrome application on their desktop. These data are being fetched from PHP application running on our servera rendered using HTML/CSS/jQuery.
Now I would like to render some form, which will give us options to edit this content directly inside Chrome application and store them in database, but the issue is, that by default is Chrome application very small: approx. 200x300px and at the moment, when I render this form I would need to resize whole application to approx. 300x500px and I have no idea how to achieve that.
I was browsing in Chrome apps documentation where i have found some info related to app.window, but I did not find a way, how to apply this into the real world app and execute such a commands via Javascript inside webview element.
Thank you for any ideas and suggestions.

You won't be able to do that from inside the webview. You are correct that chrome.app.window is the required API, but a webview-embedded page has no privileges to call it.
You'll need to communicate with your app's script, which has the necessary privileges. I would actually recommend using the "externally_connectable" method since it's for a specific site.
Once you've passed a message to the app page's script, you can resize the window with
chrome.app.window.current().innerBounds.setSize(width, height)
or, in case of a listener in the event page,
chrome.app.window.get(windowId).innerBounds.setSize(width, height)
Note that you can set the initial size when creating the window.

Related

How to allow javascript tasks to run across multiple screens on Cordova

I'm working on a mobile app with Cordova. When the user starts up the app, I'd like to kick off a non-blocking function to load data from the server. This function can take up to a few seconds.
I'm using the leecrossley/cordova-plugin-background-task plugin. It works fine if I stay on the page that kicked off the function. If I change pages, it stops the function.
Any thoughts?
Jon
Sounds as if you are experiencing web-view-throttling!
Cordova uses the Chromium web engine so it usually follows all of the performance settings implemented in the chrome browser.
You can read some more about the throttling issue here:
https://thenextweb.com/apps/2017/01/26/chrome-throttle-background-tabs-google/#.tnw_WIKDX2EX
The solution to your problem is
to create a main page to function as the core of your application. This main page will always be open 'thus saving your from scripts being stopped when a new page is loaded.
For app pages, i recommend either:
creating a separate .html file per app page, then load those external pages into your main app page via an iFrame ...the src of the iFrame can be updated via javascript. (the downside to this approach is that you will need to write additional javascript to monitor and control the events that happen inside of your iFrames -from the main page.)
or
Build a very big single page application; wrapping all of your app pages in divs.. then create a javascrip menu function that manages what page is displayed and what page is hidden. (This may result in a massive .html page but this method will allow you to run any number of non-blocking scripts the device can handle at once.) <-- This is the method i have been using for over three years, i also add some iFrames to include special page modules when needed. CSS and JavaScript can be loaded from external files.
I believe most cordova developers actually use this single-page method!

Meteor: Reuse existing browser tab with each (Android) NFC tap?

I'm developing a Meteor web app that loads upon tapping an NFC tag (Android). I'm finding that (of course) tapping the same NFC tag (with the same embedded URL) opens a new window or tab in the browser. The problem is three-fold: 1) it clutters the browser with multiple tabs referencing the same web app thus confusing the user, 2) grows browser memory, and 3) forces Meteor to perform a complete (and slow) download for the new tab rather than reusing the same web app already loaded. The appcache package does not seem to make a difference in this case. This delays the page from appearing quickly after a tap because of the app reload.
Is there any (clever) way around this? I would hope to reuse an existing tab with the same hostname/domain to avoid all of the issues above. I don't know enough yet about HTML5 Javascript API that might offer some kind of solution. I'm afraid this might not be possible. I was thinking, if it were possible, I could load a small app first that inspects the browser environment, redirecting to the full Meteor app, or finding an existing window/tab with same hostname and fetching a new url within that window (with the updated tag ID for instance).
Someone might suggest using Meteor native mobile app, but this has several other problems of its own, including the fact the app must be installed via Play store which is friction vs. web app that just loads without installing an app. Thanks in advance.

Bookmarklet in Phonegap or iframe that acts as top window?

I am building an app for my school in HTML and using the Github + Phonegap cloud builder to package it as .apk, .app, etc for cross platformity.
The app its self loads an external webpage. This webpage is the schools and I have permission from them to access it but I do not have access to the server its self. I wrote a bookmarklet that accomplishes the tasks I want the app to accomplish however this requires the ability to run the bookmarklet. This can be done in any standard web browser but I can't seem to figure out how to do it in Phonegap.
My first thought was to iFrame the schools's site but sadly they use every possible breakout code that even after implementing every fix I could find it still navigates the top window and not just the iFrame.
I come to you asking for help.
Is there a way to do either (or both) of the two tasks below?
Create an iFrame that, to the page it loads, appears and functions exactly as the top window so that even when it navigates top the top window it still stays within the iFrame
Run a javascript bookmarklet from a phonegap app without the need to involve any native code so that when this external page is loaded, additional local JS can be executed without being called by the page its self
You can set src of <content> in config.xml file to be a remote url. (which by default points to local index.html in www directory)
<content src="REMOTE_URL" />
see The config.xml file.

Options for communicating between Chrome Extension and Embedding Page's Javascript

I am monitoring browser events such as when a new tab is created. My extension needs to display these browser events in the new tab page.
To make versioning easier I would like the extension to be as dumb as possible. That is, all it needs to do is tell me is that a tab has been created and I need to be able to tell the extension to switch to a tab. Then I do not have to worry about what extension versions people have installed.
The new tab page so far is a redirect to my single-page app hosted on my server.
My options seem to be:
Using custom events to send messages between the content script and embedding page: http://code.google.com/chrome/extensions/content_scripts.html#host-page-communication
This seems like a security risk as the page javascript will also have access to the DOM and hence the messages I am exchanging.
Loading the HTML from server into an iframe, pulling application JS from server and injecting it into the iframe as a contentscript. This allows the app's JS to have full access to the chrome extension API which is what I need.
Another consideration is that my project is currently using RequireJS. For option 2, it seems I won't be able to use this.
Can anyone recommend the preferred option keeping in mind the security risks of option 1?
Will I be able to use RequireJS with option 2?
Is there another way to acheive this?

How do you communicate with the main page from a HTML notification?

I'm working on a fork of an online Twitter client. (Streamie, if you're interested.) I'd like to improve the Chrome notifications by using HTML notifications instead of the static ones it uses now.
The problem is that I need to get the tweet object from the main page to the notification, and I'm not sure how to do this. In my Chrome extension I got around this by making an array with a queue of tweets to show, adding a function to the window object which returned queue.shift() and then calling that function via chrome.extension.getBackgroundPage().dequeueMsg();.
However, I obviously don't have this option in a web client. Is there any way to communicate from a notification with the window that opened it, or from the page to the notification's DOM?
Well from the spec:
Within a web notification, the window.opener property should be set to the window which created the notification. If the notification was created by a worker script, window.opener should be null.
It looks like code in the notification page can access window.opener just like a page created with window.open() can. (Now, as to the practical aspect of doing this with today's actual browsers, that's another thing I guess.)

Categories