I have a website written in php / javascript. It's quite simple, basically :
on the first page it shows a list of category
when a category is clicked, a new page is displayed with a list of pictures (that can be clicked to get a bigger version, using AJAX) and some text details
I'd like to be able to browse this site offline on an iPad, what would be the better way ?
I saw it is possible to add some html5 caching capability, would this be the way to go ?
You should try the HTML5's caching and/or persistent storage feature. You can save app data or even whole files, and either access them from JavaScript to display, or ask the browser to seamlessly display the cached files when there's no Internet connection. Some links may help:
http://www.html5rocks.com/en/tutorials/appcache/beginner/ <- this one is the caching-related
http://dev.w3.org/html5/webstorage/ <- and this is about persistent storage.
Hope that helps, Árpád
Related
Basically, I want my PWA to work offline. But on page load of website, there is an GET ajax call which helps in showing some content of the page.
Question is how do I let my PWA work offline as there will be an ajax call on page load which would require me to either store the response in cache?
As the content can be heavy, is it even correct to cache so much data?
Also, I read somewhere that we cannot cache GET requests, so how can I proceed with making PWA work offline?
I have tried looking at the following links, but these do not say me how to cache a dynamic content
https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker
https://vaadin.com/pwa/learn/caching-strategies
https://jslovers.com/dynamic-cache-serviceworkers.html
Of course you can cache "dynamic" content – that's because from the browser's point of view it's just anothe HTTP request :-) It is of course a matter of your application & server logic whether that is useful in any way. For some application caching dynamic content and then showing it to the user at a later time might work completely ok but for some other application it might come with problems. You know, it would be fine to show a rarely updated avatar image but not ok to show old currency info, right?
You could also design the app around these limitations, maybe show the user a notification saying "hey, you're using an offline version and the data is XX hours old!" or something like that.
You can easily store multiple megabytes of network responses into the cache. If you've got more than 50 megs browsers start to limit you. Also, always have error handling ready if the browser tells you the cache is full or whatever.
Does this explanation help you?
We have a basic application that uses a storyboard for all the 'pages'. Each page has basic product info and there is a contact form. It's used at trade shows, usually with an internet connection, therefore the contact form is just a UIWebView.
The next event has no internet available and I need to set up the contact / details form to work offline and store the info on the device (iPad), with a page to also retrieve it. I'm not overly experienced with iOS (but I'm proficient in programming knowledge), so any ideas or pointers to tutorials would be great. Thanks!
You can save your data in the form of a plist.
Later you can load your data from the plist using the code here.
Load NSDictionary from plist
Plist can be helpfull but you are using webview so you cannot put plist's data to webview. so you need to cache your pages. that can be enought for your situation: iOS Cache a UIWebView
Or this approach is better to use UIWebView webpage caching for offline viewing
I want to be able to download the entire contents of a website and use the data in my app. I've used NSURLConnection to download files in the past, but I don't believe it is capable of downloading all files from an entire website. I'm aware of the app Site Sucker, but don't think there is a way to integrate it's functionality into my app. I looked into AFNetworking & ASIHttpRequest, but didn't see anything useful to me. Any ideas / thoughts? Thanks.
I doubt there is anything out of the box that you can use, but existing libraries that you mentioned (AFNetworking & ASIHttpRequest) will get you pretty far.
The way this works is, you load the main website. Then you go through the source and find any resources that that page uses to display its contents and link to other pages. You then need to recursively download the contents of those resources, as well as its resources.
As you can imagine, there are few caveats to this approach:
You will only be able to download files that are mentioned in the source codes. Hidden files or files that aren't used by any page will not be downloaded as the app doesn't know of their existence.
Be aware of relative and absolute paths: ./image.jpg, /image.jpg, http://website.com/image.jpg, www.website.com/image.jpg, etc. could all link to the same image.
Keep in mind that page1.html could link to page2.html and vice versa. If you don't put any checks in place, this could lead to an infinite loop.
Check for pages that link to external websites--you probably don't want to download those as many websites have links to the outside and here you downloading the entire Internet to an iPhone with 8GB of storage.
Any dynamic pages (the ones that use a server side scripting language, such as PHP) will become static because they lose their server backend to provide them with dynamic data.
Those are the ones I could come up with, but I'm sure that there's more.
The title says (quite) all: I would like to distribute an app with some HTML pages preloaded into the local Documents folder (they reflect the content of a mini mobile site available on the internet); then, when the contents of the pages are updated, the local HTML files into the app should be updated, so that the user can browse the updated informations also when not connected to the internet.
The app has to work since the first start, thanks to the preloaded pages, and then update itself periodically (I didn't need to check the modify date/time of the single files, it's enough to check and update them when the local copies are older than x days).
The problem: I think I can do it all, but I was asking to myself if is there some framework/class that does it automatically, because it sounds to be a pain :)
Consider using ASIHTTPRequest. Check out this SO question.
Specifically, you might want to look into ASIWebPageRequest:
download complete webpages, including external resources like images
and stylesheets. Pages of any size can be indefinitely cached, and
displayed in a UIWebview / WebView even when you have no network
connection.
I've also used AFNetworking for my own personal projects and it's made my life 10x easier. On the AFNetworking FAQ page, there's a question regarding caching mechanisms for offline viewing. It mentions that NSURLCache in iOS 5 introduced support for caching to disk for offline use - but only for http. If you need to cache https, consider using SDURLCache.
Here's a short additional resource in regards to network caching for iOS.
Read the section titled iOS network caching
If you are looking at pre popping your iOS app with the equivalent of a browser cache then
https://github.com/rs/SDURLCache might be something to look into.
It hooks in with existing NSURLConnection frameworks such as AFNetworking and you just need to set the correct cache policy in your NSURLRequest.
Given its open source you should be able to figure out how where to place your data so it loads it without fetching from the server the first time then just specify when you want the cache to purge itself so it fetches it from the server?
I have an HTML5 application that allows users to drag-n-drop an image to a canvas, or alternatively, browse for it on their local disk. Once I got the image, I display it in the canvas using context.drawImage(). Got all the kinks out and it works great.
BUT. Now my customer want to use it on an iPad. Drag-n-drop is out of the question (the browser is a full window on iDevices). But the browse functionality, which is basically an input of type file, doesn't work either.
To clarify, the behavior I need is selecting an image from the gallery and displaying it in a canvas.
Any ideas on how I can achieve this?
Thanks for your time.
Unfortunately, there are no satisfying answers for this.
http://learnbythedrop.com/forum/iphoneipad-safari-image-upload-resrictions
Basically, mobile safari is pretty severely sandboxed – file uploads don't work, can't grab files from photos, etc.
With iOS 5 there may be a solution for this using iCloud. Content is stored and pushed to mobile devices. Perhaps you'll be able to access the image from your photo stream?
Alternately, you could use a service like photo bucket or flickr to store your images, then use the API to access them from your page.