We love web apps here at Hatch because they are fun and fast to get up and running. It’s easy to make a personal app in Hatch and have it “installable,” appearing like other apps on your device, including a one-tap icon that launches the experience. Anyone using your web app will always already be using the latest version, without requiring an update on their end.
At first glance, a web app may seem like a regular webpage, hosted through a platform like Hatch and running within a browser. However, web apps lend themselves to highly interactive experiences, above and beyond just the presentation of information. Creators can make personal music players, portfolios, photo albums, games, interactive stories, announcements, and so much more in just one afternoon.
The one-minute video tutorial below will give you a quick overview of how to quickly create an app.
Add custom widgets to your app
There are heaps of pre-built HTML and iFrame widgets you can add to your web app to enhance your app. Many of these widgets even have style customizations. Consider the interactivity you could add to your app with customizable widgets like weather, world clocks, countdown timers, calendars, 3D models, maps, calculators, social feeds, product catalogs, customer reviews, or video and song playlists.
For this walkthrough, we’ll make a personal travel app including these widgets: a countdown timer, a custom clock, local weather, and some other surprises. We can add pre-made widgets through Hatch’s HTML element, which is located under “elements” on the left sidebar.
Many of these widget sites offer options to customize the style of your widget, including colors, fonts, and design. Once you’ve made your customizations, simply copy the HTML code that is output. Then jump over to your Hatch project and paste it in the HTML element on the editor.
Drag and drop the elements where you’d like. You can also add text, modify your background and make any other design or style changes. Hit preview on the top right to see if all of the elements are working as you’re expecting. And when you’re ready, hit publish. You can see our finished app here.
How to install a personal web app on your home screen or dock
If you’re using iOS, you can install your page as an app directly on your phone. When you publish your Hatch project, a QR code will be generated for your page next to the project URL. Either open the camera on your device to navigate to the URL, or manually type it in.
When the project opens in Safari, tap and pull up from the share arrow. This brings up the options and settings. You’ll then be prompted to name and add the app to your home screen.
If you want to try it out yourself, open up the personal travel app and remix it. We can’t wait to see what you create!