Separate QR reading from the main app

[farooqkz]

At the time of writing this, chooj supports logging in using QR code if the user wishes to. To achieve this, jsQR is used which is really huge in the bundle(about 450KB) and needs to be loaded everytime even if the user is logged in or doesn't wish to use QR code login method.

I believe it's a good idea to create a separate QR reader app which supports a MozActivity to read QR codes and return to applications demanding it. This way, any app which wishes to read QR codes for whatever reason, don't need to have a QR reader bundled. And the QR reader code is loaded only on demand which makes loading applications significantly faster, including but not limited to chooj.

pinging other KaiOS developers @jkelol111 @strukturart @cyan-2048 @Tombarr @Simon-Laux

[farooqkz]

ping @arma7x as well

[arma7x]

https://github.com/davidshimjs/qrcodejs/blob/master/qrcode.min.js 19.5kb

[farooqkz]

manifest of the QR reader from KaiOSTech:

{
  "name": "QR Reader",
  "version": "1.5.18",
  "categories": [
    "utilities"
  ],
  "description": "Easy as it gets: Open the app, align the code and scan it. The app will then automatically recognize the QR Code, and takes you where you need to go.",
  "subtitle": "Scan the QR code",
  "launch_path": "/index.html",
  "type": "privileged",
  "dependencies": {
    "ads-sdk": "1.5.2"
  },
  "permissions": {
    "camera": {
      "description": "Required for accessing cameras on the device."
    },
    "mobiledata": {},
    "wifidata": {}
  },
  "theme_color": "#9067FF",
  "default_locale": "en-US",
  "locales": {
    "en-US": {
      "name": "QR Reader",
      "description": "Easy as it gets: Open the app, align the code and scan it. The app will then automatically recognize the QR Code, and takes you where you need to go.",
      "subtitle": "Just point the camera to read the QR code"
    },
    "pt-BR": {
      "name": "Leitor QR",
      "subtitle": "Aponte a câmara para ler o código QR",
      "description": "Tão fácil quanto isto: Abra a aplicação, alinhe o código e leia-o. A aplicação irá reconhecer automaticamente o código QR e leva-o onde precisar."
    },
    "pt-PT": {
      "name": "Leitor QR",
      "subtitle": "Aponte a câmara para ler o código QR",
      "description": "Tão fácil quanto isto: Abra a aplicação, alinhe o código e leia-o. A aplicação irá reconhecer automaticamente o código QR e leva-o onde precisar."
    },
    "ru-RU": {
      "name": "Сканер QR-кодов",
      "subtitle": "Наведите камеру, чтобы сканировать QR-код",
      "description": "Все просто: откройте приложение, выровняйте код и отсканируйте его. Затем приложение автоматически распознает его и откроет ссылку."
    },
    "ar-SA": {
      "name": "قارئ الرمز السريع",
      "subtitle": "قم بتوجيه الكاميرا لقراءة رمز QR",
      "description": "إنه أسهل ما يكون: افتح التطبيق، قم بمحاذاة الكود ومسحه ضوئيًا. سيتعرف التطبيق تلقائيًا على رمز QR، ويأخذك إلى حيث تحتاج إلى الذهاب."
    },
    "de-DE": {
      "name": "QR Reader",
      "subtitle": "Kamera ausrichten – QR-Code einlesen",
      "description": "Es ist ganz einfach: Öffnen Sie die App, richten Sie die Kamera auf den Code und scannen Sie ihn ein. Die App erkennt den QR-Code automatisch und führt Sie auf die entsprechende Seite."
    },
    "es-ES": {
      "name": "Lector QR",
      "subtitle": "Enfoca la cámara para leer el código QR",
      "description": "Es muy fácil: Abre la aplicación, alinea el código y escanéalo. La aplicación reconocerá el código QR automáticamente y te dirigirá donde corresponda."
    },
    "es-US": {
      "name": "Lector QR",
      "subtitle": "Enfoca la cámara para leer el código QR",
      "description": "Es muy fácil: Abre la aplicación, alinea el código y escanéalo. La aplicación reconocerá el código QR automáticamente y te dirigirá donde corresponda."
    },
    "cs-CZ": {
      "name": "QR čtečka",
      "subtitle": "Stačí namířit fotoaparát a přečíst si QR kód",
      "description": "Snadné, jak to jen jde: Otevřete aplikaci, zarovnejte kód a naskenujte jej. Aplikace poté automaticky rozpozná QR kód a zavede vás tam, kam potřebujete."
    },
    "sk-SK": {
      "name": "QR čítačka",
      "subtitle": "Stačí nasmerovať fotoaparát a prečítať si QR kód",
      "description": "Jednoduché: Otvorte aplikáciu, zarovnajte kód a naskenujte ho. Aplikácia potom automaticky rozpozná QR kód a zavedie vás tam, kam potrebujete."
    },
    "fr-FR": {
      "name": "Lecteur QR",
      "subtitle": "Visez le code QR à l’aide de l’appareil photo pour le lire",
      "description": "On ne peut faire plus simple : Ouvrez l’application, cadrez le code et procédez à sa lecture. L’application reconnaît alors automatiquement le code QR et ouvre le lien correspondant."
    },
    "fr-CA": {
      "name": "Lecteur QR",
      "subtitle": "Visez le code QR à l’aide de l’appareil photo pour le lire",
      "description": "On ne peut faire plus simple : Ouvrez l’application, cadrez le code et procédez à sa lecture. L’application reconnaît alors automatiquement le code QR et ouvre le lien correspondant."
    },
    "zh-CN": {
      "name": "二维码阅读器",
      "subtitle": "对准相机读取二维码",
      "description": "轻而易举操作：打开应用，对准二维码进行扫描。应用将自动识别二维码，然后跳转至所需界面。"
    },
    "zh-HK": {
      "name": "QR 讀取器",
      "subtitle": "將相機對準 QR 碼進行讀取",
      "description": "簡單易用：開啟應用程式，對準代碼並掃描。然後，該應用程式將自動識別 QR 碼，並帶您到所需之處。"
    },
    "zh-TW": {
      "name": "QR 讀取器",
      "subtitle": "指向相機以讀取 QR 碼",
      "description": "方法很簡單：請開啟應用程式，對準代碼後掃描。應用程式將自動識別 QR 碼，並引導您到需進入的網址。"
    },
    "vi-VN": {
      "name": "Trình đọc QR",
      "subtitle": "Hướng máy ảnh để đọc mã QR",
      "description": "Dễ dàng như mọi thứ: Mở ứng dụng, căn chỉnh mã và quét nó. Sau đó, ứng dụng sẽ tự động nhận dạng mã QR và đưa bạn đến nơi bạn cần."
    },
    "hi-HI": {
      "name": "क्यूआर रीडर",
      "subtitle": "क्यू.आर कोड को पढ़ने के लिए कैमरे को इंगित करें",
      "description": "यह आसान हो जाता है: एप्लिकेशन खोलें, कोड संरेखित करें और इसे स्कैन करें। एप्लिकेशन तब स्वचालित रूप से क्यू.आर \n कोड को पहचान लेगा, और आपको वहां ले जाएगा जहां आपको जाने की आवश्यकता है।"
    },
    "pl-PL": {
      "name": "Skaner QR",
      "subtitle": "Skieruj kamerę na kod QR",
      "description": "To proste: Otwórz aplikację, skieruj na kod i zeskanuj go. Aplikacja odczyta kod i przejdzie do odczytanego linku."
    },
    "bg-BG": {
      "name": "QR Скенер",
      "subtitle": "Насочете камерата към QR кода",
      "description": "Лесно е: Отворете приложението и сканирайте QR кода. Приложението ще прочете кода и ще отиде до връзката, която е била прочетена."
    },
    "am-ET": {
      "name": "QR አንባቢ",
      "subtitle": "QR ኮድን እንዲያነብ ካሜራውን ይያዙ",
      "description": "ቀላል ይሆናል እነዚህ ሲሆኑ፦ መተግበሪያውን ይክፈቱ፣ ኮዱን ያስተካክሉ እና ይቃኙት። ከዚያ መተግበሪያው QR ኮድን በራስ-ሰር ለይቶ ያውቃል፣ እንዲሁም መሄድ ወደሚያስፈልግዎት ይወስድዎታል።"
    },
    "om-ET": {
      "name": "Dubbisaa Deebii Atattamaa",
      "subtitle": "Kaameeraa gara Koodii Deebii Atattamaatti qabi",
      "description": "Hanga inni argatutti obsi: Appilikeeshinicha banii, koodicha itti qabii iskaanii godhi. Sana booda appilikeeshinichi Koodii Deebii Atattamaa ofuma isaatiin dubbisee gara ati deemuu barbaaddutti si geessa."
    }
  },
  "developer": {
    "name": "KaiOS",
    "url": "http://kaiostech.com"
  },
  "icons": {
    "56": "/resources/icons/qrread_56.png",
    "84": "/resources/icons/qrreader_84.png",
    "112": "/resources/icons/qrreader_112.png"
  },
  "orientation": "default",
  "activities": {
    "scan": {
      "href": "./index.html",
      "disposition": "inline",
      "filters": {
        "type": [
          "qrcode",
          "code/qr"
        ]
      },
      "returnValue": true
    }
  },
  "chrome": {
    "statusbar": "overlap"
  },
  "origin": "app://kaios.qrreader.org"
}

