HTML contents preloaded into an app and then updated from the Internet - ios

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?

Related

How to show response from GET ajax call after user is offline through service worker?

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?

WKWebView analog of service worker

I'm trying to implement part of app with PWA approach, that works fine on Android, but not for iOS. We need to have
offline content availability
option to update content dynamically (like special offers or so). With service worker we show prompt to update web content.
As were mentioned here service workers are not supported within WKWebView (or UIWebView). So is there analog or alternative solution like smart cache control?
Seems like it is possible to store some web content from app and be able to update it if something changes. May there is already a framework/library/approach for that purpose?
EDIT
Service Workers unavailable in WKWebView in iOS 11.3 - this question explains the status of ServiceWorkers in WKWebView, but no alternative is given. I would like to discuss any alternative solutions.
One thing I discovered is https://github.com/xtools-at/iOS-PWA-Wrapper. It looks like working based on AppCache, but https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache#Browser_compatibility says it is deprecated and adviced to use SW instead (which is not an option for PWA).
So before WKWebView get service-workers to work, you can use AppCache (not yet fully deprecated).
You can use this and take a look at source page at https://leasingrechnen.at
What they do? In case if there is no service worker in browser, they load iframe that points to a page with manifest.appcache file implemented, so the page is cached.

Alternatives to Appcache

I am developing a site using PHP, and I was a bit mislead by how Appcache works; it turns out that it also caches the current page. Which, in the case of a PHP app, is a problem. :)
I'd still like to cache my javascript, css and images on the client, but not my actual generated page. What is a good alternative for that? Just the plain old cache headers? The problem I see with them is, that they still produce requests. I am trying to mimize the amount of requests a client needs to make - this includes 304s.
As you might have found out by now, appCache is in the process of being deprecated and will sometimes disappear. It was a good solution for offline applications (static pages with variable data), but not as a cache for static files in dynamic pages.
You could try to include a blank page with a manifest in a hidden iframe in your dynamic pages, but still only pages present in the appCache would use the static resources downloaded from the manifest; the other pages would check the live static resources from the server anyway (the only part of the manifest which is valid everywhere is the "fallback" part).
So your best option is to check your cache headers as suggested by Marged, as it IS possible to avoid server access indefinitely for a static resource.
You could dig what the ServiceWorkers cache does, but I'm not an expert in the field (for now).

Download entire website

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.

Offline webapp on iPad

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

Resources