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

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

Transcript

1. ઒ౡܛ(.01FQBCP *OD
   ୈճ1)1ษڧձ
   18"ͷαϯϓϧΞϓϦ
   ࡞ͬͯΈͨ
   

   View Slide

2. ΤϯδχΞ
   ઒ౡܛ!OB[POPIJUP
   4)ࣄۀ෦+6(&.νʔϜ
   IUUQOB[POPIJUPKVHFNKQ
   

   View Slide

3. TDIPP͞ΜͰ-BSBWFMͷतۀ࡞Γ·ͨ͠
   

   View Slide

4. ໨࣍
   w18"ͱ͸
   w18"͕΋ͨΒ͢ϝϦοτ
   w18"ͷݱࡏ
   wαϯϓϧΞϓϦͷσϞ
   wαϯϓϧΞϓϦͷ࣮૷ύλʔϯ
   

   View Slide

5. ࠓ೔࿩͢͜ͱɾ࿩͞ͳ͍͜ͱ
   w࿩͢͜ͱ
   w18"ͷ֓ཁ
   wαϯϓϧΞϓϦΛ࡞ͬͨಘͨ஌ݟ
   w࿩͞ͳ͍͜ͱ
   wϑϩϯτΤϯυٕज़
   

   View Slide

6. 18"ͱ͸
   

   View Slide

7. 18"ͱ͸
   w1SPHSFTTJWF8FC"QQTͷུশ
   w৽͍ٕ͠ज़ʹΑͬͯωΠςΟϒΞϓϦͷΑ͏ͳಈ࡞͕Մೳʹͳͬͨ
   8FCΞϓϦέʔγϣϯ
   

   View Slide

8. 4UBU$PVOUFS %FTLUPQWT.PCJMFWT5BCMFU.BSLFU4IBSF8PSMEXJEF
   IUUQHTTUBUDPVOUFSDPNQMBUGPSN
   NBSLFUTIBSFEFTLUPQNPCJMFUBCMFUXPSMEXJEFNPOUIMZ
   

   View Slide

9. 18"ͷੜ·Εͨഎܠ
   wϞόΠϧ୺຤ͷར༻࣌ؒͷׂ͸ωΠςΟϒΞϓϦʹ࢖ΘΕ͍ͯΔ
   wIUUQXXXOFUSBUJOHTDPKQOFXT@SFMFBTF
   /FXTSFMFBTFIUNM
   ˞͜ͷൃදதͷఆٛ˞
   ϞόΠϧ8FCϞόΠϧ୺຤Ͱϒϥ΢βΛ௨ͨ͠8FCମݧ
   

   View Slide

10. ϞόΠϧ8FCʻωΠςΟϒΞϓϦ
    wΦϑϥΠϯͰಈ࡞్͕੾ΕΔ
    wಈ࡞͕ॏ͘ײ͡Δ
    wϓογϡ௨஌Ͱ͖ͳ͍ʢαʔϏεఏڙ
    ଆࢹ఺ʣ
    

    View Slide

11. ྆ऀͷൺֱ
    ϞόΠϧ8FC ωΠςΟϒΞϓϦ
    ΦϑϥΠϯಈ࡞ ෆՄ Մೳ
    ϓογϡ௨஌ ෆՄ Մೳ
    ىಈ·Ͱεςοϓ ଟ͍ʢϒοΫϚʔΫొ࿥Ͱ؇࿨Ͱ͖Δʣ গͳ͍ʢϗʔϜը໘͔Βىಈʣ
    69 ѱ͍ʢKBWBTDSJQU౳Ͱ؇࿨Ͱ͖Δʣ ྑ͍
    Πϯετʔϧ ෆཁ ඞਢ
    ݕࡧੑ ߴ͍ ௿͍
    ։ൃίετ ௿͍ ߴ͍
    ϦϦʔείετ ௿͍ ߴ͍
    

    View Slide

12. ྆ऀͷ͍͍ͱ͜औΓ
    wΦϑϥΠϯಈ࡞
    wϓογϡ௨஌
    wΠϯετʔϧϨε
    wݕࡧɾϦϯΫՄೳ
    Կ͔
    

    View Slide

13. ྆ऀͷ͍͍ͱ͜औΓ
    wϞόΠϧ8FCΛϕʔεʹɺ৽͍͠ςΫϊϩδʔΛ༻͍࣮ͯݱ͢Δ
    .PCJMF8FC /FX5FDIOPMPHZ
    18"
    

    View Slide

14. 18"ͷॾٕज़
    w4FSWJDF8PSLFS
    w8FC"QQ.BOJGFTU
    w1BZNFOU3FRVFTU"1*
    w"VUPpMM
    w'FUDI"1*
    w$BDIF"1*
    w1VTI"1*
    w#BDLHSPVOE4ZOD"1*
    w(FPMPDBUJPO"1*
    w%FWJDF.PUJPO&WFOU
    w'VMMTDSFFO"1*
    w$SFEFOUJBM.BOBHFNFOU"1*
    

    View Slide

15. 4FSWJDF8PSLFSͷओͳ໾ׂ
    w)551ϦΫΤετͷΠϯλʔηϓτ
    w)551Ϩεϙϯεͷίϯτϩʔϧ
    wϓογϡ௨஌଴ͪड͚
    wόοΫάϥ΢ϯυಉظ
    

    View Slide

16. 4FSWJDF8PSLFS
    ᶃ
    ᶄ
    

    View Slide

17. 4FSWJDF8PSLFS
    ᶃ ᶄ
    ᶅ
    ᶆ
    DMJFOUTJEF
    

    View Slide

18. 4FSWJDF8PSLFS
    ᶃ
    ᶄ
    ᶅ
    165
    DMJFOUTJEF
    

    View Slide

19. 4FSWJDF8PSLFS
    ᶃ
    ᶄ
    ᶅ
    (&5
    DMJFOUTJEF
    

    View Slide

20. 4FSWJDF8PSLFS
    (&5
    DMJFOUTJEF
    +BWBTDSJQUͰ੍ޚ͢Δ
    

    View Slide

21. 4FSWJDF8PSLFS
    ᶃ
    ᶅ
    /FUXPSL'JSTU
    ᶆ
    (&5
    ᶄ
    ᶃ ᶅ
    $BDIF'JSTU
    ᶆ
    (&5
    ᶄ
    165
    ᶇ
    ᶈ
    

    View Slide

22. 4FSWJDF8PSLFS
    ᶄ
    ᶃ
    ϒϥ΢β͕ด͡ΒΕͯ΋ಈ͘
    

    View Slide

23. 4FSWJDF8PSLFS
    ᶃ
    TZODSFHJTUFS
    
    

    View Slide

24. 4FSWJDF8PSLFS
    ᶃ
    TZODFWFOU
    ᶄ
    ᶅ
    ΦϯϥΠϯ෮ؼ࣌ʹ
    ൃੜ͢ΔΠϕϯτ
    

    View Slide

25. 4FSWJDF8PSLFSͷಛ௃
    wෆ҆ఆͳωοτϫʔΫ؀ڥΛٵऩ͢ΔϓϩΩγ
    w௨஌ͷ଴ͪड͚Λߦ͏όοΫάϥ΢ϯυϓϩηε
    wΦϯϥΠϯ࣌ͷδϣϒΛ࣮ߦ͢ΔϫʔΧʔϓϩηε
    

    View Slide

26. 8FC"QQ.BOJGFTU
    w8FCΞϓϦέʔγϣϯͷϗʔϜը໘΁ͷ௥Ճํ๏Λఆٛ͢ΔKTPO
    wΞϓϦέʔγϣϯىಈ࣌ͷΦϓγϣϯ΋ࢦఆͰ͖Δ
    

    View Slide

27. 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-
    ϗʔϜը໘ʹදࣔ͞ΕΔΞΠίϯ
    ϒϥ΢βͷදࣔϞʔυ
    

    View Slide

28. 8FC"QQ.BOJGFTU
    
    ̍
    ̎
    ̏
    ϗʔϜը໘௥Ճϓϩϯϓτ
    ʢϒϥ΢βϝχϡʔ͔Β΋Մʣ
    ϗʔϜը໘ʹΞϓϦͷ௥Ճ
    

    View Slide

29. 8FC"QQ.BOJGFTU
    ̐ ̑ ̒
    ىಈ࣌ͷεϓϥογϡը໘
    ʢΧϥʔ΍ΞΠίϯ͸ࢦఆՄʣ
    ϒϥ΢βϝχϡʔ͕ඇදࣔ
    

    View Slide

30. 18"ͷಛ௃
    wஈ֊త
    wϨεϙϯγϒ
    wωοτϫʔΫ઀ଓʹґଘ͠ͳ͍
    wΞϓϦײ֮
    wৗʹ࠷৽
    ࢀߟIUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTDPEFMBCTZPVSpSTUQXBQQ IMKB
    w҆શ
    wൃݟ͠΍͍͢
    w࠶ΤϯήʔδϝϯτՄೳ
    wΠϯετʔϧՄೳ
    wϦϯΫՄೳ
    

    View Slide

31. ʮ18"ʯͱ͸ϚʔέςΟϯάϫʔυͳͷͰ͢ɻ
    ݫີͳఆٛ͸ಛʹ͋Γ·ͤΜɻ
    1SPHSFTTJWF8FC"QQT3PBETIPX5PLZP2"
    

    View Slide

32. ·ͱΊ
    w18"ͱ͸৽͍ٕ͠ज़ʹΑͬͯҰ࣍ݩ্ͷମݧΛఏڙ͢Δ8FCΞϓϦ
    w8FCͱωΠςΟϒΞϓϦͷ྆໘ͷྑ͞Λ࣋ͪ߹Θ͍ͤͯΔ
    

    View Slide

33. 18"ͷ΋ͨΒ͢ϝϦοτ
    

    View Slide

34. 18"ͷ΋ͨΒ͢ϝϦοτ
    w8FCͷٕज़Ͱ׬݁Ͱ͖Δ
    wҰͭͷίʔυͰ׬݁͢Δ
    wΞϓϦϚʔέοτʹറΒΕͳ͍
    wΞϓϦར༻։࢝·Ͱͷোน͕খ͘͞ͳΔ
    

    View Slide

35. 8FCͷٕज़Ͱ׬݁͢Δ
    ૉࡐIUUQXXXGSFFQJLDPN
    8FC%JSFDUPS
    8FC%FTJHOFS
    8FC&OHJOFFS
    J04&OHJOFFS
    "OESPJE&OHJOFFS
    8FC%JSFDUPS
    8FC%FTJHOFS
    8FC&OHJOFFS
    

    View Slide

36. ҰͭͷίʔυͰ׬݁͢Δ
    

    View Slide

37. ΞϓϦϚʔέοτʹറΒΕͳ͍
    wϦϦʔε͕αʔϏεଆͰ׬શʹίϯτϩʔϧͰ͖Δ
    wόʔδϣϯΞοϓ΍ςετʹର͔͚ͯ͠Δίετ͕গͳ͘ͳΔ
    

    View Slide

38. ΞϓϦར༻։࢝·Ͱͷোน͕খ͘͞ͳΔ
    wΠϯετʔϧϨε
    wσʔλαΠζ΋খ͘͞ͳΔ܏޲͕͋Δ
    

    View Slide

39. 18"ͷݱࡏ
    

    View Slide

40. 4FSWJDF8PSLFSͷ࣮૷ঢ়گ
    IUUQTDBOJVTFDPNGFBUTFSWJDFXPSLFST
    

    View Slide

41. Կނɺࠓ18"ͳͷ͔ʁ
    w8FCLJU͕ΑΓ4FSWJDF8PSLFSͷ࣮૷ʹணखͨ͠
    IUUQTXFCLJUPSHTUBUVT TFBSDITFSWJDFXPSLFS
    ʢJ04ͷϒϥ΢β͸8FCLJUͰ࣮૷͠ͳ͚Ε͹ͳΒͳ੍͍໿͕͋Δʣ
    

    View Slide

42. σϞ
    

    View Slide

43. ߏ੒
    w-BSBWFM
    w7VFKT
    w0OTFO6*
    IUUQTTISPVEFEEVTLIFSPLVBQQDPN
    

    View Slide

44. "QQ4IFMMϞσϧ
    "QQMJDBUJPO4IFMM෦෼ʢ੩తίϯςϯπʣ
    ಈతίϯςϯπ
    18"Λߏங͢ΔΞʔΩςΫνϟɻ
    6*͕ػೳ͢Δ࠷௿ݶͷΞηοτ
    ʢ"QQMJDBUJPO4IFMMʣΛࣄલ
    Ωϟογϡ͢Δɻ
    

    View Slide

45. ϓογϡ௨஌ʹΑΔԾొ࿥
    ϓογϡ௨஌ΛڐՄͯ͠΋Β͏͜
    ͱΛϢʔβԾొ࿥ͱͯ͠ѻ͏ɻ
    ΞϓϦར༻։࢝·Ͱͷεςοϓ਺
    Λগͳ͘͢Δɻ
    

    View Slide

46. ϓογϡ௨஌ڐՄͷࣄલ֬ೝ
    ϓογϡ௨஌ڐՄͷϓϩϯϓτ͸
    Ұ౓ϒϩοΫ͞ΕΔͱೋ౓ͱදࣔ
    ͞Εͳ͘ͳΔɻ
    μϒϧύʔϛογϣϯύλʔϯͰ
    ΑΓ࣮֬ʹڐՄͯ͠΋Β͏ɻ
    ͠͹Β͘࠶දࣔͰ͖ͳ͍
    ೋ౓ͱ࠶දࣔͰ͖ͳ͍ʂʂ
    

    View Slide

47. ొ࿥͞Εͨϓογϡ௨஌ڐՄΛऔ
    ΓԼ͛ͨޙʹɺϓϩϯϓτΛ࠶ද
    ࣔͤͨ͘͞ͳ͍ɻ
    ௨஌ͷ༗ແ͸બ୒Ͱ͖Δ͕ɺϒϥ
    ΢βͷ௨஌ڐՄ͸࢒ͨ͠··ʹ͢
    Δ͜ͱͰଈ࣌ݩʹ໭ͤΔΑ͏ʹ͢
    Δɻ
    ϓογϡ௨஌ڐՄͷऔΓԼ͛
    "MMPX
    ௨஌ڐՄ͸࢒ͨ͠··
    

    View Slide

48. هࣄͷϓϦϑΣον
    λΠϜϥΠϯը໘ʹදࣔ͞Εͨه
    ࣄ͸ϓϦϑΣον͢Δ͜ͱͰɺه
    ࣄৄࡉͷදࣔΛߴ଎Խ͍ͯ͠Δɻ
    ϓϦϑΣον͞Εͨهࣄ৘ใ͸
    4FSWJDF8PSLFSͷΩϟογϡʹ
    ͨ·Δɻ
    Ӭଓతʹ࢒͢ඞཁͰ͸ͳ͍ͷͰ
    ෼ఔ౓ͰFYQJSFͤ͞Δɻ
    GFUDI
    GFUDI
    GFUDI
    GFUDI
    GFUDI
    165
    

    View Slide

49. هࣄͷϓϦϑΣον
    දࣔ͞Ε͍ͯΔهࣄͷ෼ͷ
    ϦΫΤετΛ౤͛·͘Δ
    ϦΫΤετͷॏෳ͸ؾʹ͠ͳ͍
    Ωϟογϡ͞Ε͍ͯͳ͍෼͔͠
    ωοτϫʔΫʹग़ͯߦ͔ͳ͍
    

    View Slide

50. هࣄͷϓϦϑΣον
    ᶃ
    ᶄ
    ᶅ
    ωοτϫʔΫΑΓશવૣ͍͕ɺ
    ͘͝Θ͔ͣʹ͕͔͔࣌ؒΔɾɾɾ
    ʢdNTʣ
    

    View Slide

51. هࣄͷϓϦϑΣον
    {
    4: {id: 4, title: 'title', body: 'body'},
    5: {id: 5, title: 'title', body: 'body'},
    6: {id: 6, title: 'title', body: 'body'}
    }
    ᶄ
    ᶃ
    ᶅ
    4FSWJDF8PSLFSͷΩϟογϡΛ
    ͞Βʹ+4্Ͱ΋อ࣋
    

    View Slide

52. ϓϦϑΣονPOϓογϡ௨஌
    wهࣄ౤ߘ͕ϓογϡ௨஌͞Εͨ৔߹ɺର৅ͷهࣄΛϓϦϑΣον
    wϓογϡ௨஌͕λοϓ͞Εͨ࣌ʹର৅ͷهࣄΛߴ଎ͰදࣔͰ͖Δ
    ᶄ
    ᶃ
    ᶅ
    165
    ᶆ
    ᶇ
    

    View Slide

53. όοΫάϥ΢ϯυಉظ
    ʮ͍͍Ͷʯ͸஗Ԇ͕ڐ͞ΕΔͷͰ
    ΦϑϥΠϯͰ΋ૹ৴Ͱ͖ͨΑ͏ͳ
    දࣔΛߦ͏ɻ
    ૹ৴͸όοΫάϥ΢ϯυಉظͰΦ
    ϯϥΠϯ෮ؼ࣌ʹࣗಈͰߦΘΕΔɻ
    ΦϑϥΠϯͰ΋ද্ࣔ͸ૹ৴
    Ͱ͖͔ͨͷΑ͏ʹදࣔ͢Δ
    

    View Slide

54. Ξόλʔը૾ͷΩϟογϡઓུ
    wΩϟογϡ͔Βฦ͕͢ɺಉ࣌ʹωοτϫʔΫ͔Βऔಘ͠ɺΩϟογϡ
    Λߋ৽͢Δʢࠓճ͸$MPVEJOBSZΛ࢖༻͍ͯ͠ΔͷͰҙຯ͕ແ͍ʜʣ
    wৗʹ࠷৽ͷը૾͕දࣔ͞ΕΔΘ͚Ͱ͸ͳ͍͕ɺߋ৽ස౓͕௿͍ͨΊڐ
    ͞ΕΔ
    ᶃ ᶄ`
    4UBMF8IJMF3FWBMJEBUF
    ᶅ`
    (&5
    ᶄ
    165
    ᶆ`
    ᶅ
    

    View Slide

55. ᶇ
    Ξόλʔը૾ͷϑΥʔϧόοΫ
    w4FSWJDF8PSLFS͸औಘʹࣦഊͨ͠৔߹ͷϨεϙϯε΋੍ޚͰ͖Δ
    wϑΥʔϧόοΫϨεϙϯεͷ಺༰͸63-ผʹ෼͚Δ͜ͱ΋Ͱ͖Δ
    ᶃ
    (&5
    ᶄ ᶆ
    ᶅ
    ϑΥʔϧόοΫ༻ը૾
    

    View Slide

56. 4FSWJDF8PSLFSͷճආ
    ઃఆը໘ͷΞόλʔը૾͚ͩ͸࠷
    ৽ͷ΋ͷ͕දࣔ͞Εͳ͍ͱߋ৽͕
    ଈ࣌൓ө͞Εͳ͍ɻ
    ΫΤϦύϥϝʔλʹΑͬͯ
    4FSWJDF8PSLFSͷΩϟογϡΛ
    ճආ͢Δɻ
    ௨ৗϦΫΤετJNBHFTBWBUBSTVTFSOBNFQOH
    4FSWJDF8PSLFS௨աϦΫΤετJNBHFTBWBUBSTVTFSOBNFQOH TFMG
    

    View Slide

57. ߋ৽࣌ͷϦϩʔυཁٻ
    4FSWJDF8PSLFSͷߋ৽͸ଈ࣮࣌
    ߦ͞Εͣɺલͷόʔδϣϯͷ
    4FSWJDF8PSLFS͕؅ཧ͍ͯ͠Δશ
    ͯͷϒϥ΢βλϒ͕ด͡ΒΕΔ·
    Ͱߋ৽͞Εͳ͍ɻʢྫ֎͋Γʣ
    ϞʔμϧΛग़͢͜ͱͰϢʔβʹ࠶
    ىಈΛଅ͢ɻ
    

    View Slide

58. 4FSWJDF8PSLFSͷߋ৽
    ᶃ
    ᶄ
    ᶅ
    (&5
    

    View Slide

59. 4FSWJDF8PSLFSͷߋ৽
    ᶃ
    ᶄ
    ᶅ
    (&5
    "QQMJDBUJPO4IFMMͷΞηοτΛ
    ߋ৽ͯ͠΋
    ϩʔΧϧΩϟογϡ͕࢖༻͞ΕΔ
    ίʔυʹมߋ͕ͳ͚Ε͹ɺ
    4FSWJDF8PSLFS͸ߋ৽͞Εͳ͍
    

    View Slide

60. 4FSWJDF8PSLFSͷߋ৽࣮ߦ৚݅
    ᶆ
    ᶄ
    ᶅ
    165
    ᶃ
    ৽͍͠4FSWJDF8PSLFSͷ
    ΠϯετʔϧϓϩηεͰ
    ৽͍͠Ξηοτ͕Ωϟογϡ͞ΕΔ
    

    View Slide

61. 4FSWJDF8PSLFSͷߋ৽
    ৽͍͠4FSWJDF8PSLFSͷ
    Πϯετʔϧ͸
    όοΫάϥ΢ϯυͰߦΘΕΔ
    

    View Slide

62. 4FSWJDF8PSLFSͷߋ৽
    4FSWJDF8PSLFSͷަ୅͸
    શͯͷϒϥ΢βλϒ͕ด͡ΒΕͨ࣌
    

    View Slide

63. 4FSWJDF8PSLFSͷߋ৽
    

    View Slide

64. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    ࠷৽ͷ࠾༻৘ใΛνΣοΫˠ !QC@SFDSVJU
    

    View Slide