iPhone HTML5 website on homescreen with jQuerymobile offline splash page? - iphone

How do I go about loading a splash to the user if they are offline? I want it to show after the initial loading image, I have a page called gone-offline.jsp but how to detect if user is offline on mobileinit?
I'm not using phone-gap

You need to decide what offline means to your business scnenario. This may sounds silly, but it depends on what your app wants to do. For example:
Does your app want to go offline when it is actually offline and can't reach other websites, or does it want be in offline status when it can't access your webservice.
Assuming you want to test that there is no connection to your webservice I would recommend the following:
1) Make an ajax call every x number of minutes to your webservice to check if it is still online
2) make a common method that handles time outs if your application thinks its online and is offline.
3) make it so that when your application is offline, it is trying to get back online in the background by doing a similar step to step 1.
To do ajax with JQuery see: http://api.jquery.com/jQuery.ajax/
Note that if you require cross domain json (you may or may not) then you will need to investigate CORS/JSON-P/XSS with iframes.

it's very simple using javascript.
if(navigator.onLine)
{
//online code here
}else{
//offline code here
}
(done with jQ mobile)

Related

Should a PWA be a SPA too?

I was wondering that because my app does have an initial journey that is totally diferente from the behaviour of the app.
I would like to separate this initial journey into a different "HTML" due data transfer and load time. Even not using the same framework (Angular2) as the rest of the app.
But this way the app is not a SPA anymore.
Does this harms the "Connectivity independent" or "App-like" PWA principles?
Obs. We are trying this because our researches shows direct relation between user engagement and speed of the loading time of initial tour.
Following the single-page app pattern for your web app means that you'll have a smooth transition to handling navigations cache-first in your progressive web app, using an App Shell approach.
Following the App Shell pattern isn't the only way to build a progressive web app, but if you take a different approach, you'll need to put more thought into how you cache your HTML, and you might have a harder time using a service worker to respond to navigation in a cache-first manner. Some of these considerations are outlined in this "High-performance service worker loading" article.
If your web app is currently a hybrid of a SPA along with a few static pages, then you can take that into account when you respond to navigation requests in your service worker by examining the incoming URL. Assuming there's a well-known prefix or other way of identifying whether a given URL corresponds to the SPA portion of your web app or the basic HTML portion, you can respond differently inside your fetch handler:
// Not shown: install and activate handlers to keep app-shell.html
// cached and up to date.
self.addEventListener('fetch', event => {
if (event.request.mode === 'navigate' && event.request.url.includes('/spa'))
event.respondWith(caches.match('app-shell.html'));
return;
}
// Either do nothing, and your non-/spa URLs will go against the network,
// or use a runtime caching strategy to handle your non-/spa URLs.
});
Updated on 2018-06-21: For an additional perspective, you can read "Beyond SPAs: alternative architectures for your PWA"
The short answer is PWA need not be SPA.
If we look at the documentation website of Web Firm Framework you can see it is not an SPA but it is a PWA. If we refresh the page while offline it works. We can also do "Add to home screen" in mobile chrome to add it as an app which brings App-like experience.
So to get an App-like experience your home page and some of its links must be able to be cached.

Updating Page Content Without Refreshing Page

