{"id":13235,"date":"2024-05-18T01:07:12","date_gmt":"2024-05-17T17:07:12","guid":{"rendered":"https:\/\/blog.hoyo.idv.tw\/?p=13235"},"modified":"2024-10-29T09:29:18","modified_gmt":"2024-10-29T01:29:18","slug":"pwa-%e6%bc%b8%e9%80%b2%e5%bc%8f%e7%b6%b2%e8%b7%af%e6%87%89%e7%94%a8%e7%a8%8b%e5%bc%8f-1-%e5%ae%89%e8%a3%9d","status":"publish","type":"post","link":"https:\/\/blog.hoyo.idv.tw\/?p=13235","title":{"rendered":"PWA \u6f38\u9032\u5f0f\u7db2\u8def\u61c9\u7528\u7a0b\u5f0f - 1. \u52a0\u5230\u4e3b\u756b\u9762\u3001\u5b89\u88dd"},"content":{"rendered":"<p>--<\/p>\n<h2>\u524d\u8a00<\/h2>\n<p>\u4e00\u76f4\u5c0b\u627e iPhone \u4e0a\u7db2\u9801\u5982\u4f55\u5168\u87a2\u5e55\uff0c\u5f8c\u4f86\u627e\u5230 &lt;meta name=\"apple-mobile-web-app-capable\" content=\"yes\"&gt; \u9019\u884c\u7db2\u9801\u5ba3\u544a\uff0c\u7136\u5f8c\u624d\u958b\u59cb\u8a8d\u8b58\u9019\u500b\u5df2\u7d93\u63a8\u51fa\u597d\u5e7e\u5e74\u7684\u6280\u8853\u3002<\/p>\n<p>PWA \u662f\u4e00\u500b\u5f88\u5927\u7684\u8b70\u984c\uff0c\u5148\u5f9e\u300c\u65b9\u4fbf\u52a0\u5165\u4e3b\u756b\u9762\u300d\u7684\u300c\u5b89\u88dd\u300d\u8aaa\u8d77<\/p>\n<p>--<\/p>\n<h2>\u53c3\u8003\u8cc7\u6e90<\/h2>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/zh-TW\/docs\/Web\/Progressive_web_apps\" target=\"_blank\" rel=\"noopener\">\u6f38\u9032\u5f0f\u7db2\u8def\u61c9\u7528\u7a0b\u5f0f | MDN (mozilla.org)<\/a><\/li>\n<li><a href=\"https:\/\/jonny-huang.github.io\/angular\/training\/19_pwa\/\" target=\"_blank\" rel=\"noopener\">PWA \u507d\u88dd\u8853\uff1amanifest.json | Jonny Huang \u7684\u5b78\u7fd2\u7b46\u8a18 (jonny-huang.github.io)<\/a><\/li>\n<li><a href=\"https:\/\/www.letswrite.tw\/pwa-manifest\/\" target=\"_blank\" rel=\"noopener\">\u4f7f\u7528 Manifest \u5275\u5efa\u4f60\u7684 PWA - \u57fa\u790e Progressive Web App \u6559\u5b78 - PWA - Let's Write (letswrite.tw)<\/a><\/li>\n<li><a href=\"https:\/\/timtnlee.me\/post\/pwa-intro\/\" target=\"_blank\" rel=\"noopener\">PWA - Progressive Web App \u76f8\u95dc\u6280\u8853\u4ecb\u7d39 | \u7121\u804a\u804aBlog (timtnlee.me)<\/a><\/li>\n<\/ul>\n<p>--<\/p>\n<h2>\u5de5\u5177<\/h2>\n<p>\u7dda\u4e0a\u6aa2\u67e5 manifest \u6b63\u78ba\u6027<\/p>\n<ul>\n<li><a href=\"https:\/\/www.pwabuilder.com\/\" target=\"_blank\" rel=\"noopener\">Home \/ PWABuilder<\/a><\/li>\n<li><a href=\"https:\/\/www.pwabuilder.com\/reportcard?site=https:\/\/game.hoyo.idv.tw\" target=\"_blank\" rel=\"noopener\">Report Card \/ PWABuilder<\/a><\/li>\n<\/ul>\n<p>--<\/p>\n<h2>\u53ef\u5b89\u88dd<\/h2>\n<p>\u70ba\u4e86\u8981\u8b93\u7db2\u9801\u53ef\u4ee5\u7b26\u5408\u5b89\u88dd\u9700\u8981<\/p>\n<ol>\n<li>\u7db2\u5740\u5fc5\u9808\u662f https:\/\/<\/li>\n<li>\u7db2\u9801\u589e\u52a0 &lt;link rel=\"manifest\" href=\"manifest.json\" \/&gt; \u5ba3\u544a<\/li>\n<li>manifest.json \u5fc5\u9808\u6b63\u78ba\u8a2d\u5b9a\uff0c\u7f3a\u5c11\u4e0d\u884c\uff0c\u591a\u9918\u4e5f\u4e5f\u4e0d\u884c\uff0c\u5982\u679c\u6c92\u6709 App \u6284 Hoyo \u7684\u8a2d\u5b9a\u5373\u53ef<\/li>\n<\/ol>\n<p>PWA_Test.html<\/p>\n<pre class=\"lang:default decode:true\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"zh-TW\"&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=\"UTF-8\"&gt;\r\n    &lt;title&gt;PWA \u6e2c\u9a57&lt;\/title&gt;\r\n    &lt;link rel=\"manifest\" href=\"\/manifest.json\" \/&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>manifest.json<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Manifest\/start_url\" target=\"_blank\" rel=\"noopener\">start_url - Web app manifests | MDN<\/a><\/li>\n<\/ul>\n<pre class=\"lang:default decode:true \">{\r\n  \"id\": \"\/\",\r\n  \"name\": \"Hoyo \u904a\u6232\u5e73\u53f0\",\r\n  \"short_name\": \"Hoyo\",\r\n  \"start_url\": \"\/\",\r\n  \"background_color\": \"white\",\r\n  \"display\": \"standalone\",\r\n  \"orientation\": \"portrait\",\r\n  \"theme_color\": \"#ffffff\",\r\n  \"icons\": [\r\n    {\r\n      \"src\": \"\/img\/game.hoyo.idv.tw.logo-180.png\",\r\n      \"sizes\": \"192x192\",\r\n      \"type\": \"image\/png\"\r\n    },\r\n    {\r\n      \"src\": \"\/img\/game.hoyo.idv.tw.logo-180.png\",\r\n      \"sizes\": \"512x512\",\r\n      \"type\": \"image\/png\"\r\n    }\r\n  ]\r\n}<\/pre>\n<p>\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u4e0d\u9700\u8981\u7684\u8a2d\u5b9a\u5c31\u4e0d\u8981\u586b\u5beb\uff0c\u6709\u7591\u554f\u53ef\u4ee5\u770b\u4e00\u4e0b\u9019\u500b\u7db2\u9801\uff1a<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Attributes\/rel\/manifest\" target=\"_blank\" rel=\"noopener\">rel=manifest - HTML: HyperText Markup Language | MDN (mozilla.org)<\/a><\/p>\n<p>Chrome \u986f\u793a\u5b89\u88dd<\/p>\n<p><a href=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/20240517_002.png\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" class=\"alignnone wp-image-13252 size-large\" src=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/20240517_002-1024x329.png\" alt=\"\" width=\"640\" height=\"206\" srcset=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/20240517_002-1024x329.png 1024w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/20240517_002-300x96.png 300w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/20240517_002-768x247.png 768w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/20240517_002.png 1114w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>Android \u986f\u793a\u5b89\u88dd<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-13253\" src=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/PWA_Android.webp\" alt=\"\" width=\"400\" height=\"546\" srcset=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/PWA_Android.webp 400w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/PWA_Android-220x300.webp 220w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/p>\n<p>\u52a0\u5165\u4e3b\u756b\u9762 \u2192 \u5b89\u88dd<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-13429\" src=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/pwa_install2.png\" alt=\"\" width=\"340\" height=\"200\" srcset=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/pwa_install2.png 340w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/pwa_install2-300x176.png 300w\" sizes=\"(max-width: 340px) 100vw, 340px\" \/><\/p>\n<p>--<\/p>\n<h2>\u9664\u932f<\/h2>\n<p>\u4f7f\u7528 Google Chrome \u6216 Edge \u700f\u89bd\u5668 F12 \u53ef\u4ee5\u9032\u884c\u6aa2\u67e5\u3001\u9664\u932f<\/p>\n<p><a href=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/manifest_F12_debug.png\" data-rel=\"lightbox-image-1\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" class=\"alignnone size-large wp-image-13260\" src=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/manifest_F12_debug-1024x602.png\" alt=\"\" width=\"640\" height=\"376\" srcset=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/manifest_F12_debug-1024x602.png 1024w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/manifest_F12_debug-300x176.png 300w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/manifest_F12_debug-768x452.png 768w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/manifest_F12_debug.png 1355w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>--<\/p>\n<h2>\u91cd\u65b0\u5b89\u88dd<\/h2>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Progressive_web_apps\/How_to\/Trigger_install_prompt\" target=\"_blank\" rel=\"noopener\">Trigger installation from your PWA - Progressive web apps | MDN (mozilla.org)<\/a><\/li>\n<\/ul>\n<pre class=\"lang:default decode:true\">&lt;button id=\"install\" hidden&gt;Install&lt;\/button&gt;\r\n\r\n&lt;script&gt;\r\n    let installPrompt = null;\r\n    const installButton = document.querySelector(\"#install\");\r\n\r\n    window.addEventListener(\"beforeinstallprompt\", (event) =&gt; {\r\n        event.preventDefault();\r\n        installPrompt = event;\r\n        installButton.removeAttribute(\"hidden\");\r\n    });\r\n\r\n    installButton.addEventListener(\"click\", async () =&gt; {\r\n        if (!installPrompt) {\r\n            return;\r\n        }\r\n        const result = await installPrompt.prompt();\r\n        console.log(`Install prompt was: ${result.outcome}`);\r\n        disableInAppInstallPrompt();\r\n    });\r\n\r\n    function disableInAppInstallPrompt() {\r\n        installPrompt = null;\r\n        installButton.setAttribute(\"hidden\", \"\");\r\n    }\r\n\r\n    window.addEventListener(\"appinstalled\", () =&gt; {\r\n        disableInAppInstallPrompt();\r\n    });\r\n&lt;\/script&gt;<\/pre>\n<p>--<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"13235\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> &nbsp;2,347&nbsp;total views, &nbsp;2&nbsp;views today<\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>-- \u524d\u8a00 \u4e00\u76f4\u5c0b\u627e iPho...<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"13235\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> &nbsp;2,347&nbsp;total views, &nbsp;2&nbsp;views today<\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[262],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/13235"}],"collection":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13235"}],"version-history":[{"count":19,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/13235\/revisions"}],"predecessor-version":[{"id":13591,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/13235\/revisions\/13591"}],"wp:attachment":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=13235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=13235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}