BrowserSync Capabilities (live reload, click/scroll mirroring) in Cordova Apps - Link
Since Apache Cordova is based on similar web technologies, the goodness of web development can also be transferred over to Cordova projects. There are a couple of plugins like gap-reload, and they seem to integrate pretty well with live reload. This blog is about my experiment to build something that leverage the capabilities of Browsersync.
Here is a quick 2 minute demo showing the usage and capabilities of using browser-sync with Cordova. The video shows features like automatically reloading the app when files are edited, mirroring clicks, scrolls and form filling, and even the ability to use native, platform specific plugins.
Integrating into your projectsThe video above shows how this can simply be added as a Cordova plugin. The project's repository also describes how to use this as project hook, instead of having to install it as a plugin. The repo was also structured to be used in any existing workflow and to that effect, the individual modules can also be "required" and used in grunt or gulp.
How does it work?BrowserSync watches for file changes and then reloads the web page, or injects the HTML or CSS into the page. Cordova is similar since is displays content using Webviews. The steps for this plugin are
- Module lib/changeHosts changes platform specific config.xml to serve content from a web server (like http://localhost:3000/platforms/android/assets/www/index.html) instead of the default local index.html
- The lib/browserSyncServer starts up browser-sync, watching for changes in your project's www folder, and serving the entire project folder using its static web server.
- When anything in your project's www folder changes, cordova prepare is run to copy over the changes to platform specific folders. Other hooks are also run to ensure that any transformations you have in your workflow (like compiling less/sass files) continue to work.
- BrowserSync mirrors scrolls and clicks using the current page's path as the key. This is a little tricky for Cordova since the webview content is loaded from platform specific locations (like platforms/android/assets/www/index.html and platforms/ios/www/index.html). To normalize this the hack that I had to put it was to monkeyPatch the canSync function that checks if events are from the same page; the change was to ignore platform specific folders.