Tweet
Tweet

Slide 1

Slide 1 text

UIT INSIDEϦχϡʔΞϧ ͦͯ͠ωΠςΟϒΞϓϦͱ Webͷڥք PWA Night vol. 43 2022.09.21 / @spring-raining

Slide 2

Slide 2 text

ࣗݾ঺հ • HN: spring-raining (͸Δ͞Ί) / Tamada Akihiro • LINEגࣜձࣾ ϑϩϯτΤϯυΤϯδχΞ • UIT INSIDEͷωλΛߟ͑ͨΓ࿩Λͨ͠Γ͍ͯ͠·͢

Slide 3

Slide 3 text

What’s UIT INSIDE? • https://uit-inside.linecorp.com • 2019೥ͷ͸͡Ί͔Β࢝·ͬͨɺLINEͷϑϩϯτΤϯυ૊৫UITʹΑΔ Podcast • WebϑϩϯτΤϯυʹؔ͢Δ࿩୊Λத৺ʹɺݱࡏ·ͰͰྦྷܭ130Τϐ ιʔυΛެ։

Slide 4

Slide 4 text

https://github.com/webmaxru/progressive-web-apps-logo

Slide 5

Slide 5 text

ͱ͜ΖͰPWAͬͯͳΜ͚ͩͬ……ʁ • “ϓϩάϨογϒ΢ΣϒΞϓϦ (Progressive web apps, PWA) ͸ɺ৽͠ ͍΢Σϒ API ͱ఻౷తͳϓϩάϨογϒͳ֦ுઓུΛ࢖༻ͯ͠ɺΫϩ εϓϥοτϑΥʔϜͷ΢ΣϒΞϓϦέʔγϣϯʹωΠςΟϒΞϓϦͱ ಉ༷ͷ࢖͍উखΛ΋ͨΒ͢΢ΣϒΞϓϦͷ͜ͱͰ͢ɻ” https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps

Slide 6

Slide 6 text

UIT INSIDE͸Ҏલ͔ΒPWAʹͳ͍ͬͯͨ • manifest.jsonɺsw.js ઃஔ • ΞΠίϯɺςʔϚΧϥʔͷઃఆ • ଞʹPWAͷͨΊʹ΍Δ͜ͱͱ͸……ʁ

Slide 7

Slide 7 text

ωΠςΟϒΞϓϦͱWebͷڥք

Slide 8

Slide 8 text

ͳΜͱͳ͘WebͬΆ͍ɾΞϓϦͬΆ͍ͱࢥ͏෦෼ • ϨΠΞ΢τɾUI͕ΞϓϦͬΆ͘ͳ͍ • εΫϩʔϧ͕ͳΊΒ͔Ͱͳ͍ͱWebͬΆ͍ • SPAʹͳ͓ͬͯΒͣϖʔδભҠͰಡΈࠐΈ͕ൃੜ͢ΔɾSPAʹͳͬͯ ͍ͯ΋ϖʔδભҠ͕มͩͱWebͬΆ͍

Slide 9

Slide 9 text

ʮͳΜͱͳ͘WebͬΆ͍ʯ෦෼Λ ແ͍ͯ͘͘͠

Slide 10

Slide 10 text

MediaSession API

Slide 11

Slide 11 text

ϝσΟΞϓϨΠϠʔͷͨΊͷAPI • ಈը΍Ի੠ͷ࠶ੜ΍Ұ࣌ఀࢭΛίϯτϩʔϧͰ͖ΔɺUIT INSIDEͷͨ Ίʹ͋Δ͔ͷΑ͏ͳAPI

Slide 12

Slide 12 text

ϒϥ΢βɾOSͷϝσΟΞ௨஌ͱ࿈ܞ • MediaSession APIʹ͸MediaMetadata (λΠτϧɾΞʔςΟετͳͲ) ΋ઃఆ Ͱ͖Δ • @potato4d͕2022೥3݄ࠒʹରԠ

Slide 13

Slide 13 text

PodcastͷԻ੠ॻ͖ى͜͠

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

ॻ͖ى͜͠ͷৄࡉ • CLOVA NoteΛ࢖ͬͯॻ͖ى͜͞ΕͨςΩετΛදࣔͯ͠ɺ࠶ੜҐஔ ʹ௥ैͤ͞Δ • PWAͱ͸ؔ܎ͳ͍͚ͲɺΑΓଟ͘ͷ؀ڥͰࢹௌ͢Δͱ͍͏໨త͸ୡ ੒Ͱ͖ͨͷ͔΋……ʁ • ΞΫηγϏϦςΟతͳҙຯͰ΋ྑ͘ͳͬͨ͸ͣ https://clovanote.line.me/

Slide 16

Slide 16 text

PWAతͳ஫໨఺ • PC/SPͳͲʹͱΒΘΕͳ͍ɺ σόΠεͷେ͖͞ʹదͨ͠ ϨΠΞ΢τ

Slide 17

Slide 17 text

μʔΫϞʔυରԠ

Slide 18

Slide 18 text

୺຤ͷઃఆʹԠͨ͡μʔΫϞʔυ • ஍ຯ͚ͩͲ࣮֬ʹΞϓϦͬΆ͞Λग़ͤΔ෦෼

Slide 19

Slide 19 text

μʔΫϞʔυͷ๨Ε͕ͪͳઃఆ • μʔΫϞʔυ࣌͸جຊtheme-color΋ม͑ͨ΄͏͕ྑͦ͞͏

Slide 20

Slide 20 text

ΑΓϢʔβʔʹ༏͍͠μʔΫςʔϚ • μʔΫςʔϚͰ͸৭Λ൓సͤ͞Δ͚ͩͰͳ͘ɺͦͷޙͷௐ੔͕ॏཁ

Slide 21

Slide 21 text

·ͱΊ • ࠷௿ݶͷରԠ͕͋Ε͹PWAͱͯ͠͸੒Γཱ͚ͭͲɺ͔ͦ͜Βઌͷ ʮΞϓϦΒ͠͞ʯͷͨΊͷվળ͕PWAͷຊ࣭ • Ͳ͏͢Ε͹ΞϓϦΒ͘͠ͳΔ͔ʁ ͸ΞϓϦͷཁ݅࣍ୈ ͍ͭ΋৺ʹPWA