Blazor webassembly’s PWA

I was going to start working on migrating my Blazor Webassembly App to .NET MAUI in order to use it more conveniently on my IOS device, but I totally forgot about the PWA feature.  Following the official and well documented microsoft’s guide allowed me to easily enable PWA on my app.
It’s working like magic!

ASP.NET Core Blazor Progressive Web Application (PWA)

今開発中、というより随時機能追加や微調整中のアプリを今後iPhoneで使うために.NET MAUIへのコード移行を考えていたけれど、Blazor WebassemblyはPWAという素晴らしい機能が使えるのを完全に忘れていた。
今日はマイクロソフトのオフィシャルサイトのドキュメントを見てちょいちょいコードをいじって無事携帯からアプリ画面経由でアプリを開くことに成功。
素晴らしい。Apple Developerの登録や、アプリの審査とか不要なので便利!

Plans and fixes for Nanisuru Webapp.


I finished an unsatisfactory state of my webapp Nanisuru (ToDo), and already have some improvements and fixes I need to start working on.
Also excited for some new features which I have never implemented.  Should be a challenge, but good material to set new grounds.
Did some planning and brainstorming on how to approach my trello list today.

Some UI updates to my webapp

Been doing some small UI updates and code fixes for my Blazor WASM webapp.  I decided to maintain, and add more features while also preparing a adhoc private distribution of the IOS version using the .NET MAUI Blazor framework.  Most code should run as is, but stuff like local storage needs to be modified to fit IOS’s secure storage.

Blazor webassembly base path issues.

If you’re uploading your blazor wasm project on a subdirectory on your host, you have likely hit a problem where you had to edit the <base href> in wwwroot/index.html to adjust.  But after you do this, launching the project on your local machine turns up with a path problem.
I had to edit the base href parameter each time to test locally, but there’s a sweet fix for this thanks to this post

Simply replace <base href> in index.html with the below:

<base />
<script>
var path = window.location.pathname.split(‘/’);
var base = document.getElementsByTagName(‘base’)[0];
if (window.location.host.includes(‘localhost’)) {
base.setAttribute(‘href’, ‘/’);
} else if (path.length > 2) {
base.setAttribute(‘href’, ‘/’ + path[1] + ‘/’);
} else if (path[path.length – 1].length != 0) {
window.location.replace(window.location.origin + window.location.pathname + ‘/’ + window.location.search);
}
</script>

Screenshot taken in case link goes bad:

 

Progress on my personal ToDo app

Last year I created a personal ToDo app using Xamarin, and released it privately.  This year, I wanted to experience Blazor.  I decided to re-code the backend API handling database CRUD functions and get my hands dirty with Blazor Webassembly.
I kept things simple as possible, yet tweaked some stuff around to get a better understanding of the code instead of watching/reading an article and just slapping the code on.
Interface is prototype-ish.  Figured I’ll get my app running and then update as I go.

Dones:
– Asp.net Backend API hosted and ready to go.
– JWT Token, and expiration/validity check in place.
– Secure token in localstorage.  (Decided to use localstorage, instead of httponly cookie this time around)

Todos:
– Add, Edit, Delete function.
– Archive page to browse past, completed ToDos.

Environment Variables -> AWS Parameter Store

After contemplating wether to use Azure’s vault, or AWS’s Secrets Manager, I’ve ended with the choice to use AWS’s Parameter Store.
Simple and clean.

– NuGet required (Amazon.Extensions.Configuration.SystemManager

For the minimal setup this is all you need in your Program.cs
builder.Configuration.AddSystemsManager(“PATH”, TimeSpan.FromDays(X));

I’ve safely stored the DB connection strings, and a few other sensitive data successfully.

Todo mobile app progress


Done with:
– Web API to hand out JWT bearer token to limited user
– Mobile app to authenticate user, retrieve Token via API
– Mobile app to save bearer token, and load for httpclient calls
– A way to add token in the httpclient header
– Save login username in preferences.
– Save password securely encrypted locally
– Data Binding to <CollectiveView.ItemTemplate>
– Figure out how to convert DateTime binding data to Date string

Left with:
– Add pages to display category specific Todos
– Add a page to create a new Todo in database
– Checkbox selection to Update data in database
– Checkbox selection to Delete data from database
– Add internet connectivity check before communicating with API
– Return user to login if Token is expired
– Learn QueryAsync, UpdateAsync, DeleteAsync

– Touch up UI
– Testing anything and everything on iphone

Got my token to store/load.

I thought a basic Todo app would be a walk in the park, but having to implement securely storing bearer tokens wasn’t on my mind.
Done with:
– Web API to hand out JWT bearer token to limited user
– Mobile app to authenticate user, retrieve Token via API
– Mobile app to save bearer token, and load for httpclient calls.

Still left with:
– Save certain fields in local preferences storage which aren’t a security risk
– A way to add token in the httpclient header
– Design UI for todo app
– Testing, and release.

MVC or MVP or MVVM

MVC ? MVP? MVVM? Which should I use for each project?
Yeah, I get it. Depends on the scope of the project.
After programming for a few months, I am still not comfortable with what to use.
Figured out that for web api’s, it’s common or simpler to stick with MVC.
Other than the above, I’ll just revisit this diagram when I’m a lost lamb.