diff --git a/web/assets/js/sw.js b/web/assets/js/sw.js
new file mode 100644
index 00000000..46cf61c4
--- /dev/null
+++ b/web/assets/js/sw.js
@@ -0,0 +1,39 @@
+var self = this;
+
+var filesToCache = [
+    '/'
+];
+
+self.addEventListener('install', function (e) {
+    e.waitUntil(
+        caches.open('3xPanel').then(function (cache) {
+            return cache.addAll(filesToCache);
+        })
+    );
+});
+self.addEventListener('activate', function (event) {
+    event.waitUntil(
+        caches.keys().then(function (cacheNames) {
+            return Promise.all(
+                cacheNames.filter(function (cacheName) {
+                }).map(function (cacheName) {
+                    return caches.delete(cacheName);
+                })
+            );
+        })
+    );
+});
+self.addEventListener('fetch', function (event) {
+    event.respondWith(
+        caches.open('mysite-dynamic').then(function (cache) {
+            return cache.match(event.request).then(function (response) {
+                return response || fetch(event.request).then(function (response) {
+                    cache.put(event.request, response.clone());
+                    return response;
+                });
+            });
+        })
+    );
+});
+
+console.clear();
\ No newline at end of file
diff --git a/web/assets/manifest.json b/web/assets/manifest.json
new file mode 100644
index 00000000..04c63c1d
--- /dev/null
+++ b/web/assets/manifest.json
@@ -0,0 +1,41 @@
+{
+  "name": "3x-UI Panel",
+  "short_name": "3xPanel",
+  "description": "3x-ui panel converted to PWA",
+  "start_url": "/",
+  "background_color": "#F4F4F4",
+  "display": "fullscreen",
+  "theme_color": "#293343",
+  "icons": [
+    {
+      "src": "./assets/icons/16.png",
+      "sizes": "16x16",
+      "type": "image/png"
+    },
+    {
+      "src": "./assets/icons/24.png",
+      "sizes": "24x24",
+      "type": "image/png"
+    },
+    {
+      "src": "./assets/icons/32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "./assets/icons/64.png",
+      "sizes": "64x64",
+      "type": "image/png"
+    },
+    {
+      "src": "./assets/icons/192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "./assets/icons/512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/web/html/common/head.html b/web/html/common/head.html
index 4fa2ea8a..e20cdc24 100644
--- a/web/html/common/head.html
+++ b/web/html/common/head.html
@@ -9,6 +9,16 @@
     <link rel="stylesheet" href="{{ .base_path }}assets/css/custom.css?{{ .cur_ver }}">
     <link rel=”icon” type=”image/x-icon” href="{{ .base_path }}assets/favicon.ico">
     <link rel="shortcut icon" type="image/x-icon" href="{{ .base_path }}assets/favicon.ico">
+    <link rel="manifest" href="{{ .base_path }}assets/manifest.json">
+
+    <script>
+        if ('serviceWorker' in navigator) {
+            navigator.serviceWorker.register('{{ .base_path }}assets/js/sw.js')
+                .then(function () {
+                    console.log('Service Worker Registered');
+                });
+        }
+    </script>
     <style>
         [v-cloak] {
             display: none;