Occasionally Connected LightSwitch HTML Apps Using JayData

Question

JayData, as many are probably aware from prior blog posts and discussions on this forum, is a powerful JavaScript utility library for OData providers, including LightSwitch. 
Recently, the JayData developers have expanded the
provider offerings to include many other database programmatic interfaces. 
Their latest release, JayData 1.3.6, codenamed “Advanced Sync Edition,” aims to support occasionally connected apps by exploiting the local storage capability of the browser (Web SQL. sqLite, IndexedDb, etc.). 
Development is simplified when using the same data model and API for writing to both local storage and the OData endpoint.
An example of this is shown at How to Create a Synchronized Online-Offline Data App with JavaScript and JayData. 
This model, the “To Does” project, was successfully adapted to a LightSwitch HTML app without difficulty. 
Although “To Does” projects like this serve as a nice proof-of-concept, they are excessively simple compared to real world business applications. 
Fortunately, JayData 1.3.6 also includes support for configurable foreign keys. 
With this, more complex object-relational mapping that would typically be used with Entity Framework and similar RDBMS may be approximated.
To illustrate, the To Does project was expanded to include entity relationships. 
Specifically, a To Do must be assigned to a single individual Project, and any single Project can have many To Does. 
A Project can be assigned to an Employee or to multiple Employees, while an Employee can have a single Project or many Projects, thus defining a many-to-many relationship between Employee and Project.
So how might and online-offline LightSwitch HTML application work in practice? 
Ideally in my opinion, the transition from online to offline and back should be seamless and transparent to the user, allowing for both UX and UI to be unperturbed. 
This approach turned out to be too difficult for me as a developer, as I experienced problems with the closed-end nature of LightSwitch’s Visual Collection object, for instance. Separation of concerns is a real challenge with this approach.
 There is also the separate UI approach for both offline and online data entry, which have been nicely illustrated by Michael Washington and Paul van Bladel on their blogs using JayData and BreezeJS with AngularJS alongside a LightSwitch HTML
app.  This approach is valid, and from the viewpoint of the developer has its advantages. From a design standpoint, it is likely to be frustrating for an end-user who must deal with “spotty” network coverage, necessitating changing back-and-forth
from one UI to another.
I opted for a hybrid approach, staying entirely inside the LightSwitch HTML app environment but having individual menu options to select depending on the user’s online status, which is constantly displayed with a status icon (see Main Menu figure). 
In many cases, the native LightSwitch screen and menu buttons are fully functional in the offline state. 
When they are not, most often with regard to a “Browse” screen or involving a Visual Collection, I have substituted the updated WinJS library (now at
version 4.0, capable of replacing LightSwitch’s v1.0 with no breaking changes) to create a custom control that resembles the LightSwitch listview.
To use the app, you can use any of the online Menu buttons to enter Employee, Project, or To Do data in the usual way while connected.
  The Offline menu buttons are functional in either a connected or disconnected status, which can be tested by disabling your devices WiFi, for example. 
This LightSwitch app does not work with all browsers, however. 
Because the local database is stored using the Web SQL/sqLite JayData API, it is not supported by either IE or FireFox. 
It is supported by Chrome, Safari, Opera, Android browsers, Kindle Fire, and iPad browsers
(see link). 
To see the local data stored in Web SQL while using Chrome, you can press F12, select Resources, and expand Web SQL to see the Table data updated with each transaction (see figure).
After entering data using the Offline menu selections, you will want to synchronize your local data with the remote LightSwitch database, which is performed by clicking “Synchronize Offline to Online” on the Main Menu. 
A success or error dialog message should follow, depending on the result of the sync. 
The dates and times of the last synchronizations are displayed on the Main Menu. 
With each online database transaction, including offline to online syncs, the offline database is updated to reflect the very latest LightSwitch application data. 
This method attempts to have the LightSwitch online database as the “single source of truth” as much as possible while the user is online.
Lastly (if anyone is still reading this far), note that by design there is no business logic programmed into this application; business logic is a separate issue to be addressed. 
There can be as many incomplete To Does as you want, an Employee can be assigned the same Project many times, etc. 
If your application requires business logic, you will have to program it into the client-side in order for the user to be prompted to follow it while offline.
To experiment with LightSwitch OfflineToDoes app, go to:
http://offlinetodoes.azurewebsites.net/htmlclient
…and log in with username “testuser” and password “Testuser1!” 
In a few days I will try to load the sample project code to MSDN for anyone to download and review if desired.
TL;DR:
JayData provides an attractive solution for creating online-offline LightSwitch HTML apps by automating a single codebase to carry out CRUD operations on both a local datasource and the remote LightSwitch database. 
Integrating the offline portion of the app into the LightSwitch UI requires an individualized solution and is code-intensive, however.

Answer 1

Thank you both for the input. Zardoz, I tried making a couple of updates to address items you mentioned.  I left unfixed the problem that occurs when editing an offline Project's budget item..this still does not work.  LightSwitch identifies this
entity as a decimal, WebSql expects a plain number, but LightSwitch's post-processing business type formats it to currency (I see USD, you may see NZD, AUD, etc.)  In the console there is a "getModel() is undefined" in msls.js.  If I take
out the Money business type to regular Text on the View, it works fine.
I'm not sure if I understood your last item just right, but I tweaked the Add Edit Offline Project screen to prevent the Project from being null if the user only enters a new To Do. Not sure why the screen validation wasn't firing before.
Regarding navigation, I don't wish to use the browser's back or forward buttons at all for the app, especially the Offline portion, only the LightSwitch menu navigation and command buttons. I know Xpert360 has shown how to put the former LightSwitch back
button in the app which is useful too. Navigation, cacheing and disposing were some of the tricky parts getting to integrate between LightSwitch UI and offline custom controls.  Occasionally I felt like I was having to be "clever" at solutions,
except that when it comes to programming, I'm not a fan of cleverness.
The project is published
here. Hopefully this serves as a good starting point for someone, and I look forward to seeing how it can be improved upon and used in practice.