I am currently developing a mvc4 application that needs to work on mobile browsers.
One of the requirements I have for it is that if the device cant connect to the internet, the site should still "work", and any changes get sync'd to the server once an internet connection is reestablished.
The site is an ecommerce site so I would be looking at such functionality as adding items to a shopping cart etc.
I had looked at html5 local storage to manage the changes when the app is offline but not sure if that storage will exist across multiple pages of just a single page. Can anyone confirm? I plan in storing the page on the clients device by using a cache manifest file.
I would like some pointers as to how I can achieve a site to work offline and once a conneection is establish, changes syncd to the server?
I would use javascript events to detect online/offline state (search in safari docs) - with jquery (not jquery mobile), i would use the "single page application" model (link below), i would store website and user data data in local storage, and use a timer to try to push/get changes.
Single page application with MVC4:
http://www.asp.net/single-page-application
Related
Is it possible to share IndexedDB stores and data between a progressive web app (PWA) and stand-alone Safari on iOS? If so, what steps do I need to take to share the stores/data?
My use case is that I have a would-be PWA that uses third party authentication. The normal behavior is that when navigating to the third party authentication page, the PWA automatically opens the page in a new Safari window since it is out of scope. I would like to save the authentication token in IndexedDB from this Safari instance, open my PWA, and then load the token from IndexedDB in my PWA.
I have tested this implementation. It works fine (ie I can read the token from IndexedDB) in Safari standalone, but when I navigate back to my PWA and attempt to read the data, it doesn't exist. This suggests that the stores cannot be shared, but I am looking for a more definitive answer. I find no indication one way or the other in internet searches.
Note: local storage, session storage, and cookies are not shared between Safari and PWAs on iOS, so those solutions do not work which necessitated the use of IndexedDB
Rather than opening a new tab, you can use a pop up, like how it has been beautifully explained here with example and source code.
The key idea used here is window.postMessage, which allows windows and frames to send data across domains to one another.
I'm new to mobile app development, I've been tasked with making an app and so I'm now starting my voyage of discovery. I am coding the app in Visual Studio 2015 with Xamarin using a Mac Book Pro as the client for testing, all our data is stored in a database in our Azure portal. The app I am making is for iOS.
I've read the documentation but I'm getting stuck in certain areas and I think it's down to not understanding what is needed based on conflicting documentation or my own failure to grasp the concepts outlined.
All I am looking to do at the moment is have my app grab data from my azure database and display it in a list/table.
The steps I have taken so far are:
I have created a very basic app within visual studio with a
storyboard and a navigation item that points to a table view(where I'd like my data to be shown).
I created a Mobile App in my Azure account(as per documentation).
I have set the above mentioned mobile app to use my current existing database and supplied it with the username and password which all seems to be ok.
I am now at the point I need to get my app to talk to this mobile app and grab some data from my database. The todo example is ok but it's not quite enough to get me up and running or more specifically it's not in quite the right context for my setup and I think it's causing confusion.
There seems to be a few ways to set the project up for data access but I'm not sure what would be best.
Can anyone assist?
You are nearly there.
Instead of connecting directly to your database, you connect to your mobile apps API which then connects to your database, handles your request, and sends the data back to your app. You need to code this backend first so it is able to handle your requests. Take a look at this tutorial, it is really good :
https://learn.microsoft.com/en-us/azure/app-service-mobile/app-service-mobile-dotnet-backend-how-to-use-server-sdk
You will access your Azure Mobile App with the Azure Mobile Client SDK nuget package.
A complete guide to do this can be found here: https://developer.xamarin.com/guides/xamarin-forms/web-services/consuming/azure/
There is also this podcast: https://blog.xamarin.com/podcast-building-connected-apps-with-azure-mobile-apps/
I have a simple web page with a javascript touch enabled slider that I would like my client to be able to run on their iPad without an internet connection.
Saving it to reading list kind of breaks the javascript.
If it's open with a connection and then exited, then reopened without a connection safari says it can't be opened but pushing the back button loads the cached version properly.
Is there a way to open cached files or save html files locally better?
You're asking for two features that have been introduced with HTML5:
Offline web applications to make your page accessible even without an Internet connection
Local storage to save your page's data on the client
I have a client that needed to abandon their very poor native app and needs a temporary solution immediately. They have a mobile optimized website and we'd like to deploy an app in the store to replace the current one, and design it such that as soon as you launch it, it either hosts the site within a web browser control, or just redirects the user to a website in the iPhone Safari app. I realize there are subtle differences between the browser control and the actual Safari browsers.
Are there any tools or products that auto create such simple apps, and are there any problems with getting such simple apps approved by Apple?
Sounds like you want to make a hybrid app.
http://www.cocoacontrols.com/posts/a-primer-on-hybrid-apps-for-ios
Your app could just be a UIWebView that shows the website. It's possible that Apple might reject ithe app if there is nothing to it except a web view -- do some research on that possibility.
I'm developing a small HTML5 web application for iPad that is intended to work in fullscreen mode (ie. it has the proprietary Apple meta tag, it is added to Home Screen):
<meta name="apple-mobile-web-app-capable" content="yes" />
The application basically fetches some data via AJAX and presents it to the user. The AJAX data are external (from a different domain, different server). I have the system setup for cross-origin requests, they work in online mode. In other words: the static data lie on server A, the dynamic data - on server B.
I created a proper cache manifest file, listing all static content of the site (HTML, CSS, images, JS) and then having the NETWORK: * section at the end - this way all the dynamic content (AJAX) is always retrieved from the network. The application fails "gracefully" if the requests fail, by displaying some fake content.
With the above setup, the following happens:
If I run the application while online, everything works ;)
If I disable the WiFi on iPad (pure offline mode), everything works as expected - the application falls back to the offline content
If I connect to the network again, but take the static-content server offline (the one that has everything cached), the application won't start; after spending a while in splash-screen, it shows me the a popup with <app> could not be opened because it could not connect to the server.; I can either choose Close or Retry.
The point 3 of the above is the one that drives me crazy because it was the only reason I started fiddling with application cache. Why doesn't the iPad web app fall back to cached content if the manifest file is not reachable? (not 404, the server is offline)
Is the answer to HTML5 iphone offline webapp completely incorrect? If not, how can I achieve this behavior on iPad?
Point 2 and 3 are completely different scenarios, so we cannot expect the same behavior.
In point 3, the device cannot fall back to the cached content when in online mode because if it do so, there will be no way to know for the user whether he is connected to the server or not.
I mean, in offline mode, the user knows it, and knows that he is with cached data. But in online mode, he expects to get the stuff from the server. If the server is not available, the user should be aware of this. If the server is not available and he is sent directly to cached data, the server error will be hidden to him, thinking that he is connected when he is actually not.
For example, web browsers can cache pages to be seen in offline mode. But if we are in online mode and try to open an unavailable page, we expect to see the error message, not a cached version of the page without any warning. We can go to offline mode to see the cached page if we want, but the correct behavior is to show the error to the user.