PWA基礎_1

45d01c5df7a87588fe3fff1a138681f3?s=47 gyarasu
November 13, 2018

 PWA基礎_1

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

45d01c5df7a87588fe3fff1a138681f3?s=128

gyarasu

November 13, 2018
Tweet

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