[farooqkz]

https://github.com/davidshimjs/qrcodejs/blob/master/qrcode.min.js 19.5kb

It seems unmaintained

[arma7x]

Fallback to in-app qr-reader if mozActivity for qr-code not exist

[farooqkz]

Fallback to in-app qr-reader if mozActivity for qr-code not exist

But each application will have to ship a QR reader and load it everytime which is not even near good.

[arma7x]

Always provide an alternative if something does not exist. ¯_(ツ)_/¯

[Simon-Laux]

It seems unmaintained

a qrcode reader is one of the rare software that can actually be complete to a point where it doesn't need maintenance anymore, so I would say try it first if it works or not.

Also 450kb sounds huge for a qrcode scanner, even my wasm port of quircs is only ~80kb (the wasm part), and it not only contains the qr code reader but also some image processing functions to prepare the image for better scan results: https://simon-laux.github.io/quircs_wasm/quircs_wasm_bg.wasm

maybe we could compile https://github.com/dignifiedquire/quircs (rust) or the original https://github.com/dlbeer/quirc (c) to asm.js?

Also we only need qr code scanning, no barcodes, no data matrix nor other 2d barcodes. So we maybe the lib you tried also includes code for other formats which we don't use?

Also don't forget that we can already load code on demand by programmatically injecting a script tag when needed. (not as clean as the es6 import statements, but we don't have them on this old FF)

