# mcuking/mobile-web-best-practice

:tiger: 移动 web 最佳实践

Repository: https://github.com/mcuking/mobile-web-best-practice
Canonical: https://ross.abutalabs.com/products/mobile-web-best-practice
Homepage: https://mcuking.github.io/mobile-web-best-practice
Language: TypeScript
License: MIT
License Family: permissive
Topics: vue, h5, hybrid, best-practice, app
Last push: 2026-02-09T20:43:54+00:00

## Health v2 (maintenance only)
Score: 62/100 (v2, computed 2026-09-03T02:20:16.233290+00:00)
- activity 66, release rhythm 35, longevity 100
- inputs: {"age_days": 2580, "days_push": 205, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: no_releases
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 1740, forks 276 (observed 2026-08-28T04:05:30.182372+00:00)

## What it is
A Vue 3 + TypeScript Todo application that demonstrates best practices for mobile web (H5/hybrid) development, covering layered architecture, micro-frontends, offline packages, JSBridge, error monitoring, and more. It serves as both a reference guide and a working sample app whose patterns apply beyond Vue and to PC web development as well.

## Use cases
- learn best practices for mobile web development
- structure a complex SPA with layered clean architecture
- build a hybrid app communicating with native via JSBridge
- implement offline packages and request caching in an H5 app
- set up error monitoring and page state preservation on mobile web
- handle mobile style adaptation and form validation
- configure webpack strategies for a mobile web project

## When to choose
- you are starting a mobile H5 or hybrid web app and want proven patterns
- you want a reference implementation of DDD/clean architecture in a frontend codebase
- you need examples of JSBridge, offline caching, or native capability gating in webviews

## When to avoid
- you need a production-ready framework or library to drop into your project rather than a reference example
- your stack is not Vue-based and you cannot adapt the patterns
- you need a maintained starter with long-term support rather than an intermittently updated demo

## Facets
- artifact type: learning-resource
- maturity: maintenance
- function: frontend-framework, state-management, form-handling, developer-tools, middleware
- domain: web-development, mobile-development, frontend, tutorials, cross-platform
- platform: cross-platform
- tags: mobile-web, best-practices, vue, hybrid-app, h5, jsbridge, clean-architecture, offline-package, micro-frontend, todo-app, web-server, android, ios, nodejs

## Member repositories
- mcuking/mobile-web-best-practice (main) score 62

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:05:30.182372+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T03:30:06.662787+00:00, confidence not recorded.
  - readme: https://github.com/mcuking/mobile-web-best-practice (fetched 2026-08-28T04:05:30.182372+00:00, sha 9c36ea1c9ac5)
  - homepage: https://mcuking.github.io/mobile-web-best-practice (fetched 2026-08-29T11:07:51.026864+00:00, sha a7f018779fd8)
- Data as of 2026-08-30T08:39:29.467469+00:00.