I am converting a web application to Mobile App where I have selected Ionic as the framework of my choice. In one particular section, the app loads HTML content (user entered) from backend. Since the content at times is very large client is asking for a search feature within the page. Something similar to the browser's search.
I tried to use window.find but that doesn't work within the mobile app.
Is it possible at all to make such feature ?
Related
Edge/Chrome allows "install website as an app", which allow launch website in separate window as standalone application, with its own icon, be able to pin to taskbar/start menu, basically creating a web app.
Is there a way detect when website is viewed in such "app"?
Why I need this, is because these windows display both title you gave when created the app (which by default is the website's title) and title of the website, more ofthen than not, it will show double title. So, I'd like automatically change title on website when it's viewed in the app.
I've tried research and people suggested use navigator.standalone or matchMedia('(display-mode: standalone)').matches but I think it's for websites opened in a webView of nodejs or such (?), both method return false
Basically, we are using a headless CMS to edit content on Website A. We are building our own CMS UI based on the headless CMS API (call this Website CMS).
Now, we have this page in Website CMS wherein you can edit the content on the left panel and get a preview of Website A on the right panel (mobile view).
I haven’t done anything like this before and I am wondering what’s the best way to accomplish this and if there any libraries that help with this functionality.
Some ideas:
Embed Website A within Website CMS and any changes done on the left panel basically just refreshes Website A (which is just embedded into the page).
Recreate Website A as a page in Website CMS and call the same APIs so that the changes both happen on Website CMS’s Website A and the actual Website A. (Although I don’t see how this would be more beneficial and will create 2 separate codebases for the exact same page).
Others???
Main framework we are using is ReactJs for this CMS UI.
Option 2 is what I would do and wouldn’t necessarily be duplicative.
You would want users to be able to preview changes without publishing them. So porting the real website wouldn’t be compatible with that goal.
Code duplication would probably be minimal. It would share most of the same code and it would also propagate much faster.
you can establish a communication link between CMS and website A to exchange data.
Options
you can embed website A inside Website CMS using an iframe and then you can use postMessage to exchange data between CMS and Website A.
Or else you can use WebSockets where website A will listen for the changes done at the left panel of the CMS.
I'm currently working on an application that uses the Phonegap/Cordova framework to display an online and an offline version of a website. If you're not familiar w/ this framework, it offers a simple way of creating multi-platform applications by displaying local files in a full-screen webview.
When launching the application, the Javascript integrated in the local files of the application detects if Internet access if available, and redirects the user to either another local webpage containing a full-screen iFrame of the live website, or a reduced offline version of the website (contained in the local files of the app) if no Internet connection is detected.
I would like to detect when the user logs in using the various forms on the website (being displayed inside the iFrame), but I have no way of knowing which page the user is on, or interact w/ the website content at all because of the same-origin policy.
Would it be possible though to make the Javascript from the local page (which contains the iFrame) interact w/ the Javascript from the remote page (which is being displayed in the iFrame)? This way, I would be able to obtain the login information, and save it for later use (obviously not w/o using a token system), but also it would help for another planned feature (trigger the guidance system).
Thank you.
Look into HTML5 communication, it's pretty simple and sounds like it fits your needs
http://stevehanov.ca/blog/index.php?id=109
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
I'll try to make a my website app, in relaty I need a top menu with some features and on the main frame I would like to see the web site, BUT I have to pharse the code for:
Create the menu in top menu with some other features
Take only the part that interests me
I don't care if I loose the original page format, I would like to parshe the original html code and work it
I tried InAppBrowser but it open the browser....I look some JSON translating but it's just for fun, I would not like spend 30$ :(
The site is made in joomla
Ideas?
Cordova isn't designed to directly load content from a website as a page.
You may be able to build a simple jQuery AJAX request for each page you want to show and then extract pieces of the resulting document.
Alternately, you could use a back-end plugin for Joomla that allows you to interface with the data from the website and then display it in an app you build using Cordova.
You could use Cordova to create a webview based app that builds the menu HTML / CSS / JS in the app on the device then for each section in the menu renders some of the content from your website inside another div in your webview and apply styles to that locally in the Cordova app. This would however make your app dependent the network to get to your website so you may also wish to consider caching content in the Cordova app for a period of time.
Ideally you would use Ajax requests back to the Joomla CMS and get the content through a JSON or XML (if you must) API then render it in the Cordova client using the Javascript framework of your choice.
I've just created the required HTML5 Mobile web pages(including the CSS3 and javascript pages). I've got the apk file from build.phonegap.com as well.
But I want it to be dynamic i.e I should be able to add content from my laptop.
I've searched a lot but I'm unable to get the right info on doing this.
I just want to be adding simple text paragraphs from my local server(laptop) to the app on the go. What do I do ?
Sound like you need to set up some type of json / sql web service.
Use your machine's ip to do this.
Suppose your laptop ip is 192.168.1.1
Then from your application just use
http://192.168.1.1/your_appliction/webpage
replace http://localhost/ to http://10.0.2.2/
EDIT:
Treat your laptop as remote server and access the files in it as you normally do in website building.
From another post I think might help...
1- if you are building the whole site from scratch: You can create your site by any CMS like dotNetNuke or joomla which will allow you to login and edit what you want
2- if you are building just this page from scratch : You can build your page with online-editing in mind, in this case I recommend to build two pages one for for viewing content and the other for online-editing you can use any HTML-Editor control like FCKEditor
3- if you are dealing with already built page : it will be easier to build administration page which you can upload the new version of the content page to it, and the administration page take care of replacing the content page
Or maybe even the knockout js plugin could be something to look into http://jsfiddle.net/rniemeyer/LkqTU/