What an absolute whirlwind. I’ve just spent the morning looking at options for how I can sidestep PhoneGap’s animation limitations, and reckon I may be onto something. I originally chose PhoneGap because it allowed me to use web dev skills and translate them into app dev skills. As it turns out, although an early innovator in the field, PhoneGap are far from alone in this approach. Enter Progressive Web Apps.
Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next.
Connectivity independent - Enhanced with service workers to work offline or on low-quality networks.
App-like - Feels like an app, because the app shell model separates the application functionality from application content.
Fresh - Always up-to-date thanks to the service worker update process.
Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.
Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
Re-engageable - Makes re-engagement easy through features like push notifications.
Installable - Allows users to add apps they find most useful to their home screen without the hassle of an app store.
Linkable - Easily share the application via URL, does not require complex installation.
Essentially, they are a way to cut out the middle man and create a web app without PhoneGap. The whole things still sounds a little intimidating to a beginner like me, but having now familiarised myself with PhoneGap’s setup I at least have an understanding of what a web app expects - like a config.xml file, npm plugins, and <meta> tags to specify platform-specific content.
Tristan helpfully suggested I should try running the raw web code in my mobile browser without first putting it through PhoneGap. I did so and tested its animation, and sure enough it was much smoother than when installed as a ‘native app’ through PhoneGap. It wasn’t perfect, but there’s probably more I can do to optimise the interface for the mobile environment, such as being more frugal with the overall number of elements that receive animations, prioritising transitions foremost, and selectively forcing GPU rendering (a concept I didn’t know existed two weeks ago). Having run the web app locally without PhoneGap I now have some confidence that a PWApp should do the trick.
The only drawback is that a web app must be served via HTTPS in order to access core functions like the camera. Obviously this is something I’ll need, and this restriction actually is one of the key factors that led to me using PhoneGap in the first place (converting it to a ‘native’ app sidestepped this web requirement). However I’ve since remembered that although the viewfinders.gallery host is not HTTPS certified, the current web app prototype is, due to being built and run through google scripts.
There’s a faint light at the end of this tunnel.