Revision history [back]

This is my first post, sorry for it being a bit long! there was no other way, this feature is not a “just add a button for that”, it is actually a set a complex features that work as one.

To make my point clear, I divided the topic in levels, from the basic functionality to the “nice to haves”, the points are a compilation of good practices already in use for other platforms and some original ideas to make this implementation “Unlike”. :)

Level 1 - Basic Functionality:

1.1 - Add a “Add to Home” action in the Browser App: could be an option of the bookmark (“star”), or a contextual menu on a saved bookmark.

1.2 - Add shortcut to Launcher: the system should analyze the page looking for an “app capable” meta tag, we could define a generic “mobile-web-app-capable” and use the already popular "apple-mobile-web-app-capable" as a fallback. If this meta tag is present, the system should add an icon the launcher pointing to a sandboxed webview to the URL; and, if the meta tag is not set, the Browser app (or “default” browser in the future) should open the URL.

1.3 - Add system integration: in the case of a “app capable” page, the webview should have its own thumbnail, with multitask capabilities (as many thumbnails as web apps running).

1.4 - Icon: the icon in the Launcher should be collected from a meta tag like “sailfish-touch-icon” to make it possible for the developer to “blend in” with native apps when in Sailfish OS. The standard “icon” or “shortcut icon” should be used as fallbacks.

1.5 - Sandbox: the web app webview should have it’s own storage (LocalStorage, Session, Cookies, IndexedDB), independent of the Browser app. Also the storage quotas could be bigger, since an user action put the shortcuts there.

Level 2 - Visual Enhancements:

2.1 - Ambience tint colors: the webview could make the set of ambience colors usable for the developer, a good approach is use as CSS aliases for color names, like “ambience-color”, ambience-highlight” and “ambience-secundary”, using as aliases also avoids exposing the hex colors, that could be used to weaken the privacy of the user.

2.2 - Ambience background “see-through”: the “body” element should show the ambience image when the “background-color” is set as “transparent” deliberately (something that only make sense in Sailfish OS). The default value for the built-in CSS should still be “white”.

Level 3 - Deeper Integration:

3.1 - Thumbnail visual and actions: the running app thumbnail could have a native entry point into Javascript to set the background image, icons and actions. This could be exposed as an object accepting a src for the image (that could even come from a canvas tag) and an array of icons + callback functions could make this integration possible.

3.2 - Notifications: just adhere to Web Notifications API and display with the native UI.

3.3 - Some canonical UI framework: something like WinJS for Microsoft or bbUI.js from BlackBerry; a way to have standard components resembling the native UI, or even wrappers to the native ones (not sure if this one is possible).

That’s it! …my wishlist for a perfect WebApp integration! And, being very honest, the Sailfish platform needs as much apps as it can get at the moment! Set the WebApps as first-class citizens can help everybody: Jolla, developers and users.

This is my first post, sorry for it being a bit long! there was no other way, this feature is not a “just add a button for that”, it is actually a set a complex features that work as one.

To make my point clear, I divided the topic in levels, from the basic functionality to the “nice to haves”, the points are a compilation of good practices already in use for other platforms and some original ideas to make this implementation “Unlike”. :)

Level 1 - Basic Functionality:

1.1 - Add a “Add to Home” action in the Browser App: could be an option of the bookmark (“star”), or a contextual menu on a saved bookmark.bookmark. (Edit: this is now possible since update 1.0.7.16)

1.2 - Add shortcut to Launcher: the system should analyze the page looking for an “app capable” meta tag, we could define a generic “mobile-web-app-capable” and use the already popular "apple-mobile-web-app-capable" as a fallback. If this meta tag is present, the system should add an icon the launcher pointing to a sandboxed webview to the URL; and, if the meta tag is not set, the Browser app (or “default” browser in the future) should open the URL.

1.3 - Add system integration: in the case of a “app capable” page, the webview should have its own thumbnail, with multitask capabilities (as many thumbnails as web apps running).

1.4 - Icon: the icon in the Launcher should be collected from a meta tag like “sailfish-touch-icon” to make it possible for the developer to “blend in” with native apps when in Sailfish OS. The standard “icon” or “shortcut icon” should be used as fallbacks.

