JQuery Mobile in iOS project without phonegap - ios

Before I start, please don't yell at me telling me the answer is here or there, all my researches are polluted with phonegap results, and I don't use it, so I have troubles finding the answer !
I'm currently developing a native iOS app. It's almost done, except one section, which will contain a lot of text (basically all the rules of a sport, 10 sections with 2 to 18 sub-sections and a lot of text in each). I started the implementation, using a UITableViewController to display the main sections, and selecting a cell brings me to another UITableViewController with all the sub-sections of the selected section. Then, selecting a sub-section, you're supposed to get its content. What I've started to do is use another UITableVC with TextViews in the cells, using section headers to structure the text, but that's really not convenient nor is it nice to read.
So, I want to use html pages in UIWebViews. I'm thinking of using JQueryMobile, as I've used it in the past and I think you can get nice results pretty quickly. So, I have a couple of questions :
First, what do you think of the structure of this section ? (a UITableVC sending to another UITableVC, bringing up a UIWebView). How can I do something as readable as possible ? It's really the first time I have to put that much text in an app, so I'm not as sure of my design as when I develop more "standard" things. I want to do something better, but I have no idea how I can do something better..
Secondly, is JQuery Mobile a good option ? And this brings the real question : how do I include JQuery Mobile in my app ? I know I can include the .js and .css directly from JQuery's servers, but my app can run offline, so where should I put the needed files ? How do I include them in the html files ?
Thanks for your help, and again, if the second question has been asked/answered, I'm sorry, but when you search for JQuery Mobile and iOS, all you get is PhoneGap questions..
Just in case :
XCode 4.5.1
iOS 5+
Storyboard
ARC

