Merge pull request #83 from sohnjunior/feature/pwa

PWA 를 적용합니다.
sohnjunior · Jun 28, 2023 · a7c259f · a7c259f · vercel · Jun 28, 2023
2 parents 324ab5c + afea925
commit a7c259f
Show file tree

Hide file tree

Showing 24 changed files with 182 additions and 2 deletions.
diff --git a/client/public/assets/icons/apple-icon.png b/client/public/assets/icons/apple-icon.png
diff --git a/client/public/assets/icons/icon192.png b/client/public/assets/icons/icon192.png
diff --git a/client/public/assets/icons/icon512.png b/client/public/assets/icons/icon512.png
diff --git a/client/public/assets/splash/10.2__iPad_portrait.png b/client/public/assets/splash/10.2__iPad_portrait.png
diff --git a/client/public/assets/splash/10.5__iPad_Air_portrait.png b/client/public/assets/splash/10.5__iPad_Air_portrait.png
diff --git a/client/public/assets/splash/10.9__iPad_Air_portrait.png b/client/public/assets/splash/10.9__iPad_Air_portrait.png
diff --git a/client/public/assets/splash/11__iPad_Pro__10.5__iPad_Pro_portrait.png b/client/public/assets/splash/11__iPad_Pro__10.5__iPad_Pro_portrait.png
diff --git a/client/public/assets/splash/12.9__iPad_Pro_portrait.png b/client/public/assets/splash/12.9__iPad_Pro_portrait.png
diff --git a/...ic/assets/splash/4__iPhone_SE__iPod_touch_5th_generation_and_later_portrait.png b/...ic/assets/splash/4__iPhone_SE__iPod_touch_5th_generation_and_later_portrait.png
diff --git a/client/public/assets/splash/8.3__iPad_Mini_portrait.png b/client/public/assets/splash/8.3__iPad_Mini_portrait.png
diff --git a/...ets/splash/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_portrait.png b/...ets/splash/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_portrait.png
diff --git a/client/public/assets/splash/iPhone_11_Pro_Max__iPhone_XS_Max_portrait.png b/client/public/assets/splash/iPhone_11_Pro_Max__iPhone_XS_Max_portrait.png
diff --git a/client/public/assets/splash/iPhone_11__iPhone_XR_portrait.png b/client/public/assets/splash/iPhone_11__iPhone_XR_portrait.png
diff --git a/...iPhone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_portrait.png b/...iPhone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_portrait.png
diff --git a/...assets/splash/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_portrait.png b/...assets/splash/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_portrait.png
diff --git a/client/public/assets/splash/iPhone_14_Pro_Max_portrait.png b/client/public/assets/splash/iPhone_14_Pro_Max_portrait.png
diff --git a/client/public/assets/splash/iPhone_14_Pro_portrait.png b/client/public/assets/splash/iPhone_14_Pro_portrait.png
diff --git a/...lash/iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_portrait.png b/...lash/iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_portrait.png
diff --git a/...splash/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_portrait.png b/...splash/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_portrait.png
diff --git a/...ets/splash/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_portrait.png b/...ets/splash/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_portrait.png
diff --git a/client/public/index.html b/client/public/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="kr">
   <head>
+    <title>editty</title>
     <meta charset="utf-8" />
     <meta
       name="viewport"
@@ -10,7 +11,101 @@
       name="description"
       content="sketch your idea with lightweight vanilla progressive web app"
     />
-    <title>editty</title>
+    <meta name="theme-color" content="#f8f8f8" />
+    <meta name="apple-mobile-web-app-title" content="editty" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <link rel="apple-touch-icon" href="assets/icons/apple-icon.png" />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="assets/splash/iPhone_14_Pro_Max_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="assets/splash/iPhone_14_Pro_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="assets/splash/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="assets/splash/iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="assets/splash/iPhone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="assets/splash/iPhone_11_Pro_Max__iPhone_XS_Max_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="assets/splash/iPhone_11__iPhone_XR_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="assets/splash/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="assets/splash/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="assets/splash/4__iPhone_SE__iPod_touch_5th_generation_and_later_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="assets/splash/12.9__iPad_Pro_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="assets/splash/11__iPad_Pro__10.5__iPad_Pro_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="assets/splash/10.9__iPad_Air_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="assets/splash/10.5__iPad_Air_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="assets/splash/10.2__iPad_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="assets/splash/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="assets/splash/8.3__iPad_Mini_portrait.png"
+    />
+    <link rel="manifest" href="manifest.json" />
+    <script>
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('sw.js')
+      }
+    </script>
   </head>
   <body>
     <div id="app"></div>

diff --git a/client/public/manifest.json b/client/public/manifest.json
@@ -0,0 +1,23 @@
+{
+  "short_name": "editty",
+  "name": "editty",
+  "description": "sketch your idea with vanilla web app",
+  "icons": [
+    {
+      "src": "assets/icons/icon192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "assets/icons/icon512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#fafafa",
+  "theme_color": "#f8f8f8"
+}
diff --git a/client/public/sw.js b/client/public/sw.js
@@ -0,0 +1,56 @@
+const CACHE_VERSION = 'editty-cache-v2'
+
+const ICON_PATH = '/assets/images'
+const ICON_CACHE = [
+  'cursor',
+  'draw',
+  'text',
+  'back-arrow',
+  'forward-arrow',
+  'search',
+  'erase',
+  'emoji',
+  'trash',
+  'gallery',
+  'folder',
+  'disk',
+  'success',
+  'fail',
+  'add-circle',
+  'close-circle',
+  'download',
+].map((icon) => `${ICON_PATH}/${icon}.svg`)
+const PAGE_CACHE = ['./index.html', './manifest.json']
+
+self.addEventListener('install', (ev) => {
+  ev.waitUntil(
+    (async () => {
+      const cache = await caches.open(CACHE_VERSION)
+      return cache.addAll([...ICON_CACHE, ...PAGE_CACHE])
+    })()
+  )
+})
+
+self.addEventListener('fetch', (ev) => {
+  if (ev.request.method !== 'GET') {
+    return
+  }
+
+  ev.respondWith(
+    (async () => {
+      const cache = await caches.open(CACHE_VERSION)
+
+      let resource = null
+
+      try {
+        const response = await fetch(ev.request)
+        cache.put(ev.request, response.clone())
+        resource = response
+      } catch {
+        resource = await cache.match(ev.request)
+      }
+
+      return resource
+    })()
+  )
+})
diff --git a/client/webpack.prod.js b/client/webpack.prod.js
@@ -7,7 +7,13 @@ module.exports = merge(common, {
   plugins: [
     ...common.plugins,
     new CopyPlugin({
-      patterns: [{ from: 'public/assets/images', to: 'assets/images' }],
+      patterns: [
+        { from: 'public/assets/images', to: 'assets/images' },
+        { from: 'public/assets/icons', to: 'assets/icons' },
+        { from: 'public/assets/splash', to: 'assets/splash' },
+        { from: 'public/sw.js', to: 'sw.js' },
+        { from: 'public/manifest.json', to: 'manifest.json' },
+      ],
     }),
   ],
 })