PWA基礎_1

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

Transcript

1. PWAೖ໳ߨ࠲
   Part1
   ʔ PWAͷجૅᶃ ʔ
   

   View Slide

2. ໨࣍
   ▹  PWAͱ͸ʁ
   ▹  PWAͷಛ௃
   ▹  App ShellϞσϧ
   2
   

   View Slide

3. PWAͱ͸ʁ
   

   View Slide

4. “
   ωΠςΟϒΞϓϦͷΑ͏ͳ
   UXΛ࣮ݱ͢ΔWEBΞϓϦ
   4
   

   View Slide

5. PWAͱ͸ʁ
   ▹  ৴པੑ
   ▹  ωοτϫʔΫঢ়ଶʹΑΒͣଈ࠲ʹϩʔυ
   ▹  ߴ଎
   ▹  ϢʔβΠϯλϥΫγϣϯʹૉૣ͘൓Ԡ
   ▹  Τϯήʔδϝϯτ
   ▹  ωΠςΟϒΞϓϦͷΑ͏ʹ࠶དྷ๚Λଅਐ
   5
   

   View Slide

6. PWAͷಛ௃
   

   View Slide

7. PWAͷಛ௃
   ▹  ΦϑϥΠϯͰ΋ಈ࡞
   ▹  ϓογϡ௨஌ΛૹΔ͜ͱ͕Ͱ͖Δ
   ▹  ϗʔϜը໘ʹΞΠίϯΛ௥ՃͰ͖Δ
   ▹  શը໘ද͕ࣔՄೳ
   ▹  Πϯετʔϧෆཁ
   ▹  ݕࡧΤϯδϯʹώοτ͢Δ
   ▹  ϦϯΫՄೳ
   ▹  HTTPSͰಈ࡞
   7
   

   View Slide

8. WEBΞϓϦͷಛ௃
   ▹  ΦϑϥΠϯͰ΋ಈ࡞
   ▹  ϓογϡ௨஌ΛૹΔ͜ͱ͕Ͱ͖Δ
   ▹  ϗʔϜը໘ʹΞΠίϯΛ௥ՃͰ͖Δ
   ▹  શը໘ද͕ࣔՄೳ
   ▹  Πϯετʔϧෆཁ
   ▹  ݕࡧΤϯδϯʹώοτ͢Δ
   ▹  ϦϯΫՄೳ
   ▹  ʢHTTPSͰಈ࡞ʣ
   8
   

   View Slide

9. ωΠςΟϒΞϓϦͷಛ௃
   ▹  ΦϑϥΠϯͰ΋ಈ࡞
   ▹  ϓογϡ௨஌ΛૹΔ͜ͱ͕Ͱ͖Δ
   ▹  ϗʔϜը໘ʹΞΠίϯΛ௥ՃͰ͖Δ
   ▹  શը໘ද͕ࣔՄೳ
   ▹  Πϯετʔϧෆཁ
   ▹  ݕࡧΤϯδϯʹώοτ͢Δ
   ▹  ϦϯΫՄೳ
   ▹  ʢHTTPSͰಈ࡞ʣ
   9
   

   View Slide

10. PWA≒WEBΞϓϦ×ωΠςΟϒΞϓϦ
    10
    

    View Slide

11. App ShellϞσϧ
    

    View Slide

12. App ShellϞσϧ
    ▹  ֓ཁ
    ▹  UI͕ػೳ͢ΔͨΊʹඞཁͳ࠷খݶͷHTML/CSS/
    Javascript
    ▹  ΦϑϥΠϯͰ࢖༻Ͱ͖ΔΑ͏ʹΩϟογϡ͓ͯ͘͠
    ▹  ඞཁͳίϯςϯπͷΈɺωοτϫʔΫ͔ΒಡΈࠐ·ΕΔ
    ▹  UIͷࠎ૊Έʢσʔλ͸ؚ·ͳ͍ʣ
    ▹  SPAʢSingle Page ApplicationʣͰ
    ࢖༻͞Ε͍ͯΔϞσϧ
    12
    

    View Slide

13. App ShellϞσϧ
    13
    ʲApp Shellʳ
    •  πʔϧόʔʢϔομʣ
    •  φϏήʔγϣϯόʔʢϑολʣ
    ʲσʔλʳ
    •  ίϯςϯπ
    ࣸਅɺURLɺςΩετɺetc.
    

    View Slide

14. App Shell+Service Worker
    ▹  App ShellΛ࠷ॳͷಡΈࠐΈͰΩϟ
    ογϡɻҎޙ͸Ωϟογϡ͔Βͷߴ
    ଎ͳಡΈࠐΈɻ
    ▹  UI͕ॠ࣌ʹදࣔ͞ΕɺωΠςΟϒΞ
    ϓϦͷΑ͏ͳ࢖༻ײɻ
    ▹  ඞཁͳσʔλΛඞཁͳ࣌ʹऔಘɾΩ
    ϟογϡɻ
    14
    

    View Slide

15. ͓͞Β͍
    ▹  PWAͱ͸ʁ
    ▹  ωΠςΟϒΞϓϦͷΑ͏ͳUXΛ࣮ݱ͢ΔWEBΞ
    ϓϦ
    ▹  PWAͷಛ௃
    ▹  ΦϑϥΠϯͰ΋࢖͑ͯɺಡΈࠐΈ͕ߴ଎Ͱɺϓ
    ογϡ௨஌΋ૹΕΔ
    ▹  App ShellϞσϧ
    ▹  UIͷࠎ֨ΛΩϟογϡ͠ɺίϯςϯπ͸ඞཁͳ
    λΠϛϯάͰωοτϫʔΫܦ༝Ͱऔಘ
    15
    

    View Slide

16. END
    

    View Slide