ã¿ãªãããããã«ã¡ã¯ãéçºæ¬éšã®ãšã³ãžãã¢ã®èéã§ããå
æ¥ã瀟å
å匷äŒãTechLunchãã§ Badging API ã«ã€ããŠçºè¡šããã®ã§ããã®å
容ã玹ä»ãããŠããã ããŸãã Badging API ãšã¯ Badging API ãšã¯ããã€ãã£ãã¢ããªã®ã¢ããªã¢ã€ã³ã³äžã«è¡šç€ºããããããžãšåæ§ã«ããŠã§ãã¢ããªã®ã¢ã€ã³ã³äžã«ãããžã衚瀺ããããšãã§ãã Web API ã§ãã ãã€ãã£ãã¢ããªã§å¯èœãªããšå
šãŠããŠã§ãã¢ããªã§ãå¯èœã«ããããšãç®æãã Fugu ãšãããããžã§ã¯ãã§å®çŸã«åããŠåããŠãã API ã® 1 ã€ã§ãChrome 73 ãã Origin Trials ãšããŠå©çšå¯èœã«ãªã£ãŠããŸããOrigin Trials ãšã¯ã詊éšçã«ç¹å®ã®éçºè
ã«éå®ã㊠API ãå©çšã§ããããã«ããä»çµã¿ã®ããšã§ãæ£åŒãªãªãŒã¹åã« API ã«å¯Ÿããæçšãªãã£ãŒãããã¯ãåãåãããšãã§ãããã®ã§ãã ãã® API ã®ææ°ã®æŠèŠã仿§ã«ã€ããŠã¯ã WICG ã Github ã« Badging API ã®ãªããžã㪠ãçšæããŠããã®ã§ãããã§ç¢ºèªããããšãã§ããŸãã WICGïŒThe Web Incubator Community GroupïŒã¯ãå
é²çãªãŠã§ãæè¡ã«ã€ããŠæ€èšããã³ãã¥ããã£ã°ã«ãŒãã§ãW3C ã®ã°ã«ãŒãã® 1 ã€ã§ãã ææ¡ãããŠãã API ã®ã€ã³ã¿ãŒãã§ãŒã¹ã¯ãçŸæç¹(2019/08/14)ã§ã¯ä»¥äžã®ããã«ãªã£ãŠããŸãã badging/explainer.md at main · w3c/badging Badging API. Contribute to w3c/badging development by creating an account on GitHub. github.com Badge ã window ãªããžã§ã¯ãã®ã¡ã³ããšããŠæã€ Badge ã«ã¯ 2 ã€ã®ã¡ãœãããååšãã Badge.set() Badge.clear() Badge.set(5) ã®ããã« set() ã«æŽæ°ãæž¡ããŠãããžäžã«æ°åã衚瀺ãã åã« Badge.set() ã§åŒã³åºããšãã©ã°ãšããŠãããžã衚瀺ãã Badge.set(5, { scope: â/bazâ }) ã®ããã«ãªãã·ã§ã³ãæž¡ããŠç¹å®ã®ã¹ã³ãŒãé
äžã§è¡šç€ºãããããã«æå®ã§ãã ãªãã·ã§ã³ã§ã¹ã³ãŒããæå®ãããŠãªãå Žåãã¹ã³ãŒã㯠/ ã«ãªã ããŒã«ã«ç°å¢ã§è©Šã å®éã«ã©ã®ãããªåœ¢ã§ãããžã衚瀺ã§ãããã確èªããããã«ãä»åã¯ããŒã«ã«ç°å¢ïŒmacOS 10.14ãChrome76ïŒã§è©ŠããŠã¿ãŸããã API èªäœã¯éåžžã«ã·ã³ãã«ãªã®ã§ãPWA ã®ã¢ããªãçšæããŠã€ã³ã¹ããŒã«ããã ãã§ç°¡åã«è©Šãããšãã§ããŸãã ã€ã³ã¹ããŒã«ãããŠããªããŠã§ãã¢ããªã§ããã¿ãã® favicon äžãããã¯ããŒã¯ã¢ã€ã³ã³äžã«ãããžã衚瀺ããããšãè°è«ãããŠããããã§ãããä»ã®ãšããã€ã³ã¹ããŒã«æžã¿ã®ãŠã§ãã¢ããªã§ãããããžã¯è¡šç€ºãããŸããã æåã« API ãå©çšå¯èœãªç¶æ
ã«ããå¿
èŠããããŸãããäžè¿°ã®éã API èªäœãçŸåš Origin Trials ã®æ®µéãªã®ã§ãOrigin Trials ã®å©çšç³è«ãè¡ããããŒã«ã«ç°å¢ã§ããã° chrome://flags ã§å®éšçãªæ©èœãæå¹ã«ããïŒ#enable-experimental-web-platform-featuresïŒãã®ãããããè¡ãå¿
èŠããããŸãã ä»åã¯ããŒã«ã«ç°å¢ã§è©Šãã ããªã®ã§ãchrome://flags ãã enable-experimental-web-platform-features ãæå¹ã«ããŠãããŸãã å®éšçãªæ©èœãå©çšå¯èœã«ããããšã§ Badging API èªäœã¯å©çšå¯èœã«ãªããŸããã window.Badge ãšããŠå©çšå¯èœã«ãªã£ãŠããã®ã§ã¯ãªããOrigin Trials ã®æ®µéã§ã¯ Badge ã§ã¯ãªã ExperimentalBadge ãšããŠæäŸãããŠããŸãã æ¬¡ã«ããµã³ãã«ã®ãããžã§ã¯ããçšæã㊠webpack-dev-server ã§ããŒã«ã«ãµãŒããçšæããŸãã $ yarn init $ yarn add --dev webpack webpack-cli webpack-dev-server html-webpack-plugin copy-webpack-plugin webpack-dev-server ã§ããŒã«ã«ãµãŒããèŠããç¶æ
ã«ãªãããã« webpack.config.js ã«èšå®ãèšè¿°ããŸãã const path = require ( "path" ); const HtmlWwebpackPlugin = require ( "html-webpack-plugin" ); module . exports = { mode: "development" , devServer: { https: true , }, entry: { app: [ "./src/js/app.js" ], }, output: { path: path . resolve ( __dirname , "./dist" ), }, plugins: [ new HtmlWwebpackPlugin ({ template: "src/index.html" , }), ], }; 次㫠manifest.json ãçšæããŸããmanifest.json ã¯ããã®ã¢ããªãã©ããã£ããã®ãããŸããã€ã³ã¹ããŒã«ããæã«ã©ã®ããã«æ¯ãèããããã©ãŠã¶ã«äŒããããã®èšå®ãã¡ã€ã«ã«ãªããŸãã https://app-manifest.firebaseapp.com/ ã®ãããªãµãŒãã¹ã§ manifest.json ãšã¢ã€ã³ã³ãåçš®ãµã€ãºèªåçæã§ããã®ã§ãä»åã¯ãã®ãµãŒãã¹ã§çæããŸãã {   "name" : "badging-api-playground" ,   "short_name" : "badge" ,   "theme_color" : "#5B5CFD" ,   "background_color" : "#5B5CFD" ,   "display" : "standalone" ,   "orientation" : "portrait" ,   "prefer_related_applications" : false ,   "Scope" : "/" ,   "start_url" : "/" ,   "icons" : [     {       "src" : "images/icons/icon-72x72.png" ,       "sizes" : "72x72" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-96x96.png" ,       "sizes" : "96x96" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-128x128.png" ,       "sizes" : "128x128" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-144x144.png" ,       "sizes" : "144x144" ,       "type" : "image/png"     },     âŠ.   ],   "splash_pages" : null } webpack.config.js ã®æ¹ã« manifest.json ãããŒã«ã«ãµãŒãã§é
ä¿¡ãããããã«èšå®ã远å ããŠãããŸãã const path = require('path') const HtmlWwebpackPlugin = require('html-webpack-plugin') + const CopyPlugin = require('copy-webpack-plugin') module.exports = {   âŠ.   plugins: [     âŠ. +   new CopyPlugin([ +    { +     from: 'src/manifest.json', +     to: '', +    }, +    { +     from: 'src/images/icons', +     to: 'images/icons/' +    }, +   ]),   ], } ãããŸã§ã§ Chrome ã® Application ã¿ããã manifest.json ãèªèããããŠãããšã確èªã§ããŸãããã€ã³ã¹ããŒã«å¯èœãªç¶æ
ã«ã¯ãªã£ãŠããŸããã ã¢ããªãã€ã³ã¹ããŒã«å¯èœãªç¶æ
ã«ããã«ã¯ ããã€ãã®åºæº ããããservice worker ãå¿
èŠã«ãªããŸããä»å㯠Workbox ã® webpack ãã©ã°ã€ã³ã§å¯Ÿå¿ããŸãã yarn add --dev workbox-webpack-plugin workbox ã«ã¯ GenerateSW ãš injectManifest ã® 2 ã€ã®ã¢ãŒãããããä»åã¯ã©ã¡ãã§ãåé¡ãªãããšæããŸãã injectManifest ã¢ãŒããå©çšããŸãã const path = require('path') const HtmlWwebpackPlugin = require('html-webpack-plugin') const CopyPlugin = require('copy-webpack-plugin') + const { InjectManifest } = require('workbox-webpack-plugin') module.exports = {   âŠ.   plugins: [     âŠ. +   new InjectManifest({ +    swSrc: path.resolve(__dirname, 'src/sw.js'), +   }),   ], } app.js ã®æ¹ã§ service worker ã®ç»é²ããããããã«èšè¿°ããŠãããŸãã if ( "serviceWorker" in navigator ) { window . addEventListener ( "load" , () => { navigator . serviceWorker . register ( "./sw.js" ) . then (( res ) => { console . log ( res ); }) . catch (( err ) => { console . error ( err ); }); }); } service worker ã®å¯Ÿå¿ãæžããšã€ã³ã¹ããŒã«å¯èœãªã¢ããªã®åºæºãæºããã®ã§ãChrome76 ã§ã¯ã¢ãã¬ã¹ããŒã«ãªã ãããã¯ã¹ã衚瀺ãããããããã€ã³ã¹ããŒã«ãå¯èœã«ãªã£ãŠããŸãã ã€ã³ã¹ããŒã«ãããš Launchpad ã«ã¢ããªã¢ã€ã³ã³ã衚瀺ãããã®ã§ãå®éã« Badge API ã詊ããŠã¿ãŸãã window.ExperimentalBadge.set() ãåŒã³åºããšããã©ã°ãšããŠãããžãã€ããŸãã window.ExperimentalBadge.set(1) ã®ããã«åŒæ°ã«æ°å€ãå
¥ããŠåŒã³åºããšããããžã¯æ°åãå
¥ã£ãç¶æ
ã§è¡šç€ºãããŸãã window.ExperimentalBadge.clear() ã§ãããžãã¯ãªã¢ãããå
ã®ã¢ããªã¢ã€ã³ã³ã ãã®ç¶æ
ã«æ»ããŸãã éåžžã«ç°¡åã§ã¯ãããŸããããã®ããã«ããŠãŠã§ãã¢ããªã®ã¢ã€ã³ã³ã«ãããžãã€ããããããšã確èªã§ããŸããã ãªãããã®ãµã³ãã«ãããžã§ã¯ã㯠https://github.com/makotot/badging-api-playground ã«ãããŠãããŸãã ãŸãšã è¿ãå°æ¥æ£åŒãªãªãŒã¹ãããå¯èœæ§ãé«ã API ã詊ãããšã§ãä»åŸãŠã§ãã¢ããªã§ã©ã®ãããªããšãå®çŸå¯èœã«ãªã£ãŠãããã®äžç«¯ãå£éèŠãããšãã§ããŸããã API èªäœã Origin Trial ã®æ®µéã§ããã©ãŠã¶ã®ã¿ãã® favicon äžãããã¯ããŒã¯ã¢ã€ã³ã³äžã«è¡šç€ºãããã±ãŒã¹ã§ãã£ããããããžã¯ã©ããŸã§ã®ç¯å²ã§é©çšããã¹ããã®ã¹ã³ãŒãã®åé¡ã§ãã£ãããæçµçã«ã©ã®ãããªåœ¢ã«ä»æ§ãæŽçãããããŸã æç¢ºã§ã¯ãªãéšåããããŸãã æçµçã«ã©ã®ããã«èª²é¡ã解決ãããŠãããæ³šç®ããããšæããŸãã