diff --git a/README.md b/README.md
index aae0dcf..0daac6a 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,77 @@
-# [:] Example Python 2 Project
+# Video Web Application Documentation
 
-An example Python project to demonstrate [srcclr](https://www.srcclr.com) scans.
+---
 
-Check out the [python3](https://github.com/srcclr/example-python/tree/python3) branch for a project that builds with Python 3.
+## Overview
+This documentation provides a detailed description of a web application focused on video processing and playback. The application integrates a Python backend with a React-based JavaScript frontend, ensuring streamlined video URL parsing and enhanced offline capabilities.
 
-## Try me!
+---
 
-```
-brew tap srcclr/srcclr
-brew install srcclr
-srcclr activate
-srcclr scan --url https://github.com/srcclr/example-python
-```
+## Components
+
+### Backend (Python)
+- **`main.py`**  
+  - **Purpose**: Core script managing HTTP requests and processing video-related commands.  
+  - **Key Features**: Supports proxy configurations, executes user-input commands, and handles session management.  
+  - **Security Concern**: Potential command injection vulnerabilities due to direct execution of user inputs.  
+
+- **`requirements.txt`**  
+  - **Purpose**: Contains a list of all required Python libraries for the application.
+
+### Frontend (JavaScript)
+- **`html.js`**  
+  - **Purpose**: A React component that creates the HTML structure and integrates necessary styles and scripts.  
+  - **Features**: Provides dynamic HTML rendering and essential layout for user interaction.
+
+- **`sw.js`**  
+  - **Purpose**: Implements a Service Worker to cache necessary web assets, enhancing offline usability.  
+  - **Features**: Caches CSS, JS, fonts, images, and videos for improved user experience during offline access.
+
+- **`v.js`**  
+  - **Purpose**: Manages video playback features, including a user interface for video URL inputs.  
+  - **Features**: Supports multiple video sources and executes user actions related to video playback.
+
+### Configuration & CI/CD  
+- **`README.md`**  
+  - **Purpose**: Contains setup, usage instructions, and development notes for future reference.
+
+- **`.github/workflows/main.yml`**  
+  - **Purpose**: Configures continuous integration workflows using GitHub Actions for automated pull request reviews.
+
+---
+
+## Inputs
+- **Backend**: Receives user commands via **`main.py`** and video URLs through **`v.js`**.  
+- **CI/CD**: Triggered by pull requests targeted at the `master` branch.
+
+## Outputs  
+- **Frontend Rendering**: Produces an HTML interface with integrated video playback from **`html.js`**.  
+- **Offline Caching**: Caches essential resources through **`sw.js`** for offline accessibility.  
+- **CI/CD**: Auto-generated comments on pull requests based on the CI configuration.
+
+---
+
+## Key Features  
+1. **Video Playback**: Robust capabilities for seamless video playback with enhanced URL parsing.  
+2. **Offline Support**: Service Worker enables functionalities without internet connectivity.  
+3. **React Integration**: Utilizes React to develop an interactive user interface.  
+4. **Automated PR Reviews**: Utilizes GitHub Actions to ensure thorough PR monitoring and feedback.
+
+---
+
+## Security Considerations  
+- Command injection vulnerabilities in **`main.py`** need attention; implement input validation and sanitization.  
+- Regularly check and update libraries in **`requirements.txt`** to mitigate security risks.
+
+---
+
+## Usage Instructions  
+1. **Install Dependencies**: Execute `pip install -r requirements.txt` to install necessary libraries.  
+2. **Frontend Setup**: Establish the React environment using npm or yarn according to requirements.  
+3. **Run Backend Server**: Initiate the server using the command `python main.py`.  
+4. **Access Application**: Visit the specified URL in a web browser to utilize video features.
+
+### Developer Notes  
+- Exercise caution regarding input vulnerabilities in **`main.py`** during modifications.  
+- Update caching strategies in **`sw.js`** in alignment with app updates to maintain offline capabilities.  
+- Conduct regular audits of **`requirements.txt`** to ensure the security and stability of dependencies.
\ No newline at end of file
diff --git a/sw.js b/sw.js
new file mode 100644
index 0000000..da18583
--- /dev/null
+++ b/sw.js
@@ -0,0 +1,67 @@
+
+if (location.href.includes('howdz.xyz')) {
+  importScripts('https://cdn.staticfile.org/workbox-sw/7.0.0/workbox-sw.js')
+  workbox.setConfig({
+    debug: false,
+  });
+  console.log('sw.js is load by CDN!')
+} else {
+  importScripts('./workbox/workbox-sw.js')
+  workbox.setConfig({
+    debug: false,
+    modulePathPrefix: './workbox/'
+  });
+  console.log('sw.js is load by local!')
+}
+
+// Cache css/js/font.
+workbox.routing.registerRoute(
+  ({ request }) => request.destination === 'style' || request.destination === 'script' || request.destination === 'font',
+  new workbox.strategies.CacheFirst({
+    cacheName: 'css-js-font',
+    plugins: [
+      new workbox.cacheableResponse.CacheableResponsePlugin({
+        statuses: [200],
+      }),
+      new workbox.expiration.ExpirationPlugin({
+        maxEntries: 50,
+        maxAgeSeconds: 60 * 60 * 24 * 7, // 7 Days
+      }),
+    ]
+  })
+);
+
+// Cache image.
+workbox.routing.registerRoute(
+  ({ request }) => request.destination === 'image',
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: 'image',
+    plugins: [
+      new workbox.cacheableResponse.CacheableResponsePlugin({
+        statuses: [200],
+      }),
+      new workbox.expiration.ExpirationPlugin({
+        maxEntries: 50,
+        maxAgeSeconds: 60 * 60 * 24 * 7, // 7 Days
+      })
+    ]
+  })
+)
+
+// Cache video
+workbox.routing.registerRoute(
+  ({ request }) => request.destination === 'video',
+  new workbox.strategies.CacheFirst({
+    cacheName: 'video',
+    plugins: [
+      new workbox.cacheableResponse.CacheableResponsePlugin({
+        statuses: [200],
+      }),
+      new workbox.expiration.ExpirationPlugin({
+        maxEntries: 50,
+        maxAgeSeconds: 60 * 60 * 24 * 7, // 7 Days
+      }),
+      new workbox.rangeRequests.RangeRequestsPlugin()
+    ]
+  })
+)
diff --git a/v.js b/v.js
new file mode 100644
index 0000000..7476a75
--- /dev/null
+++ b/v.js
@@ -0,0 +1,87 @@
+// 用法详见: https://github.com/smxl/500
+let body=`<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>V 视频</title>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
+</head>
+<body>
+<div class="container">
+<div class="header text-center"><h1><small>Vip 视频 粘贴 解析 播放</small></h1></div>
+<div class="main">
+<form class="form-horizontal" method="post">
+<div class="form-group">
+<label for="api" class="col-sm-2 control-label">选取</label>
+<div class="col-sm-10">
+<select id="jk" size="1" onchange="fnChange()" class="form-control">
+<optgroup label="支持搜索"><option value="https://vip.bljiex.com/?v=">BL 解析</option><option value="https://z1.m1907.cn/?jx=">M1907 有广</option></optgroup>
+<optgroup label="备用"><option value="https://okjx.cc/?url=">OK 解析</option></optgroup>
+</select>
+</div>
+</div>
+<div class="form-group">
+<label for="url" class="col-sm-2 control-label">输入</label>
+<div class="col-sm-10"><input type="url" class="form-control" id="vipurl" placeholder="视频地址" /></div>
+</div>
+<div class="form-group">
+<div class="col-sm-offset-2 col-sm-10"><button type="button" onclick="onPlay()" class="btn btn-primary">解析</button> <button type="button" onclick="onClear()" class="btn btn-primary">清空</button> <button type="button" onclick="onShare()" class="btn btn-primary">复制</button></div>
+</div></form>
+</div>
+</div>
+<iframe src="" id="play" width="100%" height="50%" frameborder="0" allowfullscreen scrolling="no" style="position:absolute"></iframe>
+<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+<script>
+function init() {
+    document.getElementById("jk");
+}
+init();
+function fnChange() {}
+function onClear() {
+    document.getElementById("vipurl").value = "";
+}
+function onShare() {
+    navigator.clipboard.writeText("https://" + document.domain + "/v.html?vv=" + document.getElementById("vipurl").value)
+}
+function onPlay() {
+    var e = document.getElementById("jk"),
+        t = e.options[e.selectedIndex].value,
+        n = document.getElementById("vipurl").value,
+        o = document.getElementById("play");
+    0 < n.length && (o.src = t + n);
+}
+function getQueryVariable(variable)
+{
+        var query = window.location.search.substring(1);
+        var vars = query.split("&");
+        for (var i=0;i<vars.length;i++) {
+                var pair = vars[i].split("=");
+                if(pair[0] == variable){return pair[1];}
+        }
+        return(false);
+}
+function vipvideovalue()
+{
+    if (getQueryVariable("vv").length>1) {
+        document.getElementById("vipurl").value = getQueryVariable("vv");
+    } else {
+        
+    }
+}
+vipvideovalue();
+</script>
+</body>
+</html>
+`
+
+const Status = "HTTP/1.1 200 OK";
+const Headers = {};
+const Data = body;
+const Response = {
+    status: Status,
+    //headers: Headers, // Optional.
+    body: Data // Optional.
+};
+
+$done(Response);
