tablecheck / ts-loader Goto Github PK

Javascript loader

JavaScript 100.00%

ts-loader's Introduction

ts-loader

Loader for web and Cordova app. The loader will load the files based on a manifest file and creates the relevant DOM nodes to load and start the app.

Requirements

If using in an Cordova App, the following plugins are required:

cordova-plugin-advanced-http
cordova-plugin-statusbar (optional)
phonegap-istablet (optional)

Quick Start

npm run build - Build ts-loader.js and ts-loader.min.js

npm run start - For development

Manifest File

The loader need a manifest file to determine what files to load.

The manifest file should be named app-manifest.json. It should contains the following data:

manifestVersion - the current version of the manifest
domNodes - an array of file path and file type that will be append to the document (js or css file)

Example:

{
  "manifestVersion": "2.1.0",
  "domNodes": [
    {
      "path": "scripts/test.js",
      "type": "js",
      "optional": true
    }
    {
      "path": "assets/app.js",
      "type": "js"
    },
    {
      "path": "assets/app.css",
      "type": "css"
    }
  ]
}

Config

Config can be passed via data attributes.

<script type="text/javascript" src="scripts/ts-loader.js"
data-app-host="https://mobile.app.example.com"
data-app-host-tablet="https://app.example.com"
data-status-bar-background-color="#282828"
></script>

The available config are:

Name	Type	Default	Description
appHost	String	''	The base URL of the app
appHostTablet	String	''	The base URL of the tablet app
manifestFile	String	'app-manifest.json'	The name of the manifest file
supportedManifestVersion	String	'^2.0.0'	-
statusBarBackgroundColor	String	'#282828'	The background color of the Cordova status bar

Loader

Here is the DOM structure of the loader screen

<div id="ts-splash-screen">
  <div id="ts-splash-logo">
    <div id="ts-splash-icon-container">
      <div id="ts-splash-overlap"></div>
      <div id="ts-splash-icon"></div>
      <div id="ts-splash-loader"></div>
    </div>
    <div id="ts-splash-logo-text"></div>
  </div>
</div>

If an error occurs then the following is appended to the body

<div id="loader-error">
  <div id="loader-error-message">An unexpected error occurred, please try again.</div>
  <button id="error-reload-button">Reload</button>
</div>

Upgrading to v4

We removed the useLocalCache functionality in v4 which uses unmaintained plugins cordova-file-cache and cordova-plugin-file-transfer, utilizing browser cache should be sufficient.

Please check the app and remove window.cordovaFileCache usage.

ts-loader's People

Contributors

Watchers

Forkers

ashwini709 bjornstar whanchong simeonc micky2be iepsy

ts-loader's Issues

Fix issue with load failure.

Currently if any part of ts-loader fails in loading we provide the user with a very tech oriented message. To get past this the user has to fully quit the app and restart it to restart the loading process.

To fix this we need to implement a proper error message and functionality to restart the ts-loader process.

Loader is not correctly detecting internet connection

Reporter: Kamada

App Version: 3.2.6
Server Version: 2.9.6

Device: iPhone 7 plus (with SIM)
OS: iOS 11.0.3
Browsers: iOS app

Steps to reproduce:

On system settings, turn on Flight Mode.
Launch TC iOS app.

Current Behaviour:

Error message is displayed
"An unknown error occurred, please try again."

Expected Behaviour:

It should show "Please check your internet connection"

Error in console:

There is no console on iOS app.

Support asset finger printing

(This will require changes in both TS Ember and this repo)

We serve the TS Ember app via a CDN (Content Deliver Network), specifically Amazon CloudFront.

In order to reduce/cost** resource usage when serving files, CDNs will cache the contents of a specific URL for a certain amount of time. When we update the contents at a specific URL, /index.js, we tell Amazon to "invalidate" the cache at that URL. Amazon takes up to 10 minutes to do this.

What can happen is that the various assets (index.js, index.css, translations.json, etc.) can be updated at different timings. Hence it possible after deploying to get the latest .js but the older .css or translations.

This time lag only applies when we overwrite the file at an existing URL. If we use a new filename which has not been cached, the new file will be fetched immediately.

Therefore, to solve this problem, we should use a technique called "fingerprinting". When we build the app, every file (EXCEPT manifest.json) should be compiled with a SHA digest hash in it's filename, so index.js becomes index-cf23df2207d99a74fbe.js. The hash is generated from the contents of the file itself so it is guaranteed to be unique if the file has changed, or the same if the file has NOT changed. The manifest.json itself will not be fingerprinted, but the contents of manifest.json will need to point to the fingerprinted file names of the other files.

Ember.js has a config option to enable fingerprinting, however, we will need to test it. If Ember's method does not work we can potentially modify the deploy script to achieve the same result.

(** In our CloudFront bill we only pay for cache-misses and not for cache-hits.)

======

Setup:

In ember-cli-build.js, add fingerprint: { enabled: true }
Requires ember-asset-rev library to be added

Some initial findings:

Manifest builder MD5 hash and ember MD5 hash of files match
Manifest builder needs reference the fingerprinted output files
I18n files aren't getting fingerprinted.
I think source map fingerprinting is broken; they should get hash of the file they are referencing.

Use this branch for ember: https://github.com/johnnyshields/ts_ember/tree/fingerprints-wip

Automate versioning

Add hook to run the build, update version and changelog using npm version

[i18n] Unknown error is unlocalized