Homescreen: VSCode Extension

Simulate web apps running full screen on an iOS device

This is a VSCode extension that aims to helps facilitate development of web applications that have been "Added to Home Screen" by the user. The main difference between a web app running in a browser and a web app running full screen on a mobile device is the lack of a browser UI (like address bar, back and forward navigation buttons, etc).

Apps running full screen on a mobile device are expected to behave like native applications which requires the developer to make specific considerations when it comes to visual safe zones, routing and navigation patterns.

Note: This is currently still a visual only simulation. It does not simulate mobile specific events like touch, swipe, etc.

Features

• 🍱 Maintains device aspect ratio and scales approriately when resizing
• 🧭 Includes native UI elements like status bar, camera and navigation bar
• 🪬 Reload and inspect the app in dev tools using the extension menu

Usage

The extension renders a WebView panel that is intended to be placed on its own in a side bar within VSCode. Once placed the WebView panel will render the web app at a fixed aspect ratio and scale the content to fit within the panel.

1. Install the extension (a reload should not be required)
2. Click on the device icon in the activity bar
3. Drag the device icon to the secondary side bar (optional)
4. Enter the port number of your development server and hit connect

Once the WebView panel is placed and port entered, your web app and it will render within the panel. You can use the extension menu to refresh the app using the Reload button and inspect the app in dev tools using the Inspect button in the extension menu bar.