How do students see the phone layout?

The lab has no browser of its own. They open the Preview link in their own browser and make the window narrow, or use the browser’s own device view if it has one. That shows the layout. It does not show how a thumb feels or how a phone’s own browser behaves, so a real phone is better when one is to hand.

Why does the service worker not install on the preview link?

A browser only allows a service worker on a secure address, and the preview link may not count as one in every browser. The app still works without it. The browser’s console says whether it was refused. The script steps/offline.py checks the file list in either case, and shows the one file that does not exist.

Why is there no token or password to type?

A lab’s web pages are reached only through the platform’s own door, which already knows who you are and lets in only you and the staff who teach your module. So JupyterLab is started with no token. Do not run it like that on a machine anybody else can reach.

Mobile web lab: a responsive, installable web app to build in the browser

This lab gives each student a JupyterLab of their own and a small web app to work on: a habit tracker with a page, a stylesheet, a script, a manifest and a service worker. A second link, Preview, serves the app as it is now, so the student edits a file in JupyterLab, saves, and reloads the preview in their own browser, with the window narrow or in the browser’s device view, to see how it looks on a phone.

It is not an attack lab. Every copy has no route to the internet and none to any other student, so nothing can be downloaded into it and nothing in it can reach anybody else.

What students learn

Why a page needs the viewport tag to be drawn at the right width on a phone, how a mobile first stylesheet adds media queries at 600 and 900 pixels, and why a button should be at least about 44 pixels to press with a thumb. Then the two files that make a web app installable and usable offline: the manifest, with a name, icons and colours, and a service worker that saves a list of files in a cache. They also weigh what a mobile web app can and cannot do next to a native app. The lab has no browser of its own, so what a browser then does, such as offering to install the app, is seen by the student in theirs. It suits introductions to web development and mobile design; check your own awarding body’s unit for the exact wording, none is quoted here.

Run it in your browser

The lab starts one service, jupyter, which writes the app, two icons, a notebook and the short scripts into its work folder and starts a small static server on the folder app/. It uses about 80 MB when idle, inside the 512 MB a service may have. JupyterLab asks for no token, because the platform’s own door already knows who is opening it. The terminal beside the lab has no Python of its own, so it reaches the lab’s with docker exec jupyter, followed by the command to run inside.

Open the Container page. Open Build on the bar and choose Run a container. Anybody may open it, and the Git lab and the SQL lab start with no account. Every other lab needs a free account: create one, sign in, then press Start.
Find the lab. The Sample labs card lists every sample. Find Mobile web: a responsive habit tracker.
Press Start. Start runs it as it is, in one press. Edit the file first opens the compose file so you can change it before you start.
Open it. On the lab’s page, the lab bar has two links, JupyterLab and Preview. Press Preview to see the app in your browser and make the window narrow. Press JupyterLab and double-click start.ipynb, or press Open terminal and type docker exec jupyter python3 steps/viewport.py to see that the viewport tag is found.

What to ask students to hand in

The file app/style.css, downloaded from JupyterLab with File, Download, after they make the small buttons (the Add button, the filter buttons and the round done button) at least 44 pixels, and a sentence or two on what they changed and how they checked it in their own browser. Running steps/touch.py before and after shows the change: it starts with four sizes under 44 and a finished answer has none. Nothing is marked automatically, and the sentence shows whether it was understood. For stronger work ask for the missing background_color in the manifest, or for the file the service worker lists that does not exist, with a note on why the install would fail without it.

A basic lesson on this lab

Mobile Web Basics is a small lesson worked in this lab. In it a student lists the app, asks the preview server for three files, finds the viewport tag, lists the media queries, counts the buttons under 44 pixels, checks the manifest and checks the service worker’s list of files.

Free personal accounts have it in the Basics module, which is on Home, every college can copy it from the Library’s Basics folder. It is deliberately small: it shows a teacher what a lesson worked in a lab is, and the lab does the rest. Copy it into a module of your own to change it.

The code on GitHub

The compose file has no Dockerfile: it runs one stock public image, the Jupyter Docker Stacks’ own scipy-notebook, pinned to a dated tag, as its own unprivileged account with 512 MB of memory. The image is licensed BSD-3-Clause and is not distributed by us. The file writes the app from fixed text when it starts, so every copy is the same and nothing is downloaded. The limits are honest ones: the app is small, there is no browser or phone in the lab, a browser may refuse a service worker on an address that is not secure, nothing can be installed from the internet, and nothing is kept when the lab stops, so a student downloads their files first.

Set it as work

Say in the task what to hand in.

Make the lab. In your module add a task and choose the Container lab card, then In a GitHub repository. Give https://github.com/mitsurutech/lab-mobile-web with the branch main. The compose file is the default, compose.yaml. Fork the repository first if you want to change it, for example to change the app.
Publish and try it. Publish pins the commit you were shown, so a later change in the repository does not alter a lab you have already set. Start your own copy first.
Hand it out. Assign it like any task, with a due date if you want one, and say in the task what to do and what to hand in.
Mark what is handed in. Open a student’s copy and the work they handed in, mark it, and send it back with a reason if it needs more.

Try this lab, and what it costs

A free personal account can work through the basic lessons in this lab, with enough free credit each month to follow most lessons and no card. For a class, a school or college has its first 365 days free for up to 50 students, then pays per student a year, with every lab included and staff free.

Questions people ask

How do students see the phone layout?: The lab has no browser of its own. They open the Preview link in their own browser and make the window narrow, or use the browser’s own device view if it has one. That shows the layout. It does not show how a thumb feels or how a phone’s own browser behaves, so a real phone is better when one is to hand.
Why does the service worker not install on the preview link?: A browser only allows a service worker on a secure address, and the preview link may not count as one in every browser. The app still works without it. The browser’s console says whether it was refused. The script steps/offline.py checks the file list in either case, and shows the one file that does not exist.
Why is there no token or password to type?: A lab’s web pages are reached only through the platform’s own door, which already knows who you are and lets in only you and the staff who teach your module. So JupyterLab is started with no token. Do not run it like that on a machine anybody else can reach.

Create a free account to run every lab.