{"id":13230,"date":"2024-05-21T10:09:09","date_gmt":"2024-05-21T02:09:09","guid":{"rendered":"https:\/\/blog.hoyo.idv.tw\/?p=13230"},"modified":"2024-06-04T15:41:01","modified_gmt":"2024-06-04T07:41:01","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-2-%e7%b6%b2%e9%a0%81%e9%80%9a%e7%9f%a5","status":"publish","type":"post","link":"https:\/\/blog.hoyo.idv.tw\/?p=13230","title":{"rendered":"PWA \u6f38\u9032\u5f0f\u7db2\u8def\u61c9\u7528\u7a0b\u5f0f - 3. \u684c\u9762\u7248\u700f\u89bd\u7db2\u9801\u901a\u77e5"},"content":{"rendered":"<p>--<\/p>\n<p>\u4ee5\u4e0b\u4e0d\u9069\u7528\u884c\u52d5\u624b\u6a5f\u7248<\/p>\n<p>--<\/p>\n<h2>\u524d\u8a00<\/h2>\n<p>\u8981\u4f7f\u7528 PWA Service workers \u7684\u901a\u77e5\u63a8\u64ad\uff0c\u4e5f\u662f\u8981\u5148\u4e86\u89e3\u53ca\u8a2d\u5b9a\u57fa\u672c\u7684\u901a\u77e5\uff0c\u4ee5\u4e0b\u6e2c\u8a66\u904b\u4f5c\u5728 Windows \u4e0a\uff0c\u624b\u6a5f\u4e0a\u57fa\u672c\u4e0a\u4e0d\u652f\u63f4\uff0c\u8acb\u53c3\u8003 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Notification\/Notification\" target=\"_blank\" rel=\"noopener\">Notification: Notification() constructor<\/a><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-13270\" src=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/2024-05-21-10-08-40.png\" alt=\"\" width=\"786\" height=\"315\" srcset=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/2024-05-21-10-08-40.png 786w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/2024-05-21-10-08-40-300x120.png 300w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/2024-05-21-10-08-40-768x308.png 768w\" sizes=\"(max-width: 786px) 100vw, 786px\" \/><\/p>\n<p>--<\/p>\n<h2>\u53c3\u8003\u8cc7\u6e90<\/h2>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Notification\" target=\"_blank\" rel=\"noopener\">Notification - Web APIs | MDN (mozilla.org)<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Notification\/requestPermission_static\" target=\"_blank\" rel=\"noopener\">Notification: requestPermission() static method - Web APIs | MDN (mozilla.org)<\/a><\/li>\n<li><a href=\"https:\/\/ithelp.ithome.com.tw\/articles\/10196736\" target=\"_blank\" rel=\"noopener\">Day25-Notification API\u8a2d\u5b9a\u4ecb\u7d39 - iT \u90a6\u5e6b\u5fd9::\u4e00\u8d77\u5e6b\u5fd9\u89e3\u6c7a\u96e3\u984c\uff0c\u62ef\u6551 IT \u4eba\u7684\u4e00\u5929 (ithome.com.tw)<\/a><\/li>\n<\/ul>\n<p>--<\/p>\n<h2>\u53d6\u5f97\u63a8\u64ad\u901a\u77e5\u6388\u6b0a<\/h2>\n<p>\u901a\u77e5\u6388\u6b0a\u6b0a\u9650\u5fc5\u9808\u624b\u52d5\u89f8\u767c\uff0c\u89f8\u767c\u5f8c\u518d\u9078\u64c7\u300c\u5141\u8a31\u300d\u624d\u5b8c\u6210\u6388\u6b0a\u52d5\u4f5c\u3002<\/p>\n<pre class=\"lang:js decode:true\">&lt;button type=\"button\" onclick=\"requestPermission()\"&gt;\u8a02\u95b1\u901a\u77e5&lt;\/button&gt;\r\n&lt;script&gt;\r\n    function requestPermission(){\r\n        Notification.requestPermission().then((permission) =&gt; {\r\n            console.log('permission');\r\n        });\r\n    }\r\n&lt;\/script&gt;<\/pre>\n<p>\u4efb\u4f55\u5728\u672a\u6388\u6b0a\u5c31\u57f7\u884c\u7684\u63a8\u64ad\u52d5\u4f5c\u5c07\u88ab\u700f\u89bd\u5668\u76f4\u63a5\u62d2\u7d55\u63a8\u64ad\u6b0a\u9650\uff0c\u5305\u542b\u7db2\u9801\u8f09\u5165\u5c31\u8a62\u554f\u6388\u6b0a<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-13265 size-full\" src=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/2024-05-20-10-39-37.png\" alt=\"\" width=\"342\" height=\"180\" srcset=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/2024-05-20-10-39-37.png 342w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/2024-05-20-10-39-37-300x158.png 300w\" sizes=\"(max-width: 342px) 100vw, 342px\" \/><\/p>\n<p>--<\/p>\n<h2>\u63a8\u64ad\u8a0a\u606f<\/h2>\n<p>\u53d6\u5f97\u6388\u6b0a\u5f8c\u5c31\u53ef\u4ee5\u986f\u793a\u63a8\u64ad\u8a0a\u606f<\/p>\n<pre class=\"lang:default decode:true\">&lt;button type=\"button\" onclick=\"send()\"&gt;\u767c\u9001\u901a\u77e5&lt;\/button&gt;\r\n&lt;button type=\"button\" onclick=\"send2()\"&gt;\u767c\u9001\u901a\u77e52&lt;\/button&gt;\r\n&lt;script&gt;\r\n    function send(){\r\n        new Notification(\"\u63a8\u9001\u6a19\u984c\");\r\n    }\r\n\r\n    function send2(){\r\n        let options = {\r\n            body: 'body',\r\n            icon: 'https:\/\/www.flaticon.com\/download\/icon\/3408506?icon_id=3408506&amp;author=171&amp;team=171&amp;keyword=Video+games&amp;pack=3408425&amp;style=Gradient&amp;style_id=1289&amp;format=png&amp;color=%23000000&amp;colored=2&amp;size=64&amp;selection=1&amp;type=standard&amp;search=game',\r\n            image: 'https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcTkMsGKT2GNXUeLh_9_5upVPUdaQZgNtRuxg7dH9UDLzQ&amp;s',\r\n            badge: 'https:\/\/png.pngtree.com\/png-clipart\/20190604\/original\/pngtree-badge-png-image_996483.jpg',\r\n        }\r\n        new Notification(\"\u63a8\u9001\u6a19\u984c\", options);\r\n    }\r\n&lt;\/script&gt;<\/pre>\n<p>\u6210\u529f\u6703\u5728\u756b\u9762\u53f3\u4e0b\u89d2\u51fa\u73fe\u63a8\u64ad\u8a0a\u606f<\/p>\n<p>--<\/p>\n<h2>options \u8aaa\u660e<\/h2>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-13268\" src=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/Notification_help.png\" alt=\"\" width=\"478\" height=\"321\" srcset=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/Notification_help.png 478w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/Notification_help-300x201.png 300w\" sizes=\"(max-width: 478px) 100vw, 478px\" \/><\/p>\n<p>--<\/p>\n<h2>\u700f\u89bd\u5668\u3001\u7cfb\u7d71\u8a2d\u5b9a<\/h2>\n<p><strong>Windows 11<\/strong><\/p>\n<p>\u958b\u555f\u901a\u77e5<\/p>\n<p>\u8a2d\u5b9a \u2192 \u7cfb\u7d71 \u2192 \u901a\u77e5<\/p>\n<p><a href=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/2024-05-16-14-33-36.png\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" class=\"alignnone wp-image-13231 size-large\" src=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/2024-05-16-14-33-36-1024x554.png\" alt=\"\" width=\"640\" height=\"346\" srcset=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/2024-05-16-14-33-36-1024x554.png 1024w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/2024-05-16-14-33-36-300x162.png 300w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/2024-05-16-14-33-36-768x415.png 768w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2024\/05\/2024-05-16-14-33-36.png 1134w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>--<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"13230\" 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;1,759&nbsp;total views, &nbsp;4&nbsp;views today<\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>-- \u4ee5\u4e0b\u4e0d\u9069\u7528\u884c\u52d5\u624b\u6a5f\u7248 -...<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"13230\" 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;1,759&nbsp;total views, &nbsp;4&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":[31],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/13230"}],"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=13230"}],"version-history":[{"count":13,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/13230\/revisions"}],"predecessor-version":[{"id":13297,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/13230\/revisions\/13297"}],"wp:attachment":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=13230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=13230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}