PWA基礎_1

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