Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
PWAೖߨ࠲ Part1 ʔ PWAͷجૅᶃ ʔ
Slide 2
Slide 2 text
࣍ ▹ PWAͱʁ ▹ PWAͷಛ ▹ App ShellϞσϧ 2
Slide 3
Slide 3 text
PWAͱʁ
Slide 4
Slide 4 text
“ ωΠςΟϒΞϓϦͷΑ͏ͳ UXΛ࣮ݱ͢ΔWEBΞϓϦ 4
Slide 5
Slide 5 text
PWAͱʁ ▹ ৴པੑ ▹ ωοτϫʔΫঢ়ଶʹΑΒͣଈ࠲ʹϩʔυ ▹ ߴ ▹ ϢʔβΠϯλϥΫγϣϯʹૉૣ͘Ԡ ▹ Τϯήʔδϝϯτ ▹ ωΠςΟϒΞϓϦͷΑ͏ʹ࠶དྷ๚Λଅਐ 5
Slide 6
Slide 6 text
PWAͷಛ
Slide 7
Slide 7 text
PWAͷಛ ▹ ΦϑϥΠϯͰಈ࡞ ▹ ϓογϡ௨ΛૹΔ͜ͱ͕Ͱ͖Δ ▹ ϗʔϜը໘ʹΞΠίϯΛՃͰ͖Δ ▹ શը໘ද͕ࣔՄೳ ▹ Πϯετʔϧෆཁ ▹ ݕࡧΤϯδϯʹώοτ͢Δ ▹ ϦϯΫՄೳ ▹ HTTPSͰಈ࡞ 7
Slide 8
Slide 8 text
WEBΞϓϦͷಛ ▹ ΦϑϥΠϯͰಈ࡞ ▹ ϓογϡ௨ΛૹΔ͜ͱ͕Ͱ͖Δ ▹ ϗʔϜը໘ʹΞΠίϯΛՃͰ͖Δ ▹ શը໘ද͕ࣔՄೳ ▹ Πϯετʔϧෆཁ ▹ ݕࡧΤϯδϯʹώοτ͢Δ ▹ ϦϯΫՄೳ ▹ ʢHTTPSͰಈ࡞ʣ 8
Slide 9
Slide 9 text
ωΠςΟϒΞϓϦͷಛ ▹ ΦϑϥΠϯͰಈ࡞ ▹ ϓογϡ௨ΛૹΔ͜ͱ͕Ͱ͖Δ ▹ ϗʔϜը໘ʹΞΠίϯΛՃͰ͖Δ ▹ શը໘ද͕ࣔՄೳ ▹ Πϯετʔϧෆཁ ▹ ݕࡧΤϯδϯʹώοτ͢Δ ▹ ϦϯΫՄೳ ▹ ʢHTTPSͰಈ࡞ʣ 9
Slide 10
Slide 10 text
PWA≒WEBΞϓϦ×ωΠςΟϒΞϓϦ 10
Slide 11
Slide 11 text
App ShellϞσϧ
Slide 12
Slide 12 text
App ShellϞσϧ ▹ ֓ཁ ▹ UI͕ػೳ͢ΔͨΊʹඞཁͳ࠷খݶͷHTML/CSS/ Javascript ▹ ΦϑϥΠϯͰ༻Ͱ͖ΔΑ͏ʹΩϟογϡ͓ͯ͘͠ ▹ ඞཁͳίϯςϯπͷΈɺωοτϫʔΫ͔ΒಡΈࠐ·ΕΔ ▹ UIͷࠎΈʢσʔλؚ·ͳ͍ʣ ▹ SPAʢSingle Page ApplicationʣͰ ༻͞Ε͍ͯΔϞσϧ 12
Slide 13
Slide 13 text
App ShellϞσϧ 13 ʲApp Shellʳ • πʔϧόʔʢϔομʣ • φϏήʔγϣϯόʔʢϑολʣ ʲσʔλʳ • ίϯςϯπ ࣸਅɺURLɺςΩετɺetc.
Slide 14
Slide 14 text
App Shell+Service Worker ▹ App ShellΛ࠷ॳͷಡΈࠐΈͰΩϟ ογϡɻҎޙΩϟογϡ͔Βͷߴ ͳಡΈࠐΈɻ ▹ UI͕ॠ࣌ʹදࣔ͞ΕɺωΠςΟϒΞ ϓϦͷΑ͏ͳ༻ײɻ ▹ ඞཁͳσʔλΛඞཁͳ࣌ʹऔಘɾΩ ϟογϡɻ 14
Slide 15
Slide 15 text
͓͞Β͍ ▹ PWAͱʁ ▹ ωΠςΟϒΞϓϦͷΑ͏ͳUXΛ࣮ݱ͢ΔWEBΞ ϓϦ ▹ PWAͷಛ ▹ ΦϑϥΠϯͰ͑ͯɺಡΈࠐΈ͕ߴͰɺϓ ογϡ௨ૹΕΔ ▹ App ShellϞσϧ ▹ UIͷࠎ֨ΛΩϟογϡ͠ɺίϯςϯπඞཁͳ λΠϛϯάͰωοτϫʔΫܦ༝Ͱऔಘ 15
Slide 16
Slide 16 text
END