If $99 per year is dust to you then this post is not for you 🙂. If it is not, then let take a look !
A fact is that it will cost $99 per year to publish mobile applications to the App Store. For any indie developers who are at the first step of publishing their app, this cost might cause some hesitation.
In case your application is simple and does not depend on system-level APIs such as GPS, File System, Bluetooth, Background Activities, or Push Notifications, it is possible to make use of the PWA feature supported by the Safari browser, which is always available on iOS and macOS.
PWA stands for Progressive Web App. It is a web app but can be installed on smartphones like a mobile app. Simply put, instead of accessing it via a web browser like Safari or Chrome, users can find an icon on their phone, tap it, and open the app. This experience makes it feel like a mobile app, but beneath it, it opens a browser session and renders HTML, JS, and CSS code. Although the experience of using a PWA is not as smooth and optimized as that of a mobile app, it is acceptable for simple tools, content-first applications, or admin dashboards.
I will take one of my favorite PWA applications, Meme Express, as an example. Meme Express is a meme editor that I use on my MacBook and iPhone whenever I want to create a meme. This meme editor is built with the Flutter framework. It has a native app on the Play Store for Android and a PWA version for the rest of the operating systems, including iOS, macOS, Windows, and Linux; essentially, any device that can run a browser can use it.
How is PWA version of Meme Express made ?
Framework
Align with mobile first design, Flutter is in used. For simple tools, Flutter is a perfect cross-platform solution, when we can write code once then port to iOS, Android, WebApp, Window and Linux application.
Deploy
For Android version, it is published via Playstore normally, at here: https://play.google.com/store/apps/details?id=com.ease_studio.meme. Unlike other cross-platform framework that utilize in-app web view to mimic mobile app, Flutter ports application to a native Android app.
For iOS version, Flutter can port app to native iOS code as well. But because 99$/year is not an option here, PWA version comes as a rescue.
To publish a PWA version, a hosting server is required, which incurs a monthly cost. Luckily, GitHub Pages allows us to deploy a web app from a repository for free, and it can be accessed via the URL username.github.io/app-name. For example, with Meme Express, it is https://ease-studio.github.io/meme-pwa/. GitHub Pages also allows you to map a domain name to it; for instance, https://meme-express.io.vn/ actually points to https://ease-studio.github.io/meme-pwa/.
Make it Installable
To make a web app installable, also known as a PWA app, a file called manifest.json is added. The structure of manifest.json is defined at: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest.
Install PWA app
Below is a demonstration of installing a PWA app on an iPhone, using Meme Express as an example. Simply put:
- Open Safari and go to https://meme-express.io.vn/
- tap “Share” icon
- tap “Add to Home Screen”