Merge pull request #49 from takatoshiinaoka/set-pwd

[add] VitePWA settings
takatoshiinaoka · Dec 24, 2022 · 6e37e78 · 6e37e78
2 parents 9f08cc0 + b5abe0e
commit 6e37e78
Show file tree

Hide file tree

Showing 12 changed files with 1,838 additions and 28 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,4 +22,3 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-.node-version
diff --git a/.node-version b/.node-version
@@ -0,0 +1 @@
+16.16.0
diff --git a/api/README.md b/api/README.md
@@ -0,0 +1,12 @@
+# api
+
+Static Web Apps の API です。
+
+## api のホットリロード
+
+オプション -w  
+監視モードでコンパイラを実行します。 入力(input)ファイルを監視し、変更時に再コンパイルをトリガします。
+
+```
+"watch": "tsc -w"
+```
diff --git a/apple-touch-icon.png b/apple-touch-icon.png
diff --git a/index.html b/index.html
@@ -18,12 +18,24 @@
       name="keywords"
       content="御魚,お魚,魚,謎,なぞ,カタカナ,かたかな,クイズ,マリンワールド,サメ,さめ,鮫"
     />
+    <link rel="apple-touch-icon" href="./apple-touch-icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>御魚 なぞの カタカナ</title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
+    <!-- PWA -->
+    <script>
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => {
+          navigator.serviceWorker
+            .register('./serviceWorker.js')
+            .then((reg) => console.log('サービスワーカーの登録成功', reg.scope))
+            .catch((err) => console.log('サービスワーカーの登録失敗', err))
+        })
+      }
+    </script>
   </body>
 </html>
diff --git a/offline.html b/offline.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>たてツイート</title>
+    <style type="text/css">
+      body {
+        display: flex;
+        flex-direction: column;
+        background: #00aff9;
+        height: 100vh;
+        margin: 0;
+        color: white;
+      }
+      h1 {
+        margin: 0.8em 3rem;
+        font: 4em Roboto;
+      }
+      p {
+        margin: 0.2em 3rem;
+        font: 2em Roboto;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      <h1>おっと!!!</h1>
+      <p>このページはオフラインでは表示できません。</p>
+      <p><a href="../index.html">ホームページに戻る </a></p>
+    </div>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -19,7 +19,8 @@
     "framer-motion": "^7.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.3.0",
+    "web-vitals": "^3.1.0"
   },
   "devDependencies": {
     "@azure/static-web-apps-cli": "1.0.2",
@@ -33,7 +34,8 @@
     "eslint-plugin-react": "7.30.1",
     "prettier": "2.7.1",
     "typescript": "4.7.4",
-    "vite": "3.0.5"
+    "vite": "3.1.0-beta.1",
+    "vite-plugin-pwa": "^0.13.3"
   },
   "engines": {
     "node": "16.x"

diff --git a/serviceWorker.js b/serviceWorker.js
@@ -0,0 +1,42 @@
+/**
+ * index.html の script タグで参照しているファイル
+ */
+const CACHE_NAME = 'version-1'
+const urlsToCache = ['index.html', 'offline.html']
+
+// Install SW
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      console.log('Opened cache')
+      return cache.addAll(urlsToCache)
+    })
+  )
+})
+
+// Listen for requests
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request).then(() => {
+      return fetch(event.request).catch(() => caches.match('offline.html'))
+    })
+  )
+})
+
+// Activate the SW
+self.addEventListener('activate', (event) => {
+  const casheWhitelist = []
+  casheWhitelist.push(CACHE_NAME)
+
+  event.waitUntil(
+    caches.keys().then((casheNames) =>
+      Promise.all(
+        casheNames.map((casheName) => {
+          if (!casheWhitelist.includes(casheName)) {
+            return casheWhitelist.delete(casheName)
+          }
+        })
+      )
+    )
+  )
+})
diff --git a/src/main.tsx b/src/main.tsx
@@ -5,6 +5,7 @@ import { MemoryRouter as Router, Routes, Route } from 'react-router-dom'
 import { FishesProvider } from '@/contexts/FishesContext'
 import { Box, ChakraProvider } from '@chakra-ui/react'
 import seaImage from '~/sea.jpg'
+import { registerSW } from 'virtual:pwa-register'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
@@ -27,3 +28,6 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     </ChakraProvider>
   </React.StrictMode>
 )
+
+// サービスワーカーを登録
+registerSW()
diff --git a/tsconfig.json b/tsconfig.json
@@ -22,6 +22,7 @@
       "~/*": ["./static/*"]
     }
   },
-  "include": ["src"],
+  // "include": ["src"],
+  "include": ["./src", "node_modules/vite-plugin-pwa/client.d.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,3 +1,4 @@
+import { VitePWA } from 'vite-plugin-pwa'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
@@ -16,6 +17,53 @@ export default defineConfig({
         plugins: ['@emotion/babel-plugin'],
       },
     }),
+    VitePWA({
+      includeAssets: [
+        'offline.html',
+        'favicon.svg',
+        'favicon.ico',
+        'robots.txt',
+        'apple-touch-icon.png',
+      ],
+      manifest: {
+        theme_color: '#ffffff',
+        background_color: '#4a90e2',
+        display: 'standalone',
+        scope: '/',
+        start_url: '/',
+        short_name: 'おなか',
+        description: 'どりーさんが遊ぶためのクイズアプリ',
+        name: '御魚 なぞの カタカナ',
+        icons: [
+          {
+            src: '/apple-touch-icon.png',
+            sizes: '192x192',
+            type: 'image/png',
+          },
+          {
+            src: '/icon-256x256.png',
+            sizes: '256x256',
+            type: 'image/png',
+          },
+          {
+            src: '/icon-384x384.png',
+            sizes: '384x384',
+            type: 'image/png',
+          },
+          {
+            src: '/icon-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+          },
+          {
+            src: '/icon-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'any maskable',
+          },
+        ],
+      },
+    }),
   ],
   esbuild: {
     logOverride: { 'this-is-undefined-in-esm': 'silent' },
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,4 +22,3 @@ dist-ssr @@
     *.njsproj
     *.sln
     *.sw?
-    .node-version