Tweet
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