mobile-phone

Having developed with desktop & web apps for a few years now, I have always thought to get into mobile development. There is a great market for it, and it just seemed like the natural finishing touch to my development career.

I know XAML from WPF, and whilst it is different in Xamarin there is a lot of similarity. Aside from the time though it would take to really get to know my way around the different controls, folder setup etc. then there is the ‘Apple issue’ where to officially develop for Apple’s products you need to own a Mac. Whilst you can get around this by using a VM, then there is the testing problem if you don’t own an iPhone.

To combat these issue I thought of creating a basic shell Xamarin app and then using a WebView to show the actual app. This means it is just a website that can be tested on any small screen device, and doesn’t require a Mac to create.

I created a test app and deployed it to Android. There were a few issues, it was very slow loading since it first loaded the shell app and then pulled in the website. This meant there was a slight delay (of a blank white page) before the content was visible.
Another issue was, when opening another app and going back to it, the phone puts the app to sleep to save resources, this means the app doesn’t remember where in the site the app was up to. If you had navigated to another page it was all within the shell WebView so when reopening the app it refreshed the WebView and reloaded the home page of the site.
Also links within the app could be opened either by the WebView‘s internal view, or by opening a popup browser. There didn’t seem to be a way to choose for different links (besides, how would the shell app know what the WebView‘s content contained to open links in different places). This meant that a link to another page on the site would open internally but a link with target="_blank" just wouldn’t open. I believe this is due to the app being set to open links only in internal view which isn’t able to open another tab.

So I thought again, and the best solution was to actually create a Blazor Mobile Bindings app. This is only in testing currently so still not a solution for production, but definitely something to look at. It means you can develop one code base as a website and use that as a mobile app too.
(Edit: This has now been made available with .NET 6)

Then to save the day I came across PWABuilder! Built by Microsoft, it converts your PWA website into a mobile & desktop app. You don’t even need to upload the code. Just enter the URL to the PWA into the textbox and hit start. You will get a score based on how good your PWA conforms to the requirements. If you have done enough you will get a generated package for the Play Store, Apple’s Store and the Windows Store. (For more info and guidance with adding it to the stores etc. read the PWABuilder Documentation | PWA Builder Blog.)

This I believe is the simplest and quickest way to create mobile apps. For further reading here is a great more in depth article Will PWAs replace native mobile apps on the subject.

Conclusion

The easiest (and quickest) solution to creating mobile apps is by far going down the PWA route. Since websites should be built with responsive design so that it will work and look as it should in mobile view your already most of the way there once you’ve built a website. It also enables reusing the same code used to build the site.

2 Comments

  • spoxe

    Good read. I am a .Net developer and have also been toying with the idea of using Blazor and PWA to create mobile app’s. Now its been over a year since this post, what are your thoughts on this approach?

    • Aryeh Silver

      Thank you.
      A lot has changed over the last year. MAUI is now GA, and I would say a much better option than PWAs. You can create a Blazor site within the app, and so can be reused as a site too. Most of the issues with PWAs are removed using MAUI.
      Another issue with PWAs that I missed in this article, is the fact that Apple doesn’t allow them into their Play Store.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.