An application created with Code On Time is the Progressive Web App (PWA). It is installable directly from browsers.
Installation of apps created with Code On Time is supported on Android, Chrome OS, Mac OS, and Windows from Google Chrome or Microsoft Edge browsers. Give it a try at https://demo.codeontime.com.
The installed app delivers the user experience typical of the native apps:
- A dedicated icon is displayed on the home screen making it easy to start the app.
- Users transition smoothly between screens with the built-in navigation controls.
- The user interface switches between the light and dark modes to match the UI theme of the device.
- The app can access the device microphone, location, clipboard, and much more if the user grants the permission.
- Custom tasks can be performed in the background.
- The app works in offline mode with the optional Offline Sync.
- Users uninstall the app in a manner specific to the operating system.
Additionally, the user interface is responsive making it easy to interact with the app on phones, tablets, and desktop computers. The app automatically updates the client-side cache when the new server-side code is deployed.
Installed App User Experience
Your app will greet users with the prompt to install. Users may choose to install the app or opt out. Developers can disable the installation prompt in the app configuration.
The prompt will continue to be displayed when the user cancels the installation prompt and navigates to another page of the app. If the installation prompt is canceled or if the user opts out of installation, then the “Install” option is available in the context menu. Users may also initiate installation by clicking on the system “Install” icon displayed in the address bar and in the “more” menu of the browser.
The system prompt is displayed when the user chooses to install the application. The prompt is specific to the browser and operating system. The user is presented with the app name and the source of application. The installation starts only when the user confirms installation in the system prompt.
Depending on the operating system, the installed app is either launched immediately or when the user taps the installation notification. Additional configuration options may be presented. Users start the installed application at any time by clicking the app icon on the home screen.
The installed app is displayed in its own window just like the native apps. Mobile operating systems will display the app in the fullscreen mode. Desktop operating systems allow moving and resizing the app window.
The app will present itself either in the light or the dark theme to match the user preferences on the device.
The app will adjust its user interface to match the device screen size. The small form factor will have the app presenting its forms in the fullscreen mode. The reading pane and modal popup forms are displayed on large screens.
The app can be found in the list of installed applications. Uninstalling of the app is done in the manner specific to the operating system. Users are presented with the choice to keep or remove the app settings on some platforms.
If the user revisits the installed app in the browser, then the installation prompt will not appear. The system option to launch the app is provided by the browser.
Code On Time produces apps that are ready for the native installation. Automatic installation prompt makes it easy for users to experience the app in the native mode. Web-based delivery eliminates the need to submit the app for the app store review.
App framework uses the dedicated cache to keep the client-side resources of application directly on the device.
Code On Time produces Progressive Web Apps that are ready for deployment to app stores with the help of the PWA Builder.
An app requires the manifest and service worker to be installable from a browser. Both components are included in applications created with Code On Time, which makes them instantly available for installation on the supported platforms.
If the browser-based installation is not desired, then disable the installation prompt by setting the client.enabled key to false in the ~/app/touch-settings.json file found in the root folder of the app.
If the client is disabled, then the app will not install the service worker. The client-side caching of resources will not be performed.
Installation prompt makes users aware of the installation option. The behavior is controlled by the client.prompt property, which has the default value of always. The prompt will continue to be displayed when users switch between the application pages. Users must opt out explicitly by default.
Developers can configure the app to display the prompt to the authenticated users by setting the client.prompt key to the authenticated value. This may be helpful if the significant portion of the app is available to the anonymous users. An aggressive installation prompt may scare the first-time users away and therefore delaying the prompt until the user has signed up for an account and logged in may be a good idea!
Set the client.enabled key to the system value to leave it up to the browser to prompt the user of an option to install the app. The Install option will still be available in the context menu of the app itself.
The app framework creates the manifest on the fly. The manifest may be customized under the client.manifest key in the ~/app/touch-settings.json configuration file. Any missing required elements will be added by the framework.
An app icon is likely the first element that will require customization. Developers may replace the icon files in the ~/app/images/icons folder or specify the custom icons in the manifest. Replacing icons is straightforward if the high quality icons in various sizes are available.
At the very least, make sure to copy your own 144 x 144 image to the ~/app/images/icons folder and specify the path to the icon file name in the client.manifest.icons array key. Do not delete the default icon images. Only the images listed in the client manifest will be used by the app.
Consult the documentation to configure the available manifest settings as desired.
Note that the application framework creates the offline_resouces custom key for internal purposes.
The framework-provided service worker script is registered on the client whenever the app starts and installation is enabled. The script may execute during the background synchronization. This makes possible the safe execution of the application code even when the app is not running in the browser or in the native mode.The framework implementation of the service worker does not run in the background and limits its activities to the resource caching.
Developers may add a custom code to the service worker by specifying the custom script in the client.importScripts array key of ~/app/touch-settings.json.
"importScripts": [ "~/js/my-service-worker.js" ]
There is also a mandatory step to the custom service worker implementation. The imported scripts must be explicitly enumerated in the ~/js/_ingore.txt file. This will ensure that the scripts will not be loaded automatically when the combined script bundle is created by the framework.
The periodic execution in the background allows updating the client-side cache with the fresh content from the server.
Publishing to App Stores
Installation from the browsers will be greeted enthusiastically by IT departments burdened with the management of custom business applications. Apps designed for a wider audience will still require the app store publishing. Thankfully progressive web apps created with Code On Time can be turned into custom app packages that are ready for deployment to the specific app marketplaces.
Head on to https://pwabuilder.com to get started! PWA Builder is an open source project backed by Microsoft.
If your app was created with Code on Time and deployed to a host with an SSL certificate, then enter the app URL in the field next to the Start button.
Press the Start button and wait to get the app report card.
The scorecard will let you know if the Progressive Web App is ready to be published to the app stores.
Apps created with Code On Time will get a high score!
The store-ready app is provided with the options to download the store-specific packages.
Choose the desired package and follow the steps.
For example, the Google Play Store will ask developers to provide a few details that can be configured in the store developer account. The Generate button will produce the package.
Apps created with Code On Time are installable directly from browsers. They are also store-ready! Get Code On Time and start building amazing applications!