DEV Community

ben
ben

Posted on

Practical Combat of MAUI Embedded Web Architecture (10) App Web Shell Architecture: Building a Cross-Platform Local Application Platform

#csharp #vbnet #maui #web

PicoServer
Source Code URL:
https://github.com/densen2014/MauiPicoAdmin

In the previous articles of this series, we have gradually built a complete local web architecture based on MAUI + PicoServer, which includes the following components:

  • Embedded Web Server
  • REST API
  • Web Admin Management Backend
  • WebSocket Real-Time Communication
  • Permission System
  • Automatic Controller Discovery
  • PWA Offline System

At this point, we can re-examine this system.

You will find that:
It is no longer just a Web Admin.

It is actually a new application architecture:
App Web Shell

I. What Is App Web Shell

Traditional Application Structure 

Native UI
↓
Native Logic
↓
Database
Enter fullscreen mode Exit fullscreen mode

Web Application Structure 

Browser
↓
Web Server
↓
Database
Enter fullscreen mode Exit fullscreen mode

App Web Shell Architecture 

Web UI
↓
Local Web Server
↓
Local Services
↓
Database / Device
Enter fullscreen mode Exit fullscreen mode

Its essence is:
Driving local applications with Web UI

II. Complete System Architecture

The final architecture is as follows:

                Web UI
                 │
             Service Worker
                 │
        ┌────────┴─────────┐
        │                  │
   Cache Storage       IndexedDB
        │                  │
        └────────┬─────────┘
                 │
             PicoServer
                 │
            REST API
                 │
        ┌────────┴─────────┐
        │                  │
      MAUI Services    Plugin APIs
        │                  │
        └────────┬─────────┘
                 │
              SQLite
                 │
               Device
Enter fullscreen mode Exit fullscreen mode

This architecture achieves the following capabilities:

  • Web UI
  • Local API
  • Local Database
  • Offline Operation
  • Plugin Extension

III. Why Choose Web Shell

Traditional App UI has many drawbacks:

1. High UI Development Cost

Native UI requires three separate codebases for:

  • Android
  • iOS
  • Windows

Web UI only needs one set of technologies:

  • HTML
  • CSS
  • JS

2. Difficult Updates

Native Apps require:

  • Publishing
  • Review
  • Update Distribution

Web UI can be updated simply by:

  • Refreshing the page

3. Troublesome Plugin Extension

Traditional Apps need:

  • Recompilation
  • Republishing

Web Shell enables extension by:

  • Adding new APIs
  • Adding new pages

IV. The Role of PicoServer

In the entire architecture:
PicoServer is the core component

It undertakes the following roles:

  • Web Server
  • API Gateway
  • Plugin Loader
  • Local Service Bridge

All web requests follow this flow:

Browser
↓
PicoServer
↓
MAUI
Enter fullscreen mode Exit fullscreen mode

V. Plug-in API System

With the automatic controller discovery mechanism we implemented earlier, adding new APIs becomes extremely simple:

public class ProductController
{
    [Route("/api/products")]
    public List<Product> GetProducts()
}
Enter fullscreen mode Exit fullscreen mode

The system automatically registers the API on startup via:

api.AddRoute(...)
Enter fullscreen mode Exit fullscreen mode

No modifications to the main program are required.

VI. PWA Offline Capabilities

With Service Worker, we achieve:

  • Offline Caching
  • Background Updates
  • Local Database

The user experience is close to that of a native app.

The system supports:

  • Browsing products offline
  • Placing orders offline
  • Syncing data when the network is restored

VII. WebSocket Real-Time Communication

WebSocket solves the needs for:

  • Real-time data updates
  • Device status monitoring
  • Log pushing

The structure is as follows:

Browser
↕
WebSocket
↕
PicoServer
Enter fullscreen mode Exit fullscreen mode

This enables real-time UI updates.

VIII. Advantages of App Web Shell

The final system has the following strengths:

1. Cross-Platform Compatibility

MAUI supports multiple platforms:

  • Windows
  • Android
  • iOS
  • Mac

2. Offline Operation

Powered by PWA technologies:

  • Service Worker
  • IndexedDB
  • Cache Storage

3. High Extensibility

Through the plug-in API system:

  • Controllers
  • Modules
  • Plugins

4. Rapid UI Development

Web UI supports any frontend framework:

  • Vue
  • React
  • Alpine
  • HTMX

IX. Applicable Scenarios

This architecture is particularly suitable for:

  • IoT Devices
    • Device management
    • Local control
    • Monitoring dashboards
  • Commercial Terminals
    • POS systems
    • Warehouse management systems
    • PDAs
  • Industrial Systems
    • Production equipment management
    • Factory monitoring
    • Control systems
  • Local Tools
    • NAS management
    • Download utilities
    • Administrative backends

X. Architecture Summary

The entire system can be summarized in one sentence:
App = Web UI + Local API + Local Database

In other words:

Web Shell
↓
Local Server
↓
Local Services
Enter fullscreen mode Exit fullscreen mode

Web is responsible for:

  • UI presentation
  • User interaction
  • Business logic

Local layer is responsible for:

  • Device access
  • Data storage
  • System-level capabilities

Series Summary

This series of articles has demonstrated how to build a local web application architecture based on MAUI + PicoServer from scratch.

We have evolved from the basics to a complete system, covering:

  • Web Server
  • REST API
  • Web Admin
  • WebSocket
  • Plugin System
  • PWA Offline
  • Web Shell

Ultimately, we have built a cross-platform local application platform.

Top comments (0)