PWA基礎_1

- PWAとは
- App Shell Model
に関してまとめてあります。

Transcript

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