[farooqkz]

Also don't forget that we can already load code on demand by programmatically injecting a script tag when needed. (not as clean as the es6 import statements, but we don't have them on this old FF)

I dislike it because as you said, it is not clean. Also will need additional work to tell parcel to do that.

Also we only need qr code scanning, no barcodes, no data matrix nor other 2d barcodes. So we maybe the lib you tried also includes code for other formats which we don't use?

Not sure, I must check.

a qrcode reader is one of the rare software that can actually be complete to a point where it doesn't need maintenance anymore, so I would say try it first if it works or not.

Lucky we :D

Also 450kb sounds huge for a qrcode scanner, even my wasm port of quircs is only ~80kb (the wasm part), and it not only contains the qr code reader but also some image processing functions to prepare the image for better scan results: https://simon-laux.github.io/quircs_wasm/quircs_wasm_bg.wasm

Would asm.js be faster than ordinary Javascript on this ancient FF?

[farooqkz]

Always provide an alternative if something does not exist. ¯(ツ)/¯

The idea of separating the QR reader from the app is for reducing bundle size which reduces load time also. If we ship a QR reader with every app, not only we are wasting space but also we are increasing load time for the apps. And in KaiOS because there is only 256MB to 512MB of memory, and the OOM killer usually won't let apps remain in background which makes load time more important.

