Page MenuHomePhabricator

KaiOS simulator in Firefox
Closed, ResolvedPublic

Assigned To
Authored By
Quiddity
Mar 12 2021, 1:34 AM
Referenced Files
F34178522: image.png
Mar 22 2021, 5:41 PM
F34178113: image.png
Mar 22 2021, 12:14 PM
F34178125: image.png
Mar 22 2021, 12:14 PM
F34178106: image.png
Mar 22 2021, 12:00 PM
F34155960: image.png
Mar 12 2021, 6:13 PM

Description

Problem

The KaiOS simulator is getting some attention already and will be getting a lot more when it is announced in Tech News next week.

Unfortunately is doesn't work in some browser configuration.

Solutions

  1. Add a "beta" disclaimer explaining that it may not work for you because your browser is different than the device it built for.
  2. Add some explanation about how to use the simulator (on screen keys, no touch, eetc)
  3. Monkey patch navigator.sendBeacon to be a no-op if it is not defined.
NOTE: TODO: write the actual disclaimer and explanation

Initial report:

At https://wikimedia.github.io/wikipedia-kaios/sim.html there is a problem for Firefox
I cannot get past the "Privacy and Terms" screen.
The arrows scroll up/down, and the upper-corner links to the "Terms" and "Policy" pages work properly, but [Enter] doesn't do anything.

(I'm using FF v.86 on Mint Linux)

It does work well in Chromium (and looks great and useful, thank you!)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

@Quiddity just to confirm, you are hitting the "Enter" button with the mouse, not the "Enter" key on your keyboard? Because the latter is disabled on purpose.

I tried on FF86 both on macbook and linux mint, works as expected for me

Yes, it loads up, and I click the graphical "Enter" button twice.
That works in Chromium, but not in my Firefox.
I've whitelisted the domain for cookies, and none of my privacy-extensions seem to be [detecting anything/interfering].
One of my teammates just tested in MacOS firefox 85, and they get the same bug I do. (hooray, not just me! But boo, reproducible :< )

Any errors in the Javascript console? Other than a few expected cross-domain origin policy violation?

Ah, yes, this looks like the main one

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.mediawiki.org/w/api.php?format=json&formatversion=2&origin=*&action=query&prop=revisions&titles=Wikipedia_for_KaiOS%2Fengagement1%2Ftrending%2Fen%2F2021-03-12&rvslots=main&rvprop=content. (Reason: CORS request did not succeed).

Full screenshot:

image.png (755×1 px, 170 KB)

I think that's the problem right there; the last entry in the screenshot. It's an unhandled exception and that's sufficient to prevent the app from moving forward after you have agreed to the terms.

We may be able to improve the error handling in cachedFetch but I don't know if it will resolve the issue. If CORS requests are completely disallowed by the browser the app just can't use the APIs it needs.

Notes from a chat with @Quiddity

After disabling the experiment with localStorage.setItem('2021-KaiOS-app-homepage-content-suggestions', 'control'), the app doesn't try to fetch the experiment config but it fails with Uncaught TypeError: navigator.sendBeacon is not a function when trying to record the Terms and Services consent.

We need to put a big nice "beta" banner and some explanation about why the app may not work in some browsers. We could do a bit of feature detection to provide a more informed message.

The Tech News announcement about the simulator was postponed so we have a week to address this before a larger audience starts playing with it. Therefore putting on the kanban board.

Monkey patching sendBeacon
if (!appFrame.contentWindow.navigator.sendBeacon) {
	appFrame.contentWindow.navigator.sendBeacon = function() {}
}
SBisson moved this task from Backlog to Dev on the Inuka-Team (Kanban) board.

Above the phone, create a small banner/copy that reads beta version

On the left, have three links:
Link 1: How to use the phone - opens a dialog box with the following information

  • This is a non-touch phone. Use the keypad to navigate the app
  • Use the arrow keys to move up and down an article
  • Use the left and right keys at the bottom of the screen to choose actions
  • Use the red key to exit a screen

Link. 2: Configuration

  • Goes into configuration options like the experiment

Link 3: About the simulator

Tested in a multitude of browsers on both windows and macos (browserstack doesn't have linux), the only error I saw was on windows XP on Chrome 49

image.png (280×1 px, 206 KB)

Safe to ignore?

Tested on (a few more than these but this shows the majority)

image.png (350×2 px, 82 KB)

image.png (416×2 px, 93 KB)

[...] windows XP on Chrome 49
Safe to ignore?

Let me do a super quick fix for that

This is merged. Please test again.

Now I get this and still can't use the sim

image.png (218×1 px, 178 KB)

I don't think we'll try to fix it at this time. Chrome 49 is too long ago.