Becuase UIWebView objects will cost a lot of memory, it's better to have only one UIWebView object in the native view. Don't add it for each row of UITableViewController.
You can write the web pages and include jQuery Mobile as normal and test them on Mobile Safari (by starting a server on your Mac and access it in your iOS device/emulator). After testing, add the directory in your XCode project as the blue 'folder reference'. Use the following code to load the page in UIWebView:
NSString *baseDirectory = [[NSBundle mainBundle].resourcePath stringByAppendingPathComponent:#"your_directory"];
NSURL *url = [NSURL URLWithString:#"your_index.html" relativeToURL:[NSURL fileURLWithPath:baseDirectory]]
NSURLRequest *request = [NSURLRequest requestWithURL:url cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:3600];
[webView loadRequest:request];

Related

Replace Thumbnails and Theme Switching

I am currently making an extension, and I hope I could get some
practical advice on feasibility :
I want my extension to go fetch/load a local folder of custom homescreen
thumbnails(top-sites), and then replace the auto-generated thumbnails in
the homescreen with those it loaded.
The extension would be able to read the associated domain names of the
thumbnails and then replace them accordingly.
(e.g :Pinned Url : youtube.com/anything : Ok so it’s YouTube : then replace the thumbnail with “Custom_Youtube_Thumbnail.png”)
Does that seems possible to you ? (Before I dive in head first)
I saw that the top-sites API is not quite available
https://bugzilla.mozilla.org/show_bug.cgi?id=1246693 but maybe I’m wrong.
Extra : My extension is switching themes (like this :
https://github.com/mdn/webextensions-examples/tree/master/theme-switcher ).
Would it be possible to switch the thumbnails accordingly
(Custom_Youtube_Thumbnail_light.png > Custom_Youtube_Thumbnail_dark.png)
as i’ve made a version for each.
Would be a pleasure to hear your opinion on this, or just pointing
useful resources to me,
I’m not asking for a perfectly baked solution.
Hope I’ve been concise.
Thanks for reading me !
Very nice idea you had.
But In short: no possible.
Main problem is that you cannot inject and manipulate on the homepage which is a built in browser tab.
"You cannot inject code into any of the browser's built-in pages, such as: about:debugging, about:addons, or the page that opens when you open a new empty tab."
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript

Safari iOS Favorite/Bookmark icon not updating apple-touch-icon.png

So based on my searches this has been a long-standing bug on iOS/Apple’s end. As of yet I haven’t been able to confirm a workaround so would like to see if I’m up to speed on this.
I incorporated a new favicon on my site with the help of realfavicongenerator, and it’s showing up everywhere except Safari iOS where a faulty cache seems to force the old image to show when the site is favorited or bookmarked. Adding to homescreen works fine, MacOS favoriting/bookmarking works fine, Safari iOS doesn’t.
I remember having a similar issue when incorporating the first apple-touch-icon a few years ago, also using realfavicongenerator: when favoriting/bookmarking in Safari iOS the icon was empty instead of showing the image. Eventually it showed up but I don’t recall how or exacty when, but it definitely took a lot longer than it should have.
I’ve obviously tried clearing cache and website data/history through Safari settings, restarting my phone, appending a variable to the apple-touch-icon URL, using both absolute and relative paths, and tinkering with different image size specifications, none of which worked.
I saw a suggestion somewhere that resetting the phone may work, but my question in that scenario is what exactly to reset and whether this would compromise other data.
Are there any workarounds/fixes I’m not aware of?
I’m using an iPhone 7 with iOS 12.2. The code being used is straight from what realfavicongenerator provides.
RealFaviconGenerator's author speaking.
As you noticed, iOS Safari is quite lazy regarding favicon reloading. It is not the only one.
The trick is to force it to reload the icon by providing a URL it never encountered before. A simple way of doing this is to suffix the existing icon URL with a dummy parameter. For example, change /the_icon.png to /the_icon.png?v=2.
To do so with RealFaviconGenerator, generate your icons again. This time, make sure to open the Version/Refresh tab in the Favicon Generator Options panel, and select the second option, as below:
Note: You might want to edit manually the code already created by RealFaviconGenerator and append the version yourself. This might be a bad idea. For example, if you put your icons in your root folder, some HTML lines were not generated (because of conventions RFG is taking advantage of). But suddenly, these lines must be added to specify a version. This is definitely not something you can guess at first sight.
New favicon showed up today, with no intervention on my part (versioning had also been removed). Not sure why. Guess it may be due to a time interval.

offline product presentation for ipad

i have to create a product presentation tool that runs offline on an ipad.
i have a program wirtten in c# to create a presentation and this program has an export function, this export function creates a whole little homepage (only html and javascript) with the product slider - everything works fine, also the online presentation is perfect.
but the capital problem is, how could i run this offline on the ipad?
what i already tried:
- put the scripts to dropbox and tried to start index.html on ipad (the local links doesnt work)
- i tried to chache the whole page, but that was too much for caching..
there is also one solution i would prefer -> phonegap, but there i see the problem with creating the app... the c# programm should prepare everything, so the clients should take this exported file/files or direcotry and but it anywhere and the ipad should run this presentation offline.
thanks guys
You can try to make a simple app with UIWebView inside and load your local resources into this UIWebView.
Here are some similar questions on how to make it:
First
Second
Third
The way your clients are able to add the presentation files might be using iTunes File Sharing. And you can get these files from Documents directory
Hope this will help.

Saving entire webpage with AFNetworking

I use web views in my app and I want the user to be able to open a page in offline mode if he has opened it already before. So I need to somehow store entire page, including images. Is there any easy way to do it where I don't have to parse entire html looking for 's and downloading them separately? I was doing it in my previous project by using ASIWebPageRequest, but I was thinking about moving from ASIHTTPRequest to AFNetworking, starting from this project.

UIwebview loading remote html with bundle/local images

Well, i searched everywhere but i didn't have any luck with my situation.
I am loading my webpage with UIWebView with the following code:
NSString *fullURL;
fullURL=#"http://domain.com";
NSURL *url=[NSURL URLWithString:fullURL];
NSURLRequest *requestObj=[NSURLRequest requestWithURL:url];
[_webView loadRequest:requestObj];
I want to load the remote HTML file but load the images from the bundle resourses.
The HTML file looks like this:
<img src="http://domain.com/images/image.png" width="20px" height="20px"/>
Can this be done? The majority of the posts over the internet(and here) are for loading local HTML with local images/resources which is different in my case.
Any help with my code?
Thanks
It would probably be better to use some more "loosely coupled" solution - not to edit the HTML code itself in some hacky way (regexp, not regexp... changing the HTML code manually is still pretty hacky).
As a matter of fact, I believe it can be done. The iOS just needs to be somehow informed that some of the assets are available offline, from the bundle.
Basically, when UIWebView is loading a page, first thing that happens behind the scene is downloading the main *.html page. Then all the graphics/css'es/js'es etc are being downloaded.
You can let the html file be downloaded "as is", but intercept those requests that are going to download graphics (+ other assets) and provide them from local bundle. Please refer to this post:
http://robnapier.net/blog/offline-uiwebview-nsurlprotocol-588
and apply appropriate changes. The big win here is that from the webview's (and code that loads / maintain via JavaScript calls it's content) perspective - nothing has changed at all. Only the custom NSURLProtocol itself knows that some data was loaded from local storage.
Had the exact same problem. Subclassing NSURLCache to redirect the cache to cache images from local storage worked like a charm.
Here is the writeup that I followed:
http://www.cocoawithlove.com/2010/09/substituting-local-data-for-remote.html
TL;DR Complicated, avoid if you can, but possible.
If you still want to do it: don't do a UIWebView :loadRequest on the URL itself since it will trigger the start of downloading images very rapidly so modifying the images sources using Javascript will likely happen too late.
What you instead have would have to do is to download the contents of the URL on the native side and iterate the image tags there replacing the sources (quite complicated, don't use Regular Expressions to parse HTML btw, there are libraries for that), then injecting the modified HTML using UIWebView loadHTMLString:baseURL:.

Resources