Responsive web design and allow installation as a progressive web app (PWA) for phone or tablet

[Mesum-Hussain]

Problem

Experience on mobile phones and tablets is not good. The site explicitly feels like it's designed with a desktop first mentality. Even though the text is bigger, the site still don't feel responsive on mobiles and tablets. Besides the experience is also ruined more by the fact that I can't have it installed on my phone as an app instead of accessing it through a phone browser.

Proposed Solution

Make Jupyter mobile ready by implementing a better responsive experience and by letting users install it as a Progressive Web App on their smartphones and tablets. It could really be a very useful tool especially when the Foldable Phones and 5G go mainstream. The PWA (progressive web application) could also be uploaded to the Google Play Store and the iOS App Store.

Additional context

Google Colab solved this by making the website more responsive, though they still don't allow users to install a PWA.

Instagram, Twitter, Facebook and many others already have their PWAs hosted on Google Play Store.

[welcome]

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively.

You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! 👋

Welcome to the Jupyter community! 🎉

[krassowski]

Thank you for opening this issue. We already track mobile UI improvements in #3275. I also recently written up a short summary of the current work on discourse (for anyone interested in contributing).

I can't have it installed on my phone as an app instead of accessing it through a phone browser.

Not sure if this is what you are expecting, but jupyterlite offers a PWA. If jupyterlite does not offer the features you are expecting, would you mind opening a separate feature request issue detailing how would you envision the PWA to work (what features you would expect it to enable)?

[JasonWeill]

@Mesum-Hussain Can you please respond to @krassowski 's comment above regarding what features you'd like to see in a JupyterLab mobile-friendly PWA? Thanks!

[JasonWeill]

There are already a few mobile applications in the Apple App Store and in Google Play that work with Jupyter notebooks — these might provide inspiration for building a PWA.

[Mesum-Hussain]

@Mesum-Hussain Can you please respond to @krassowski 's comment above regarding what features you'd like to see in a JupyterLab mobile-friendly PWA? Thanks!

Basically want something like Google Colab.....it has a File Explorer as a Navigation Drawer and a Code input area suitable for mobile form factor.

It would be ideal if all the Menus (File, View, etc.) appear as pop up menus instead of a drop-down menu like in a desktop site.

Would be better if most of the Menu items which are not frequently required, are placed in the settings instead of appearing always on the screen in a ribbon on the top.

There are already a few mobile applications in the Apple App Store and in Google Play that work with Jupyter notebooks — these might provide inspiration for building a PWA.

I will check and suggest some apps we could take inspiration from.

My ultimate intention is to be able to code something like a website or an app on a Tablet or a Smartphone. I hope that's possible because Jupyter Notebook supports languages like Kotlin and JavaScript..... never tried them personally though.