1.5 - Sandbox: the web app webview should have it’s own storage (LocalStorage, Session, Cookies, IndexedDB), independent of the Browser app. Also the storage quotas could be bigger, since an user action put the shortcuts there.

Level 2 - Visual Enhancements:

2.1 - Ambience tint colors: the webview could make the set of ambience colors usable for the developer, a good approach is use as CSS aliases for color names, like “ambience-color”, ambience-highlight” and “ambience-secundary”, using as aliases also avoids exposing the hex colors, that could be used to weaken the privacy of the user.

2.2 - Ambience background “see-through”: the “body” element should show the ambience image when the “background-color” is set as “transparent” deliberately (something that only make sense in Sailfish OS). The default value for the built-in CSS should still be “white”.

Level 3 - Deeper Integration:

3.1 - Thumbnail visual and actions: the running app thumbnail could have a native entry point into Javascript to set the background image, icons and actions. This could be exposed as an object accepting a src for the image (that could even come from a canvas tag) and an array of icons + callback functions could make this integration possible.

3.2 - Notifications: just adhere to Web Notifications API and display with the native UI.

3.3 - Some canonical UI framework: something like WinJS for Microsoft or bbUI.js from BlackBerry; a way to have standard components resembling the native UI, or even wrappers to the native ones (not sure if this one is possible).

That’s it! …my wishlist for a perfect WebApp integration! And, being very honest, the Sailfish platform needs as much apps as it can get at the moment! Set the WebApps as first-class citizens can help everybody: Jolla, developers and users.

This is my first post, sorry for it being a bit long! there was no other way, this feature is not a “just add a button for that”, it is actually a set a complex features that work as one.

To make my point clear, I divided the topic in levels, from the basic functionality to the “nice to haves”, the points are a compilation of good practices already in use for other platforms and some original ideas to make this implementation “Unlike”. :)

Level 1 - Basic Functionality:

1.1 - Add a “Add to Home” action in the Browser App: could be an option of the bookmark (“star”), or a contextual menu on a saved bookmark. (Edit: this is now possible since update 1.0.7.16)

1.2 - Add shortcut to Launcher: the system should analyze the page looking for an “app capable” meta tag, we could define a generic “mobile-web-app-capable” and use the already popular "apple-mobile-web-app-capable" as a fallback. If this meta tag is present, the system should add an icon the launcher pointing to a sandboxed webview to the URL; and, if the meta tag is not set, the Browser app (or “default” browser in the future) should open the URL.

1.3 - Add system integration: in the case of a “app capable” page, the webview should have its own thumbnail, with multitask capabilities (as many thumbnails as web apps running).

1.4 - Icon: the icon in the Launcher should be collected from a meta tag like “sailfish-touch-icon” to make it possible for the developer to “blend in” with native apps when in Sailfish OS. The standard “icon” or “shortcut icon” should be used as fallbacks.

1.5 - Sandbox: the web app webview should have it’s own storage (LocalStorage, Session, Cookies, IndexedDB), independent of the Browser app. Also the storage quotas could be bigger, since an user action put the shortcuts there.

Level 2 - Visual Enhancements:

2.1 - Ambience tint colors: the webview could make the set of ambience colors usable for the developer, a good approach is use as CSS aliases for color names, like “ambience-color”, ambience-highlight” and “ambience-secundary”, using as aliases also avoids exposing the hex colors, that could be used to weaken the privacy of the user.

2.2 - Ambience background “see-through”: the “body” element should show the ambience image when the “background-color” is set as “transparent” deliberately (something that only make sense in Sailfish OS). The default value for the built-in CSS should still be “white”.

Level 3 - Deeper Integration:

3.1 - Thumbnail visual and actions: the running app thumbnail could have a native entry point into Javascript to set the background image, icons and actions. This could be exposed as an object accepting a src for the image (that could even come from a canvas tag) and an array of icons + callback functions could make this integration possible.

3.2 - Notifications: just adhere to Web Notifications API and display with the native UI.

3.3 - Some canonical UI framework: something like WinJS for Microsoft or bbUI.js from BlackBerry; a way to have standard components resembling the native UI, or even wrappers to the native ones (not sure if this one is possible).

That’s it! …my wishlist for a perfect WebApp integration! And, being very honest, the Sailfish platform needs as much apps as it can get at the moment! Set the WebApps as first-class citizens can help everybody: Jolla, developers and users.