Local Storage on iPad - ios

I've developed a web app that needs to work on mobile devices offline. I've looked into progressive web apps and I'm pretty excited by the trend. Sadly, Apple still doesn't have working support, but it looks like that's changing https://cloudfour.com/thinks/apple-starts-work-on-progressive-web-apps/
Even though Apple devices don't support PWAs as Android does, it seems like certain features are already supported such as offline storage via IndexedDB(?). Does anyone know if I can currently use IndexedDB via PouchDB (for instance) to save/retrieve data? A link to a web app with this capability would be very helpful.
All I need to do for my app to function is to be able to open pdf's located on the local file system and update/retrieve data from a browser based db. Hopefully this is possible.

I don't know what a progressive web app is, yet you can definitly use PouchDB on apple devices.
The pouch docs (dating back to 2015) still say that there's no support for IndexedDB on iOS Safari as the implementation is too buggy. Back then you could use PouchDB via WebSQL on iOS.
Recent versions of iOS and Safari do support IndexedDB, see the caniuse on IndexedDB. So you should also be able to use PouchDB via IndexedDB.

Related

Technical differences between PWA and Hybrid App

What are the differences between a PWA and a hybrid app? This question was asked before but I haven't found found a proper answer to my question.
I know a PWA runs in the browser and you get a hybrid app from an app store.
But both are using JavaScript with HTML and CSS and both enable offline support and I can access native features like camera and local storage.
Once I have added a PWA to my Homescreen, it uses a web view to render the app right? And a hybrid app uses a web view as well, so what exactly are the differences between PWA and a hybrid app?
With Ionic I can even use the exact same code for a pwa and a hybrid app...
Roughly it is like this below:
web app (PWA) is just a web-site that declares certain capabilities using manifest file etc which can get it some special treatments (like leverage service worker, sign up for web notifications, go full screen etc IF target browser supports it). As a web-app it is super limited in its "privileges" on a system level (like persistence quota etc)
hybrid app (like Cordova for example) is a binary code that is "wrapping" your web-code and exposes certain "native" SDK capabilities via plugins. You can potentially also write your own plugin and in theory access any native SDK API this way. But since your main app code is still a web-app that runs inside of a webview it still has a lot of penalties like performance etc. But at least you can get things like storage etc.
native app is a binary build using target platform's SDK. That in
theory gives you max access to capabilities and performance at
expense of having to write separate code for each platform.
Makes sense?
Progressive Apps
Today, these apps only work on Opera, Chrome, and the Samsung mobile browser. However, these browsers take up only less than half of the mobile browser market.
In some devices, some of the features will not work. For instance, notifications on iOS devices will not work.
In some apps, cameras, fingerprint scanner, and GPS may not work or work with glitches.
Cordova/ Ionic based hybrid apps
Making the hybrid apps run efficiently on multiple platforms is no easy task. In some instances, it could cost almost the same as running native apps. The cost will depend on how close you want to get to the native app experience.
Since these apps will launch using a browser-like component, they are only as good as the component on which they run. Earlier, Google and Apple did not agree on the WebView. While it has vastly been improved, it does not have the same efficiency as running a native app.

Web App accessing iOS camera for QR scanning

For 'check-in' purposes, my staffs have a mobile device (ios and android) that opens my web app through a browser. They then open a page and it allows them to scan a customer's qr code to check them in. I would like it to have as little user interaction as possible. All they staff needs to do is to keep the webapp open, and scan the qr code. The web app will then call an api on my server which check this customer in. So accessing the camera's view is best, i can then run a qr code scanner.
I've been able to do it for android (using getUserMedia) but it doesnt work for ios. (duhhh)
I'm currently using Vue.js(V1), and would like to keep it as it is.
Hybrid Apps: I've looked at OnsenUI(which seems to only work with vue2), Ionic(which doesnt allow me to build/run ios platform as i am using windows).
webapp is coded with vue.js(v1), running on a tomcat7 server, HTML, JS.
Are there any suggestions?
I've found a way to use Phonegap to allow this.
Edit: Phonegap allows you to create a hybrid app that seems like a native app(ios or android). All i did was install phonegap and used one of their plugins (barcodescanner). This is the refrence i used.
But, from my understanding, You'll need to publish the app on the app store, which is a lot of hassle (and cost money).

webRTC-enabled browser for iOS?

Preface: there are questions (some good, some bad) already in existance on StackOverflow about webRTC support on various browsers and platforms, including iOS. However I couldn't find anything definitive that was more recent than ~2012, and this is a rapidly-changing field.
I'm working on a browser-based webapp that uses webRTC for minimal-latency peer-to-peer data transfer (not for audio/video, unlike most applications it would seem - all I need is DataChannel).
I hit a snag when I started testing the data-transfer part of the project and discovered that iOS devices still don't natively support this in their built-in browsers (despite some recent rumors).
Bowser is a free open-source browser App for iOS that purports to support webRTC on iOS. The problem is that when I try to open the app, it simply crashes and closes. I've tested this on an iPhone 5 and 5s. Googling has failed to turn up alternatives - even Chrome for iOS doesn't currently support webRTC it seems.
My questions:
1) Are there alternative browsers (even iOS-version restricted) that are currently supporting webRTC, or is there anything promising coming down the pipeline?
2) Does Bowser actually work (webRTC) on iOS devices where it doesn't crash immediately upon launch?
3) What strategies have other people used to work around this limitation?
As of iOS 11, WebRTC is now supported in Safari: https://developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Articles/Safari_11_0.html#//apple_ref/doc/uid/TP40014305-CH13-SW1
Check out crosswalk project ( https://crosswalk-project.org )
This Provides runtime of Chromium engine for native support in older devices.
1) Are there alternative browsers (even iOS-version restricted) that are currently supporting webRTC, or is there anything promising coming down the pipeline?
Answer:
There is a Browser called Bowser that supports webRTC.
2) Does Bowser actually work (webRTC) on iOS devices where it doesn't crash immediately upon launch?
Answer:
It's not crashing as of now.But I couldn't successfully test with anything so far.I have raised an issue about it
3) What strategies have other people used to work around this limitation?
Answer:
Apple is yet to support WebRTC in Webkit so as of now the only way would be develop a native or Hybrid app that would support the unsupported WebRTC APIs.
You can develop a hybrid app powered by OpenWebRTC or cordova-plugin-iosrtc

Does Chrome on iOS support the filessytem API

I know chrome now supports the HTML5 filesystem api on desktop and I believe on Android but I have not seen any reference to chrome on ios supporting it. Does anyone know if it does?
No. Since iOS doesn't have an open/public filesystem.
Chrome on iOS uses Mobile WebKit, which does not support FileSystem or FileWriter APIs. You can test it out by pointing a device or simulator to this test page.
You can learn about the client-side storage and caching options that are available on this section of the Apple Developer website.

HTML5 mobile app - when to simply use UIWebView and when to use PhoneGap?

I am a web developer who needs to build an HTML5 mobile app - which we will need to try and submit to app stores, including Apple's App store. Therefore, I need to somehow wrap my app into a native framework.
That being said, I don't have time to learn the nitty gritty of Objective-C and figure it all out.
I am trying to decide between using a service like PhoneGap, or simply creating a smaller native app with a webview that pulls up my mobile app from my site's server.
In this case, the only native hardware that my app needs to be in touch with are push notifications (probably through Urban Airship) and Geolocation (which can be accomplished via HTML5).
When is it wise to go with something like PhoneGap vs. simply creating a UIWebView, and vice versa? Which would you suggest in this case?
Apple is loyal enough to PhoneGap apps - almost no problems with approval on iStore. You should just follow Apple Human Guidelines and everything should be OK.
PhoneGap provides lot's of different and interesting features. Also it's cross-platform - works great on iOS, Android, WP7 etc. I think it's the best way to wrap your HTML5 and JS.
Talking about pushes - if you select phonegap, i recommend to look at pushwoosh service.

Resources