Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PWAのサンプルアプリを作ってみた

 PWAのサンプルアプリを作ってみた

ServiceWorkerや各種APIの基本的なユースケースは周知されてきたPWAですが、それらを組み合わせて具体的にそんな実装パターンがあるかについては未だに不透明に感じられます。
今回はLaravel/Vue.jsでPWAのサンプルアプリを作った時の知見を元に、どんなことを考え、どんな実装パターンにしたかを語りました。

Satoshi Kawashima

December 06, 2017
Tweet

More Decks by Satoshi Kawashima

Other Decks in Technology

Transcript

  1. ྆ऀͷൺֱ ϞόΠϧ8FC ωΠςΟϒΞϓϦ ΦϑϥΠϯಈ࡞ ෆՄ Մೳ ϓογϡ௨஌ ෆՄ Մೳ ىಈ·Ͱεςοϓ

    ଟ͍ʢϒοΫϚʔΫొ࿥Ͱ؇࿨Ͱ͖Δʣ গͳ͍ʢϗʔϜը໘͔Βىಈʣ 69 ѱ͍ʢKBWBTDSJQU౳Ͱ؇࿨Ͱ͖Δʣ ྑ͍ Πϯετʔϧ ෆཁ ඞਢ ݕࡧੑ ߴ͍ ௿͍ ։ൃίετ ௿͍ ߴ͍ ϦϦʔείετ ௿͍ ߴ͍
  2. 8FC"QQ.BOJGFTU { "short_name": "PWA TEST", "name": "PWA TEST(Vue.js/OnsenUI)", "icons": [

    { "src": "/images/launcher-icon-1x.png", "type": "image/png", "sizes": "128x128" }, { "src": "/images/launcher-icon-2x.png", "type": "image/png", "sizes": "256x256" }, { "src": "/images/launcher-icon-4x.png", "type": "image/png", "sizes": "512x512" } ], "start_url": "/app", "background_color": "#FFFFFF", "theme_color": "#FFFFFF", "display": "standalone" } ϗʔϜը໘ʹදࣔ͞ΕΔΞϓϦ໊ ىಈ࣌ʹΞΫηε͢Δ63- ϗʔϜը໘ʹදࣔ͞ΕΔΞΠίϯ ϒϥ΢βͷදࣔϞʔυ
  3. هࣄͷϓϦϑΣον { 4: {id: 4, title: 'title', body: 'body'}, 5:

    {id: 5, title: 'title', body: 'body'}, 6: {id: 6, title: 'title', body: 'body'} } ᶄ ᶃ ᶅ 4FSWJDF8PSLFSͷΩϟογϡΛ ͞Βʹ+4্Ͱ΋อ࣋