[farooqkz]

https://github.com/davidshimjs/qrcodejs/blob/master/qrcode.min.js 19.5kb

lol it's a generator not a reader.

[arma7x]

My bad, I'm also using jsQR, this https://github.com/cozmo/jsQR

[Simon-Laux]

Also will need additional work to tell parcel to do that.

not necessarily, you can try first if the async or defer attribute help https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script then you can do on demand loading in the following way:

1. put the js library script into the assets / static / public folder, somewhere where parcel will ignore it
2. when it is used, add an script tag to the dom with an onload callback, which resumes your application code (https://stackoverflow.com/questions/16230886/trying-to-fire-the-onload-event-on-script-tag/16231055#16231055)

[farooqkz]

My plan is removing jsQR from chooj and make chooj dependent on a QR reader app or more precisely, one which supports scan MozActivity. There is already one in the KaiStore by KaiOSTech and we can later make another FOSS one compatible with it. This way, the bundle size and complexity of chooj will be reduced.

Note that one can login with chooj anytime without a QR code.

Please let me know your thoughts.

[strukturart]

since it is sensitive data which the qr reader processes, i would not outsource it.

[farooqkz]

you have a valid point. what if a foss app with readable source could do the job?

[strukturart]

The user then has to install this, I think you should adapt and handle it like the other apps and integrate the qr reader directly into the app. Have you already searched for a somewhat more compact qr reader at npm ?

[cyan-2048]

59KB https://www.npmjs.com/package/qr-scanner

[farooqkz]

59KB or 450KB, it doesn't make sense that every app come with this while this space could be saved.

[Simon-Laux]

59KB or 450KB, it doesn't make sense that every app come with this while this space could be saved.

you should not start over optimizing, when the app is not close to version one yet, also there are way bigger ways to reduce size, like reducing the size of included images.

[strukturart]

59KB or 450KB, it doesn't make sense that every app come with this while this space could be saved.

with feature phones, the limited input options are often an obstacle. I would therefore put user-friendly input options before data quantity. if you want to do without the qr code scan, a file input would also be an option.

[farooqkz]

You two have valid points. I will try to find a ~50KB library.

[cyan-2048]

59KB or 450KB, it doesn't make sense that every app come with this while this space could be saved.

isn't that like... a problem with web development as a whole? KaiOS apps are known to use React but they never made the React library import-able? idk

[farooqkz]

Maybe but not necessarily. In theory, if all web applications use one single CDN for libraries, they will get cached in the user's browser and they get loaded just once for as many web apps as you like.

P.S.: Cyan here mentioned React for KaiOS just as an example and I strongly recommend you to not use React for KaiOS. You can choose something light like Svelte or Inferno.

[Simon-Laux]

In theory, if all web applications use one single CDN for libraries, they will get cached in the user's browser and they get loaded just once for as many web apps as you like.

yes but only if they use the same version and from the same CDN provider. also using cdns potentially adds tracking possibility, there is even an browser addon to replace CDNs by local caches of popular libs: https://decentraleyes.org/

[farooqkz]

In theory, if all web applications use one single CDN for libraries, they will get cached in the user's browser and they get loaded just once for as many web apps as you like.

yes but only if they use the same version and from the same CDN provider. also using cdns potentially adds tracking possibility, there is even an browser addon to replace CDNs by local caches of popular libs: https://decentraleyes.org/

I agree. That's why I used the word "necessarily" there :)