chvin · hollow-owl · Sep 11, 2024 · Sep 11, 2024 · Sep 14, 2024 · Sep 14, 2024
diff --git a/docs/app-1.0.1.js b/docs/app-1.0.1.js
diff --git a/docs/app-1.0.1.js.map b/docs/app-1.0.1.js.map
diff --git a/docs/img/icons/android-chrome-192x192.png b/docs/img/icons/android-chrome-192x192.png
diff --git a/docs/img/icons/android-chrome-512x512.png b/docs/img/icons/android-chrome-512x512.png
diff --git a/docs/index.html b/docs/index.html
@@ -9,12 +9,22 @@
     <meta charset="UTF-8">
     <title>俄罗斯方块</title>
     <link href="./loader.css" rel="stylesheet" />
+    <link rel="manifest" href="/react-tetris/manifest.webmanifest" />
 <link href="css-1.0.1.css" rel="stylesheet"></head>
 <body>
 <div id="root">
     <div class="load">
         <div class="loader">加载中...</div>
     </div>
 </div>
+<script>
+    if (navigator.serviceWorker) {
+      navigator.serviceWorker.register (
+        '/react-tetris/sw.js',
+        {scope: '/react-tetris/'}
+      )
+    }
+</script>
+
 <script type="text/javascript" src="app-1.0.1.js"></script></body>
 </html>
diff --git a/docs/manifest.webmanifest b/docs/manifest.webmanifest
@@ -0,0 +1,21 @@
+{
+  "name": "俄罗斯方块",
+  "description": "使用React、Redux、Immutable制作的俄罗斯方块",
+  "scope": "/react-tetris/",
+  "start_url": "/react-tetris/",
+  "background_color": "#f3cb14",
+  "theme_color": "#ffffff",
+  "display": "standalone", 
+  "icons": [
+    {
+      "src": "./img/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "./img/icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/docs/sw.js b/docs/sw.js
@@ -0,0 +1,52 @@
+var GHPATH = '/react-tetris';
+var APP_PREFIX = 'react_tetris_';
+var VERSION = 'version_002';
+var URLS = [    
+  `${GHPATH}/`,
+  `${GHPATH}/index.html`,
+  `${GHPATH}/css-1.0.1.css`,
+  `${GHPATH}/app-1.0.1.js`,
+  `${GHPATH}/loader.css`
+]
+
+var CACHE_NAME = APP_PREFIX + VERSION
+self.addEventListener('fetch', function (e) {
+  console.log('Fetch request : ' + e.request.url);
+  e.respondWith(
+    caches.match(e.request).then(function (request) {
+      if (request) { 
+        console.log('Responding with cache : ' + e.request.url);
+        return request
+      } else {       
+        console.log('File is not cached, fetching : ' + e.request.url);
+        return fetch(e.request)
+      }
+    })
+  )
+})
+
+self.addEventListener('install', function (e) {
+  e.waitUntil(
+    caches.open(CACHE_NAME).then(function (cache) {
+      console.log('Installing cache : ' + CACHE_NAME);
+      return cache.addAll(URLS)
+    })
+  )
+})
+
+self.addEventListener('activate', function (e) {
+  e.waitUntil(
+    caches.keys().then(function (keyList) {
+      var cacheWhitelist = keyList.filter(function (key) {
+        return key.indexOf(APP_PREFIX)
+      })
+      cacheWhitelist.push(CACHE_NAME);
+      return Promise.all(keyList.map(function (key, i) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          console.log('Deleting cache : ' + keyList[i] );
+          return caches.delete(keyList[i])
+        }
+      }))
+    })
+  )
+})
diff --git a/server/img/icons/android-chrome-192x192.png b/server/img/icons/android-chrome-192x192.png
diff --git a/server/img/icons/android-chrome-512x512.png b/server/img/icons/android-chrome-512x512.png
diff --git a/server/index.tmpl.html b/server/index.tmpl.html
@@ -9,12 +9,22 @@
     <meta charset="UTF-8">
     <title>俄罗斯方块</title>
     <link href="./loader.css" rel="stylesheet" />
+    <link rel="manifest" href="/react-tetris/manifest.webmanifest" />
 </head>
 <body>
 <div id="root">
     <div class="load">
         <div class="loader">加载中...</div>
     </div>
 </div>
+<script>
+    if (navigator.serviceWorker) {
+      navigator.serviceWorker.register (
+        '/react-tetris/sw.js',
+        {scope: '/react-tetris/'}
+      )
+    }
+</script>
+
 </body>
 </html>
diff --git a/server/manifest.webmanifest b/server/manifest.webmanifest
@@ -0,0 +1,21 @@
+{
+  "name": "俄罗斯方块",
+  "description": "使用React、Redux、Immutable制作的俄罗斯方块",
+  "scope": "/react-tetris/",
+  "start_url": "/react-tetris/",
+  "background_color": "#f3cb14",
+  "theme_color": "#ffffff",
+  "display": "standalone", 
+  "icons": [
+    {
+      "src": "./img/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "./img/icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/server/sw.js b/server/sw.js
@@ -0,0 +1,52 @@
+var GHPATH = '/react-tetris';
+var APP_PREFIX = 'react_tetris_';
+var VERSION = 'version_002';
+var URLS = [    
+  `${GHPATH}/`,
+  `${GHPATH}/index.html`,
+  `${GHPATH}/css-1.0.1.css`,
+  `${GHPATH}/app-1.0.1.js`,
+  `${GHPATH}/loader.css`
+]
+
+var CACHE_NAME = APP_PREFIX + VERSION
+self.addEventListener('fetch', function (e) {
+  console.log('Fetch request : ' + e.request.url);
+  e.respondWith(
+    caches.match(e.request).then(function (request) {
+      if (request) { 
+        console.log('Responding with cache : ' + e.request.url);
+        return request
+      } else {       
+        console.log('File is not cached, fetching : ' + e.request.url);
+        return fetch(e.request)
+      }
+    })
+  )
+})
+
+self.addEventListener('install', function (e) {
+  e.waitUntil(
+    caches.open(CACHE_NAME).then(function (cache) {
+      console.log('Installing cache : ' + CACHE_NAME);
+      return cache.addAll(URLS)
+    })
+  )
+})
+
+self.addEventListener('activate', function (e) {
+  e.waitUntil(
+    caches.keys().then(function (keyList) {
+      var cacheWhitelist = keyList.filter(function (key) {
+        return key.indexOf(APP_PREFIX)
+      })
+      cacheWhitelist.push(CACHE_NAME);
+      return Promise.all(keyList.map(function (key, i) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          console.log('Deleting cache : ' + keyList[i] );
+          return caches.delete(keyList[i])
+        }
+      }))
+    })
+  )
+})
diff --git a/w.config.js b/w.config.js
@@ -77,6 +77,9 @@ var productionPlugins = [
   new CopyWebpackPlugin([
     { from: './src/resource/music/music.mp3' },
     { from: './src/resource/css/loader.css' },
+    { from: './server/img', to: 'img' },
+    { from: './server/manifest.webmanifest'},
+    { from: './server/sw.js' },
   ]),
   // HTML 模板
   new HtmlWebpackPlugin({