{"id":283,"date":"2025-12-31T14:30:00","date_gmt":"2025-12-31T05:30:00","guid":{"rendered":"https:\/\/hed-g.me\/?p=283"},"modified":"2025-11-25T14:47:58","modified_gmt":"2025-11-25T05:47:58","slug":"pwa-%eb%b0%b0%ed%8f%ac%ec%99%80-%ec%a7%84%eb%8b%a8-%ea%b7%b8%eb%a6%ac%ea%b3%a0-%ed%95%9c%ea%b3%84","status":"publish","type":"post","link":"https:\/\/hed-g.me\/?p=283","title":{"rendered":"PWA \ubc30\ud3ec\uc640 \uc9c4\ub2e8, \uadf8\ub9ac\uace0 \ud55c\uacc4"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">HTTPS, PWA\uc758 \ucd9c\ubc1c\uc120<\/h2>\n\n\n\n<p>PWA\ub294 <strong>HTTPS \ud658\uacbd\uc5d0\uc11c\ub9cc \ub3d9\uc791\ud55c\ub2e4.<\/strong><\/p>\n\n\n\n<p>Service Worker\uac00 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc744 \uac00\ub85c\ucc44\ub294 \uad6c\uc870\uc774\uae30 \ub54c\ubb38\uc5d0,<\/p>\n\n\n\n<p>\ubcf4\uc548\ub418\uc9c0 \uc54a\uc740 \uc5f0\uacb0(HTTP)\uc5d0\uc11c\ub294 \uc774\ub97c \ucc28\ub2e8\ud55c\ub2e4.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\ub2e8\uc21c\ud55c \ubcf4\uc548\uc774 \uc544\ub2c8\ub77c \uc2e0\ub8b0 \uccb4\uc778\uc758 \uc2dc\uc791<\/h3>\n\n\n\n<p>\uc55e\uc11c Service Worker\uac00 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc744 \uac00\ub85c\ucc44\ub294 \uad6c\uc870\ub77c\uace0 \uc5b8\uae09\ud588\ub2e4.<\/p>\n\n\n\n<p>\uc989 \uc774\ub97c \ud1b5\ud574 \ubcf4\uc548\uc744 \uc804\uc81c\ub85c \uc131\ub9bd\ud558\uc9c0 \uc54a\uc73c\uba74, \uc545\uc131 \uc2a4\ud06c\ub9bd\ud2b8\uac00 \uc911\uac04\uc5d0\uc11c \ub370\uc774\ud130\ub97c \ubcc0\uc870\ud558\uae30\uc5d0<\/p>\n\n\n\n<p>\ub9e4\uc6b0 \uc88b\ub2e4\ub294 \uc704\ud5d8\uc131\uc744 \ub0b4\ud3ec\ud55c\ub2e4\ub294 \uac83\uc744 \uc54c \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p>\ub530\ub77c\uc11c, <strong>HTTPS \ud658\uacbd\uc740 PWA\uc5d0\uc11c \ub9e4\uc6b0 \uae30\ubcf8\uc801 \uc804\uc81c \uc870\uac74\uc73c\ub85c \uc131\ub9bd\ud55c\ub2e4.<\/strong><\/p>\n\n\n\n<p>(\uc560\ucd08\uc5d0 \ube0c\ub77c\uc6b0\uc800\ub294 HTTPS \ud658\uacbd\uc774 \uc544\ub2c8\ub77c\uba74 PWA\ub97c \ub4f1\ub85d\uc870\ucc28 \ud558\uc9c0 \uc54a\ub294\ub2e4)<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\uc2e4\ubb34\uc5d0\uc11c\uc758 HTTPS \uc774\uc288<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\ub0b4\ubd80\ub9dd(\uc0ac\ub0b4\ub9dd) \uac1c\ubc1c \ud658\uacbd<\/li>\n<\/ol>\n\n\n\n<p>\uc0ac\uc124 \uc778\uc99d\uc11c(Self-signed Certificate)\ub97c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0, Chrome\uc740 \uae30\ubcf8\uc801\uc73c\ub85c<\/p>\n\n\n\n<p>Service Worker \ub4f1\ub85d\uc744 \ucc28\ub2e8\ud55c\ub2e4.<\/p>\n\n\n\n<p>\u2192 chrome:\/\/flags\/#allow-insecure-localhost \uc635\uc158\uc744 \uc784\uc2dc \ud5c8\uc6a9\ud558\uac70\ub098, mkcert \/ local CA \uae30\ubc18 \uac1c\ubc1c \uc778\uc99d\uc11c \uc0ac\uc6a9<\/p>\n\n\n\n<p>2. \uba40\ud2f0 \ub3c4\uba54\uc778 \ud658\uacbd<\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<p>Service Worker\uc758 scope\ub294 \ub3c4\uba54\uc778 \ub2e8\uc704\ub85c \ubb36\uc778\ub2e4.<\/p>\n\n\n\n<p>\ub9ac\uc18c\uc2a4\ub97c \ub2e4\ub978 \uc11c\ube0c\ub3c4\uba54\uc778\uc5d0\uc11c \uce90\uc2f1\ud558\ub824\uba74 <strong>CORS + HTTPS \ub3d9\uc77c \uc815\ucc45 \ud544\uc218.<\/strong><\/p>\n\n\n\n<p>\u2192 \ub3d9\uc77c origin \uc815\ucc45\uc744 \uace0\ub824\ud558\uc5ec serviceWorker.register(\u2019\/sw.js\u2019, { scope: \u2018\/\u2019 }) \uad6c\uc131 \uc870\uc815.<\/p>\n\n\n\n<p>3. SSL \uac31\uc2e0 \uc790\ub3d9\ud654 \uc774\uc288<\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<p>HTTPS \uc778\uc99d\uc11c\uac00 \ub9cc\ub8cc\ub418\uba74 PWA\ub294 <strong>\uc989\uc2dc installable \uc790\uaca9\uc744 \uc0c1\uc2e4<\/strong>\ud55c\ub2e4.<\/p>\n\n\n\n<p>(\ube0c\ub77c\uc6b0\uc800\uac00 \uc2e0\ub8b0\ud560 \uc218 \uc5c6\ub294 \ucee8\ud14d\uc2a4\ud2b8\ub85c \ud310\ub2e8\ud55c\ub2e4.)<\/p>\n\n\n\n<p>\ub530\ub77c\uc11c CI\/CD \ud30c\uc774\ud504\ub77c\uc778\uc5d0\uc11c certbot renew \ub610\ub294 Cloudflare API \uae30\ubc18<\/p>\n\n\n\n<p>SSL \uc790\ub3d9 \uac31\uc2e0 \uc2a4\ud06c\ub9bd\ud2b8 \ud3ec\ud568 \ud544\uc694.<\/p>\n\n\n\n<p>4. Mixed Content \ucc28\ub2e8<\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<p>HTTPS \ud398\uc774\uc9c0 \ub0b4\uc5d0\uc11c HTTP \uc790\uc6d0\uc744 \uc694\uccad\ud558\uba74 Service Worker\ub294 \uc815\uc0c1 \uc791\ub3d9\ud558\uc9c0 \uc54a\ub294\ub2e4.<\/p>\n\n\n\n<p>\ud574\ub2f9 \uc694\uccad\uc740 <strong>\ub124\ud2b8\uc6cc\ud06c \uce90\uc2dc\uc5d0\ub3c4 \ub4f1\ub85d\ub418\uc9c0 \uc54a\ub294\ub2e4.<\/strong><\/p>\n\n\n\n<p><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">PWA \ud488\uc9c8 \uc9c4\ub2e8<\/h2>\n\n\n\n<p>Chrome DevTools\uc758 Lighthouse\ub294 PWA \ud488\uc9c8\uc744 \uc790\ub3d9\uc73c\ub85c \ubd84\uc11d\ud574\uc900\ub2e4.<\/p>\n\n\n\n<p>\ud3c9\uac00 \ud56d\ubaa9\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">PWA \ud488\uc9c8 \ud3c9\uac00 \ud56d\ubaa9<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Installable: HTTPS, Manifest, Service Worker \ub4f1 \uc124\uce58 \uc870\uac74 \ucda9\uc871 \uc5ec\ubd80<\/li>\n\n\n\n<li>Performance: LCP, FID, CLS \ub4f1 \ud575\uc2ec \uc131\ub2a5 \uc9c0\ud45c<\/li>\n\n\n\n<li>Best Practices: \ubcf4\uc548 \ubc0f \uc811\uadfc\uc131 \uac80\uc99d<\/li>\n\n\n\n<li>Accessibility: \uc2dc\uac01\uc801, \ud0a4\ubcf4\ub4dc \uc811\uadfc\uc131 \ud14c\uc2a4\ud2b8<\/li>\n\n\n\n<li>SEO: \uac80\uc0c9\uc5d4\uc9c4 \uba54\ud0c0 \uad6c\uc131 \ud655\uc778<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">PWA \ud488\uc9c8 \uc9c4\ub2e8 \uc2e4\ud589<\/h3>\n\n\n\n<p>[DevTools] &#8211; [Lighthouse \ud0ed] &#8211; [Progressive Web App] \uc120\ud0dd,<\/p>\n\n\n\n<p>\uacb0\uacfc \ub9ac\ud3ec\ud2b8\uc5d0\uc11c Installable \uacfc Offline ready \ud56d\ubaa9\uc774 \ubaa8\ub450 \ucd08\ub85d\uc0c9\uc774\uba74 OK<\/p>\n\n\n\n<p>*\uace0\ud488\uc9c8\uc758 PWA<\/p>\n\n\n\n<p>\uc624\ud504\ub77c\uc778 \ub300\uc751 + HTTPS + Manifest + \ube60\ub978 \ub85c\ub529 + \uc811\uadfc\uc131 \ud655\ubcf4<br><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uce90\uc2dc \ubc84\uc804 \uad00\ub9ac<\/h2>\n\n\n\n<p>PWA\uc758 \uac00\uc7a5 \ud070 \ud568\uc815\uc740 <strong>\uce90\uc2dc \uac31\uc2e0\uc774 \ub290\ub9ac\ub2e4<\/strong>\ub294 \uac83,<\/p>\n\n\n\n<p>Service Worker\ub294 \uc548\uc815\uc131\uc744 \uc704\ud574 \uc790\ub3d9\uc73c\ub85c \uc0c8 \ubc84\uc804\uc744 \uc989\uc2dc \ud65c\uc131\ud654\ud558\uc9c0 \uc54a\ub294\ub2e4.<\/p>\n\n\n\n<p>\uc774\ub85c \uc778\ud574 \uc0ac\uc6a9\uc790\uac00 \uc774\uc804 \uce90\uc2dc\ub97c \uc5ec\uc804\ud788 \ubcf4\uace0 \uc788\uc744 \uac00\ub2a5\uc131\uc774 \uc874\uc7ac\ud558\uace0,<\/p>\n\n\n\n<p>\uc0c8\ub85c\uc6b4 \ucf54\ub4dc\uac00 \ubc30\ud3ec\ub418\uc5b4\ub3c4 \uc989\uc2dc \ubc18\uc601\ub418\uc9c0 \uc54a\uac8c \ub41c\ub2e4.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\ud574\uacb0\ud558\ub824\uba74<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\uce90\uc2dc \ubc84\uc804 + \uc5c5\ub370\uc774\ud2b8 \uc54c\ub9bc<\/li>\n\n\n\n<li>\ud074\ub77c\uc774\uc5b8\ud2b8 \uce21\uc5d0\uc11c \uc0c8 \ubc84\uc804 \uac10\uc9c0 \uc2dc \uc54c\ub9bc \ub744\uc6b0\uae30<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uc624\ud504\ub77c\uc778 \ud14c\uc2a4\ud2b8<\/h2>\n\n\n\n<p>PWA \ubc30\ud3ec\uac00 \ub05d\ub098\uba74 \uc624\ud504\ub77c\uc778 \uc2dc\ub098\ub9ac\uc624 \ud14c\uc2a4\ud2b8 \uc9c4\ud589\uc774 \ud544\uc694\ud558\ub2e4.<\/p>\n\n\n\n<p>Chrome DevTools \u2192 [Application] \u2192 [Service Workers] \u2192 Offline \uccb4\ud06c \u2192 \uc0c8\ub85c\uace0\uce68<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>\uc774 \uacfc\uc815\uc5d0\uc11c \uce90\uc2dc\ub41c \ucf58\ud150\uce20\uac00 \ubcf4\uc774\uba74 \uc815\uc0c1 \uc791\ub3d9\uc774\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ucd94\uac00\ub85c \uc810\uac80\ud574\uc57c \ud560 \uc0ac\ud56d\n<ul class=\"wp-block-list\">\n<li>\uc0c8\ub85c\uace0\uce68 \uc2dc \uce90\uc2dc\ub41c \ubc84\uc804\uc774 \uc989\uc2dc \ub728\ub294\uac00?<\/li>\n\n\n\n<li>fetch \uc2e4\ud328 \uc2dc fallback \ud398\uc774\uc9c0(offline.html)\ub85c \uc804\ud658\ub418\ub294\uac00?<\/li>\n\n\n\n<li>Service Worker\uac00 \uc5c5\ub370\uc774\ud2b8\ub420 \ub54c \uc0c8 \ubc84\uc804 \uc801\uc6a9\uc774 \uc815\uc0c1\uc778\uac00?<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">PWA\uc758 \ud55c\uacc4<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\uc5ec\uc804\ud788 \uc81c\ud55c\uc801\uc778 PWA<\/h3>\n\n\n\n<p>\ube0c\ub77c\uc6b0\uc800\ubcc4\ub85c Service Worker\uc758 \uc5c5\ub370\uc774\ud2b8 \uc2dc\uc810\uc774 \ubd88\uade0\uc77c\ud558\uace0, \uce90\uc2dc \uad00\ub9ac \ubcf5\uc7a1\ub3c4 \ubc0f \ub124\ud2b8\uc6cc\ud06c \ub3d9\uae30\ud654 \uc9c0\uc5f0 \uc774\uc288\ub85c \ud604\uc7ac\uae4c\uc9c0\ub294 \uc544\uc9c1 PWA\uc5d0\uc11c \ud55c\uacc4\uac00 \ubcf4\uc778\ub2e4. \ub610\ud55c, iOS\uc5d0\uc11c PWA\uc5d0 \ub300\ud55c \uc9c0\uc6d0\uc744 \uc81c\uc57d\ud558\uae30 \ub54c\ubb38\uc5d0 PWA\ub294 \uc644\uc131\ub41c \uae30\uc220\uc774 \uc544\ub2cc \uc9c4\ud654 \uacfc\uc815\uc758 \uc77c\ubd80 \ub2e8\uacc4\ub85c \ubcf4\uc778\ub2e4.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">iOS\uc5d0\uc11c\uc758 PWA \uc81c\uc57d<\/h3>\n\n\n\n<p>iOS(Safari)\uc758 PWA \uc9c0\uc6d0\uc740 \uc5ec\uc804\ud788 \uc81c\uc57d\uc801\uc774\uace0 Apple\uc740 \ubcf4\uc548 \ubc0f \ubc30\ud130\ub9ac \uc774\uc288\ub97c \uc774\uc720\ub85c \uc77c\ubd80 \uae30\ub2a5\uc744 \ub9c9\uace0 \uc788\ub2e4.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\uae30\ub2a5<\/th><th>\uc9c0\uc6d0 \uc5ec\ubd80<\/th><th>\ube44\uace0<\/th><\/tr><\/thead><tbody><tr><td>Push Notification<\/td><td>iOS 16.4+<\/td><td>\uc81c\ud55c\uc801 \uc9c0\uc6d0, \uc720\uc800 \uc2b9\uc778 \ud544\uc694<\/td><\/tr><tr><td>Background Sync<\/td><td>X<\/td><td>\ubd88\uac00\ub2a5<\/td><\/tr><tr><td>Storage(Cache Size)<\/td><td>\uc57d 50MB \ud55c\ub3c4<\/td><td>\uc790\ub3d9 \uc0ad\uc81c \uac00\ub2a5\uc131 \uc788\uc74c<\/td><\/tr><tr><td>Install Prompt<\/td><td>X (\uc790\ub3d9 \ubc30\ub108 \uc5c6\uc74c)<\/td><td>\ud648 \ud654\uba74\uc5d0 \ucd94\uac00 \uc218\ub3d9 \uc720\ub3c4<\/td><\/tr><tr><td>Web Bluetooth \/ USB<\/td><td>X<\/td><td>\ubbf8\uc9c0\uc6d0 API \ub2e4\uc218<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTTPS, PWA\uc758 \ucd9c\ubc1c\uc120 PWA\ub294 HTTPS \ud658\uacbd\uc5d0\uc11c\ub9cc \ub3d9\uc791\ud55c\ub2e4. Service Worker\uac00 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc744 \uac00\ub85c\ucc44\ub294 \uad6c\uc870\uc774\uae30 \ub54c\ubb38\uc5d0, \ubcf4\uc548\ub418\uc9c0 \uc54a\uc740 \uc5f0\uacb0(HTTP)\uc5d0\uc11c\ub294 \uc774\ub97c \ucc28\ub2e8\ud55c\ub2e4. \ub2e8\uc21c\ud55c \ubcf4\uc548\uc774 \uc544\ub2c8\ub77c \uc2e0\ub8b0 \uccb4\uc778\uc758 \uc2dc\uc791 \uc55e\uc11c Service Worker\uac00 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc744 \uac00\ub85c\ucc44\ub294 \uad6c\uc870\ub77c\uace0 \uc5b8\uae09\ud588\ub2e4. \uc989 \uc774\ub97c \ud1b5\ud574 \ubcf4\uc548\uc744 \uc804\uc81c\ub85c \uc131\ub9bd\ud558\uc9c0 \uc54a\uc73c\uba74, \uc545\uc131 \uc2a4\ud06c\ub9bd\ud2b8\uac00 \uc911\uac04\uc5d0\uc11c \ub370\uc774\ud130\ub97c \ubcc0\uc870\ud558\uae30\uc5d0 \ub9e4\uc6b0 \uc88b\ub2e4\ub294 \uc704\ud5d8\uc131\uc744 \ub0b4\ud3ec\ud55c\ub2e4\ub294 \uac83\uc744 \uc54c \uc218 \uc788\ub2e4. \ub530\ub77c\uc11c, HTTPS [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[44],"tags":[162,195,197],"class_list":["post-283","post","type-post","status-publish","format-standard","hentry","category-frontend","tag-https","tag-pwa","tag-service-worker"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=283"}],"version-history":[{"count":1,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/283\/revisions"}],"predecessor-version":[{"id":284,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/283\/revisions\/284"}],"wp:attachment":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}