The future of SQLite

Apple has announced that the next version of Safari will no longer support SQLite. This has been confirmed in the beta of iOS 13 – it’s gone.

There’s no need to panic. There are workarounds, which I’ll get to later in this post. Also, there are no indications that Google will do the same with Chrome.

Some History

SQLite was introduced into browsers many years ago as WebSQL. It was a great idea: SQLite is small, powerful and solid. You can make great apps with it. The problem came from the standards committee. W3C prefers a clear standard with alternative implementations: saying “Just use SQLite” isn’t good enough. They decided, in 2009, to deprecate WebSQL and replace it with IndexedDB.

(Behind the scenes, I hear there were some heavy politics going on. Microsoft and Oracle were both very unhappy with WebSQL using SQLite – they each had their own established database software and did not want an upstart competitor to become standard.)

Regardless, Safari and Google continued to include WebSQL in their browsers. FireFox and IE did not. https://caniuse.com/#search=websql

The suggested replacement, IndexedDB, is not a SQL database. It’s more of an indexed file system. It’s been criticized for being slow, clumsy and inconsistently implemented. For more information, see this article: https://developers.google.com/web/ilt/pwa/working-with-indexeddb

Alternatives

Web Apps on Android: No problem – Chrome continues to support WebSQL.

Web Apps on iOS: Either use Chrome to run your app, or make your app a native app.

Native Apps for iOS and Android: Use the PhoneGap plugin for SQLite (as you probably have been). Just as this to your config.xml – no changes to your code.

<plugin name="cordova-sqlite-evcore-extbuild-free" source="npm" />

Desktop Apps: Another reason to use Electron. Use the SQLite plugin https://www.npmjs.com/package/sqlite

Web Sharing

On your mobile device, sharing something is usually as simple as clicking the Share button, choosing which app you want to send it to, and then who you to share it with. Now you can add this capability to your own apps.

Here’s what the share button looks like on iOS:

Click on it, and you’ll see something like this:

Use the navigator.share() function in your app to bring up the Web Share picker. Not all browsers have this function, so check if it exists before calling.

You’ll need to put the data you want to pass to the app share in the argument to the share() function. For more details, see this Tech Note: https://wiki.appstudio.dev/Web_Sharing

Setting your app as a Web Share Target

On Android, you can add your app to the Web Share picker, so other apps can call yours. Your app has to be a PWA (which AppStudio now makes automatically) and needs to register itself.

It will now appear on the Web Share picker:

You can see the code to do this in this Tech Note: https://wiki.appstudio.dev/Web_Sharing.

Progressive Web App (PWA) Support

AppStudio 7.4 brings support for Progressive Web Apps (PWA). The idea behind PWAs is to give users a more native app like experience when using Web Apps.

One of the important features of PWAs is the ability to run when there is no internet connection. To do this, the app needs to save all its components locally when it initially loads from the website. The app can then load those instead of going to the web each time you run the app.

Before version 7.4, AppStudio did this using Application Caching. Each app had a manifest containing the list of files to be cached. It worked fairly well, but was not perfect. PWA was designed to fix the problems with Application Caching. The Chrome and Safari teams have announced that Application Caching will be deprecated in future releases of their browsers.

With iOS 12, Apple now supports PWAs (Chrome has for a while), so it was time to update AppStudio to use the new standard.

The good thing is that the change is mostly transparent to AppStudio developers and their users. AppStudio takes care of all the code that is needed to implement a PWA automatically. There are two changes you’ll need to be aware of:
1. You’ll need to provide icons called 72.png, 192.png and 512.png. Put them in the ‘icons folder of your app.
2. The old ‘manifest’ property has been renamed ‘extrafiles’. Put the names of any extra files or folders your app needs here. They will then be deployed with your app. Files named in your old manifest property are automatically carried over.

There are more details about PWAs in our wiki: https://wiki.appstudio.dev/Progressive_Web_Apps.

New Bootstrap 4 Input features

With the release iOS 12.2, we are able to add a couple of new features to the Bootstrap 4 Input control. (These features are in Chrome 69+ as well). You’ll need AppStudio 7.3.1.2.

These new features will help users enter information more quickly and accurately.

DataList

DataList lets you control the hints the keyboard brings up as the user type into an Input control.

Suppose our datalist is the following: Bob, Carol, Ted, Alice and Caroline. Here how it will look on iOS:


Continue reading “New Bootstrap 4 Input features”

The new CSSGrid Control

AppStudio 7.2.2 introduces the CSSGrid control, which provides a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

You can layout your form with areas, each of which can act as a container for the actual controls you will use. It’s a big help if you want to make a responsive layout.

There is reference documentation about it in the wiki – let’s walk through a tutorial of actually using it.

Support we want to layout a form like this:

This is actually how a lot of web pages are laid out. A Header at the top, a sidebar on the the left, some content in the middle and on the right, and a Footer at the bottom. For fun, we’re making a Footer which isn’t full width.
Continue reading “The new CSSGrid Control”

Enhancements to the Bootstrap 4 Select control

AppStudio 7.2 adds a useful property to the Select control: value.

It’s a hidden field which keeps a value. This could be an index or a key to a database which lets you look up a record easily when a Select choice is made.

Using this can greatly simplify your code.

Important

To make this feature work, we had to change the Select control. You may need to change your code!
1. Change Select.value to Select.text in your code: So the statements would make sense we had to rename .value to .text.
2. Check any case where you’re using .addItem. If you have just a single argument, you do not need to do anything. If you have multiple arguments on addItem, add a new value argument as the second parameter.

Example of using Select.value
Continue reading “Enhancements to the Bootstrap 4 Select control”

More on the Flexbox control

Ever feel like this when trying to get your CSS to work?

You’ll find the Flexbox control is a big help.

Here’s a good article telling even more about how to use Flexbox…

Flexbox promises to save us from the evils of plain CSS (like vertical alignment).
Well, Flexbox does deliver on that goal. But mastering its new mental model can be challenging.
So let’s take an animated look at how Flexbox works, so we can use it to build better layouts.
Flexbox’s underlying principle is to make layouts flexible and intuitive.

keep reading

Plus, there’s a follow up article.

Introducing the new FlexBox control

AppStudio 7.0.4 introduces the FlexBox control. It makes it much easier to design a flexible responsive layout structure without using float or positioning.

Start by putting all the controls you want to position into a container. The new Flexbox properties allow you to control how the contents of the container are positioned.

These properties are part of the new FlexBox control. They have also been added to Container, Header, GridColumn and GridRow. To use them in these controls, you also need to set the display property to ‘flex’.

Here’s what each of the new properties does. Complete information is in the Wiki page about FlexBox.
Continue reading “Introducing the new FlexBox control”

AS7: Validation

AppStudio 7 brings Validation to your projects. Now it’s easy to check the validity of fields on your form.

If a field is invalid, a message in red appears next to the field.

Validation doesn’t kick in until you ask it to validate the form. This lets the operator input data undisturbed. As fields are corrected, the error messages disappear.

Validation should work on controls from all frameworks.

Here is the link to a new Tech Note to get you started using the Validation library, plus some additional reading: