Over the past few months, I've been working on a tide times app called TidesX, which I've recently published onto the Play Store. It's written in HTML, TypeScript, and CSS. In this post I'm going to be discussing my experience developing and publishing a full Progressive Web App to the Play Store, from start to finish. I've included links to all the resources I used so you can explore further if you want to.
Coming up with an idea
I love watersports, especially paddle boarding, but because of where I live, I can only get out when the tide is pretty high. All the available tide times apps and websites that I could find were ugly and overly-complicated, and I came to the conclusion that I couldn't have been the only one frustrated about this. I decided to create my own, but being a web developer with no prior experience in mobile app development, I didn't know where to start.
Choosing technologies
I don't know anything but the very basics of Java, and I know no Kotlin, so writing a native Android app from scratch wouldn't have been good enough to publish. I knew from the beginning that I wanted to use web technologies and my knowledge of JavaScript and CSS to make a beautiful-looking app, so I started looking into React Native. However, I've always felt like JavaScript frameworks simplify things so much that they become more complicated (disagree with me in the comments, I know lots of you will!), so I decided to go without React Native or any other framework, seeing as the app was a relatively simple idea. I also chose to use TypeScript, as I much prefer it over regular JavaScript.
This raised the question, however: how was I going to make what was effectively a website available as an app? My first thought was Apache Cordova, but I'd recently heard about Progressive Web Apps and Trusted Web Activities, so I decided to dive headfirst into creating and publishing one. In hindsight, I'm very pleased I chose PWAs, as they provide all the functionality my app needs in a much smaller and more lightweight package.
Writing the app
The actual programming of the app was one of the simplest parts of the process. I'm already familiar with TypeScript and CSS, so putting together a good-looking and performant web app wasn't too hard. The actual tidal data was obtained from the UK Hydrographic Office's Admiralty API, which offers 10K requests per month for free. However, this isn't a lot, so I also used AWS Lambda as a proxy and cache for the API, partially to hide my API key from the end-user, but also to cache responses as the data from the UKHO only updates once a day for each location.
Hosting the site
I needed to find somewhere to host TidesX, and without doing much research, I settled on GitHub Pages because, being a serverless static site, it seemed the easiest option. This did however lead to some problems when signing the app, as you'll see later. I also ended up using Netlify to host the app's accompanying website from the same repo.
Turning it into a Progressive Web App
Once I had a website, I needed to make it into a PWA. Following several online tutorials, I managed to create a web app manifest, allowing me to install my PWA on my phone. All this actually required was a simple JSON file outlining the name of the app and linking in its icons, but getting the icons to work on different devices was quite a challenge. This was a great win for me, as I felt like I was nearing the finishing line.
Creating the Trusted Web Activity app bundle
The penultimate step to getting TidesX onto the Play Store was to turn the Progressive Web App into a Trusted Web Activity app bundle and sign it. After trying and failing to do so using Bubblewrap for quite a while, I ended up using PWABuilder which worked perfectly first try.
Struggling with Asset Links
To verify that the domain is mine, I needed to put a digital asset links file in a ".well-known" folder at the top level of my domain. This contained a signature for the app, allowing Android to run it without an insecure warning bar at the top. This turned out to be an issue, as the GitHub Pages domain obviously isn't mine! Eventually, I ended up creating a private ".well-known" repository, putting the asset links file in there, and enabling GitHub Pages, which worked.
Publishing to the Play Store
Publishing to the Play Store wasn't difficult once the app was signed. I just uploaded the app bundle, set up a store listing, and waited a few weeks for it to be approved. I woke up one morning with a notification telling me it was live on the Play Store, so with much excitement I installed it directly from the Play Store... to see the insecure warning bar. This was a big issue, as it completely ruined the user experience and made the app look not only unprofessional but also unsafe. After a few hours of debugging before breakfast, I finally discovered that Google had signed the app a second time with a different key to the one I had specified. It turned out that my key was the key to the PWA, and Google's was the key to the TWA, a distinction which wasn't clearly made anywhere. I updated my asset links file to include both signatures so the app would work no matter where it was installed from, and without needing to publish any update on Google Play, TidesX was finally functional on the Play Store.
Conclusion
In conclusion, creating and publishing a web app onto the Play Store was a challenging and fun project, and one I'd highly recommend for anyone to try. If you're interested in the code, you can find the full project on GitHub. If you're interested in the app itself, you can read more about it from a marketing point of view on its website, or download the app from the Play Store.
Thank you for reading!
Top comments (1)
Nice rundown of a publishing cycle for a pwa! Thanks for sharing :)