I want to update recent notifications on the user's dashboard without refreshing it whenever there is a change in database notification table...as in Facebook where posts and comments are updated in real time...doesn't require page refresh. How can I do it. Any idea?
Thanks in advance.
I work for a company called Realtime (http://www.realtime.co) and we developed a very cool framework to work with real-time data.
It works on the cloud, we offer a lot of different APIs, you don't need to install anything and you can get a free account (with 1.000.000 free messages and 30.000 users per month). It allows you to push data to browsers, meaning you won't be hammering your server with AJAX requests.
On browsers, it uses websockets, if available. For older, non-websocket browsers, we will transparently fallback to whatever is that your browser can use.
Check out http://www.realtime.co and http://www.xrtml.org for downloads and documentation. Please let me know if you need any help as I am the Developer Evangelist for Realtime :)
It is something called asynchronous. Which you refresh the contents of a webpage or a DIV or anything else without reloading the page.
Actually you should use AJAX to load another page into a already present DIV in your page so it will be refreshed on a time basis.
AJAX
The documentation is really simple on w3 schools you can see there.
But the thing is you should use another page called a Handler or something to load and process the contents and then make them ready to be presented in your page and so you can load it time by time using javascript timers or etc.

How to fetch data from website within the app?

I am developing an app for Lawyers to be used here in Brazil and one of the features of this app is to track the phase of the lawsuit as it develops through time.
It works like this: the user fill a form within the app with the info on the lawsuit and it is stored in a database. Whenever the user wants to know if the lawsuit has any new record, he'll push a button and will get the records ordered by date.
The website that the app will fetch is http://www.tjpb.jus.br the problem is that I donĀ“t know how to code in order to get the app access that site, input the lawsuit number and get the reply displayed on an UIWebView.
So could anyone help me, or just give me a guide on where to find a solution for this?
You will need to asynchronously go to server(via that url) and parse data, then show the responses in UIWebView. But as far as i know you will need a PUSH Server and clerify which data you will show from that site.. This is a great source to get started with app development, you can find video lectures in i-Tunes too
I'm not sure what you really want to do, but one scenario could be that you build a URL, like
http://www.tjpb.jus.br/?...&...
and load it in an UIWebView or if there is a webservice there you should use a lib like ASIHTTPRequest to manage your API calls.

Hosting password protected videos for my iphone app

I am building a paid iphone application which
- shows some premium content videos to the user.
- app loads a page from my webserver in UIWebView
- but the videos are hosted at some other video hosting site.
I realize that, in order for me to be keep this app paid, I need to keep the video links protected/secure (else if the urls are leaked, no one is going to want to pay for it).
I can easily password protect the webpage (pointing to the actual video) and make the user name and password available to the iphone app to access this webpage. But when the user selects the video link, the app will load that url. If user sniffed the packets on the iphone at this time, they could get access to the url and just run it from there directly.
I dont believe mod_sec_download or mod_xsendfile can work in this scenario because the video link is external. Right?
Is Amazon S3 a possible solution?
Would appreciate any insight/solution.
Thanks!
Don't point directly to a video file. That'll make it trivial to steal. instead, point at a proxy script that can check the source of the request and verify that it's coming from a registered purchaser.
With appropriate one-time tokens, tracking of usage, etc... you can keep most people from sucking your site dry. And of course, the best practice is to embed a watermark into the video as it plays, so that even if it gets stolen, you can track it back to the first person to release it.
You might want to take a look at the OWASP Top 10 and in particular, number 8 about failure to restrict URL access. This is effectively your scenario: you have resources which need to be secured at the server level. You can't just do this from the device end, the location of resources requested by the device is easily discoverable.
So it comes down to access controls on the resources, in this case, your videos. How you do this will depend in part on your server stack. For example, IIS7 has an integrated pipeline which can apply access controls to resources of any type such as PDFs, images and videos (more on this in OWASP Top 10 for .NET developers part 8: Failure to Restrict URL Access). Alternatively, you'll need some form of application proxy which can take responsibility for the authentication then delivery of the video content.
This is really more of a webserver issue than an iPhone issue. Focus on getting the access controls right on the server then the iPhone end will be a much more straight forward process.

starting iChat session in iPhone from web app

This is really just a "what-if" type question, so forgive me if it is either ridiculous or ridiculously easy...
I have a client whose site offers a "chat with a consultant" option that you see on many sales and support sites. We were wondering if there was a way that iPhone users (or any user, in theory, but mostly iPhone) could click this option and after giving the basic form info (name, question,etc) the actual chat itself could open up in the chat client.
Is this as simple as the "click here to send me an AIM message" syntax?
The XMPP (jabber) server is Openfire and the webchat uses the Fastpath plugin. Would this feature need to be enabled deeper than the page's HTML/PHP? Does the server/plugin need to modified as well?
Would this threaten the security of the XMPP server (which is behind a firewall and can only be accessed externally via the above plugin)?
Does this even sound like something that iPhone users would appreciate, or would it simply be confusing/obtrusive?
Sorry for the objective last question, but I'd hate to spend time on this only irritate users.
Referrals to resources and documentation welcome. I'm not looking for someone to walk me through the whole thing, I just want to get an idea of it can be done and where to start reading.
I'm a little confused by what you want to do - the user fills out a form on a web site and then they are put into a "chat room" on their iPhone?
This is possible. However all of them require that the user has already installed your app, so it may be a hurdle to what you are trying to do.
However if it's using a pre-existing chat service (such as AIM), you may already be OK if the user already has a chat client installed on their iPhone. You could launch the app using custom urls or push notifications - however, this is assuming that the app developer has enabled such hooks, and if so if they are published.
If you want to go with your own client, if the user is filling out the form on the iPhone, then on submission you could redirect them to a custom url for your application. From mobile Safari, this will directly launch your app. Note that the user must already have the app installed for this to work, or else they'll see an error, and it won't be a particularly user-friendly one.
Another way, if the user is filling out the form on their computer, is via push notification. Again, they must first have the app installed. They would receive a notification that, on acceptance, launches your app.
The final way, if the user is filling out the form on their computer, is that they would have to download your app first and run it, so that it could communicate with a desktop client of yours via network services.