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

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

Transcript

1. ઒ౡܛ
   
   (.0
   1FQBCP
   *OD
   
   ୈճ
   1)1ษڧձ 18"ͷαϯϓϧΞϓϦ
   ࡞ͬͯΈͨ
2. ΤϯδχΞ ઒ౡܛ
   
   !OB[POPIJUP 4)ࣄۀ෦+6(&.νʔϜ IUUQOB[POPIJUPKVHFNKQ
3. TDIPP͞ΜͰ-BSBWFMͷतۀ࡞Γ·ͨ͠
4. ໨࣍ w18"ͱ͸
   w18"͕΋ͨΒ͢ϝϦοτ
   w18"ͷݱࡏ
   wαϯϓϧΞϓϦͷσϞ
   wαϯϓϧΞϓϦͷ࣮૷ύλʔϯ
5. ࠓ೔࿩͢͜ͱɾ࿩͞ͳ͍͜ͱ w࿩͢͜ͱ
   w18"ͷ֓ཁ
   wαϯϓϧΞϓϦΛ࡞ͬͨಘͨ஌ݟ
   w࿩͞ͳ͍͜ͱ
   wϑϩϯτΤϯυٕज़
6. 18"ͱ͸
7. 18"ͱ͸ w1SPHSFTTJWF
   8FC
   "QQTͷུশ
   w৽͍ٕ͠ज़ʹΑͬͯωΠςΟϒΞϓϦͷΑ͏ͳಈ࡞͕Մೳʹͳͬͨ 8FCΞϓϦέʔγϣϯ
8. 4UBU$PVOUFS %FTLUPQ
   WT
   .PCJMF
   WT
   5BCMFU
   .BSLFU
   4IBSF
   8PSMEXJEF 
   IUUQHTTUBUDPVOUFSDPNQMBUGPSN NBSLFUTIBSFEFTLUPQNPCJMFUBCMFUXPSMEXJEFNPOUIMZ
9. 18"ͷੜ·Εͨഎܠ wϞόΠϧ୺຤ͷར༻࣌ؒͷׂ͸ωΠςΟϒΞϓϦʹ࢖ΘΕ͍ͯΔ
   wIUUQXXXOFUSBUJOHTDPKQOFXT@SFMFBTF /FXTSFMFBTFIUNM ˞͜ͷൃදதͷఆٛ˞
   ϞόΠϧ8FC
   ϞόΠϧ୺຤Ͱϒϥ΢βΛ௨ͨ͠8FCମݧ
10. ϞόΠϧ8FCʻωΠςΟϒΞϓϦ wΦϑϥΠϯͰಈ࡞్͕੾ΕΔ
    wಈ࡞͕ॏ͘ײ͡Δ
    wϓογϡ௨஌Ͱ͖ͳ͍ʢαʔϏεఏڙ ଆࢹ఺ʣ
11. ྆ऀͷൺֱ ϞόΠϧ8FC ωΠςΟϒΞϓϦ ΦϑϥΠϯಈ࡞ ෆՄ Մೳ ϓογϡ௨஌ ෆՄ Մೳ ىಈ·Ͱεςοϓ ଟ͍ʢϒοΫϚʔΫొ࿥Ͱ؇࿨Ͱ͖Δʣ গͳ͍ʢϗʔϜը໘͔Βىಈʣ 69 ѱ͍ʢKBWBTDSJQU౳Ͱ؇࿨Ͱ͖Δʣ ྑ͍ Πϯετʔϧ ෆཁ ඞਢ ݕࡧੑ ߴ͍ ௿͍ ։ൃίετ ௿͍ ߴ͍ ϦϦʔείετ ௿͍ ߴ͍
12. ྆ऀͷ͍͍ͱ͜औΓ wΦϑϥΠϯಈ࡞
    wϓογϡ௨஌
    wΠϯετʔϧϨε
    wݕࡧɾϦϯΫՄೳ Կ͔
13. ྆ऀͷ͍͍ͱ͜औΓ wϞόΠϧ8FCΛϕʔεʹɺ৽͍͠ςΫϊϩδʔΛ༻͍࣮ͯݱ͢Δ .PCJMF
    8FC /FX
    5FDIOPMPHZ 18"
14. 18"ͷॾٕज़ w4FSWJDF8PSLFS
    w8FC"QQ.BOJGFTU
    w1BZNFOU3FRVFTU"1*
    w"VUPpMM
    w'FUDI
    "1*
    w$BDIF
    "1* w1VTI
    "1*
    w#BDLHSPVOE
    4ZOD
    "1*
    w(FPMPDBUJPO
    "1*
    
    w%FWJDF.PUJPO&WFOU
    w'VMMTDSFFO
    "1*
    w$SFEFOUJBM
    .BOBHFNFOU
    "1*
15. 4FSWJDF8PSLFSͷओͳ໾ׂ w)551ϦΫΤετͷΠϯλʔηϓτ
    w)551Ϩεϙϯεͷίϯτϩʔϧ
    wϓογϡ௨஌଴ͪड͚
    wόοΫάϥ΢ϯυಉظ
16. 4FSWJDF8PSLFS ᶃ ᶄ
17. 4FSWJDF8PSLFS ᶃ ᶄ ᶅ ᶆ DMJFOU
    TJEF
18. 4FSWJDF8PSLFS ᶃ ᶄ ᶅ 165 DMJFOU
    TJEF
19. 4FSWJDF8PSLFS ᶃ ᶄ ᶅ (&5 DMJFOU
    TJEF
20. 4FSWJDF8PSLFS (&5 DMJFOU
    TJEF +BWBTDSJQUͰ੍ޚ͢Δ
21. 4FSWJDF8PSLFS ᶃ ᶅ /FUXPSL
    'JSTU ᶆ (&5 ᶄ ᶃ ᶅ $BDIF
    'JSTU ᶆ (&5 ᶄ 165 ᶇ ᶈ
22. 4FSWJDF8PSLFS ᶄ ᶃ ϒϥ΢β͕ด͡ΒΕͯ΋ಈ͘
23. 4FSWJDF8PSLFS ᶃ TZODSFHJTUFS
24. 4FSWJDF8PSLFS ᶃ TZOD
    FWFOU ᶄ ᶅ ΦϯϥΠϯ෮ؼ࣌ʹ
    ൃੜ͢ΔΠϕϯτ
25. 4FSWJDF8PSLFSͷಛ௃ wෆ҆ఆͳωοτϫʔΫ؀ڥΛٵऩ͢ΔϓϩΩγ
    w௨஌ͷ଴ͪड͚Λߦ͏όοΫάϥ΢ϯυϓϩηε
    wΦϯϥΠϯ࣌ͷδϣϒΛ࣮ߦ͢ΔϫʔΧʔϓϩηε
26. 8FC"QQ.BOJGFTU w8FCΞϓϦέʔγϣϯͷϗʔϜը໘΁ͷ௥Ճํ๏Λఆٛ͢ΔKTPO
    wΞϓϦέʔγϣϯىಈ࣌ͷΦϓγϣϯ΋ࢦఆͰ͖Δ
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- ϗʔϜը໘ʹදࣔ͞ΕΔΞΠίϯ ϒϥ΢βͷදࣔϞʔυ
28. 8FC"QQ.BOJGFTU <link rel="manifest" href="/manifest.json"> ̍ ̎ ̏ ϗʔϜը໘௥Ճϓϩϯϓτ
    ʢϒϥ΢βϝχϡʔ͔Β΋Մʣ ϗʔϜը໘ʹΞϓϦͷ௥Ճ
29. 8FC"QQ.BOJGFTU ̐ ̑ ̒ ىಈ࣌ͷεϓϥογϡը໘
    ʢΧϥʔ΍ΞΠίϯ͸ࢦఆՄʣ ϒϥ΢βϝχϡʔ͕ඇදࣔ
30. 18"ͷಛ௃ wஈ֊త
    wϨεϙϯγϒ
    wωοτϫʔΫ઀ଓʹґଘ͠ͳ͍
    wΞϓϦײ֮
    wৗʹ࠷৽ ࢀߟ
    IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTDPEFMBCTZPVSpSTUQXBQQ IMKB w҆શ
    wൃݟ͠΍͍͢
    w࠶ΤϯήʔδϝϯτՄೳ
    wΠϯετʔϧՄೳ
    wϦϯΫՄೳ
31. ʮ18"ʯͱ͸ϚʔέςΟϯάϫʔυͳͷͰ͢ɻ ݫີͳఆٛ͸ಛʹ͋Γ·ͤΜɻ 1SPHSFTTJWF
    8FC
    "QQT
    3PBETIPX
    5PLZP
    
    
    2"
32. ·ͱΊ w18"ͱ͸৽͍ٕ͠ज़ʹΑͬͯҰ࣍ݩ্ͷମݧΛఏڙ͢Δ8FCΞϓϦ
    w8FCͱωΠςΟϒΞϓϦͷ྆໘ͷྑ͞Λ࣋ͪ߹Θ͍ͤͯΔ
33. 18"ͷ΋ͨΒ͢ϝϦοτ
34. 18"ͷ΋ͨΒ͢ϝϦοτ w8FCͷٕज़Ͱ׬݁Ͱ͖Δ
    wҰͭͷίʔυͰ׬݁͢Δ
    wΞϓϦϚʔέοτʹറΒΕͳ͍
    wΞϓϦར༻։࢝·Ͱͷোน͕খ͘͞ͳΔ
35. 8FCͷٕज़Ͱ׬݁͢Δ ૉࡐ
    IUUQXXXGSFFQJLDPN 8FC%JSFDUPS 8FC%FTJHOFS 8FC&OHJOFFS J04
    &OHJOFFS "OESPJE
    &OHJOFFS 8FC%JSFDUPS 8FC%FTJHOFS 8FC&OHJOFFS
36. ҰͭͷίʔυͰ׬݁͢Δ
37. ΞϓϦϚʔέοτʹറΒΕͳ͍ wϦϦʔε͕αʔϏεଆͰ׬શʹίϯτϩʔϧͰ͖Δ
    wόʔδϣϯΞοϓ΍ςετʹର͔͚ͯ͠Δίετ͕গͳ͘ͳΔ
38. ΞϓϦར༻։࢝·Ͱͷোน͕খ͘͞ͳΔ wΠϯετʔϧϨε
    wσʔλαΠζ΋খ͘͞ͳΔ܏޲͕͋Δ
39. 18"ͷݱࡏ
40. 4FSWJDF8PSLFSͷ࣮૷ঢ়گ IUUQTDBOJVTFDPNGFBUTFSWJDFXPSLFST
41. Կނɺࠓ18"ͳͷ͔ʁ w8FCLJU͕ΑΓ4FSWJDF8PSLFSͷ࣮૷ʹணखͨ͠ IUUQTXFCLJUPSHTUBUVT TFBSDITFSWJDFXPSLFS ʢJ04ͷϒϥ΢β͸8FCLJUͰ࣮૷͠ͳ͚Ε͹ͳΒͳ੍͍໿͕͋Δʣ
42. σϞ
43. ߏ੒ w-BSBWFM
    
    w7VFKT
    
    w0OTFO
    6*
     IUUQTTISPVEFEEVTLIFSPLVBQQDPN
44. "QQ4IFMMϞσϧ "QQMJDBUJPO4IFMM෦෼ʢ੩తίϯςϯπʣ ಈతίϯςϯπ 18"Λߏங͢ΔΞʔΩςΫνϟɻ
    6*͕ػೳ͢Δ࠷௿ݶͷΞηοτ ʢ"QQMJDBUJPO4IFMMʣΛࣄલ Ωϟογϡ͢Δɻ
45. ϓογϡ௨஌ʹΑΔԾొ࿥ ϓογϡ௨஌ΛڐՄͯ͠΋Β͏͜ ͱΛϢʔβԾొ࿥ͱͯ͠ѻ͏ɻ
    ΞϓϦར༻։࢝·Ͱͷεςοϓ਺ Λগͳ͘͢Δɻ
46. ϓογϡ௨஌ڐՄͷࣄલ֬ೝ ϓογϡ௨஌ڐՄͷϓϩϯϓτ͸ Ұ౓ϒϩοΫ͞ΕΔͱೋ౓ͱදࣔ ͞Εͳ͘ͳΔɻ
    μϒϧύʔϛογϣϯύλʔϯͰ ΑΓ࣮֬ʹڐՄͯ͠΋Β͏ɻ ͠͹Β͘࠶දࣔͰ͖ͳ͍ ೋ౓ͱ࠶දࣔͰ͖ͳ͍ʂʂ
47. ొ࿥͞Εͨϓογϡ௨஌ڐՄΛऔ ΓԼ͛ͨޙʹɺϓϩϯϓτΛ࠶ද ࣔͤͨ͘͞ͳ͍ɻ
    ௨஌ͷ༗ແ͸બ୒Ͱ͖Δ͕ɺϒϥ ΢βͷ௨஌ڐՄ͸࢒ͨ͠··ʹ͢ Δ͜ͱͰଈ࣌ݩʹ໭ͤΔΑ͏ʹ͢ Δɻ ϓογϡ௨஌ڐՄͷऔΓԼ͛ "MMPX ௨஌ڐՄ͸࢒ͨ͠··
48. هࣄͷϓϦϑΣον λΠϜϥΠϯը໘ʹදࣔ͞Εͨه ࣄ͸ϓϦϑΣον͢Δ͜ͱͰɺه ࣄৄࡉͷදࣔΛߴ଎Խ͍ͯ͠Δɻ
    ϓϦϑΣον͞Εͨهࣄ৘ใ͸ 4FSWJDF8PSLFSͷΩϟογϡʹ ͨ·Δɻ
    Ӭଓతʹ࢒͢ඞཁͰ͸ͳ͍ͷͰ ෼ఔ౓ͰFYQJSFͤ͞Δɻ GFUDI GFUDI GFUDI GFUDI GFUDI 165
49. هࣄͷϓϦϑΣον දࣔ͞Ε͍ͯΔهࣄͷ෼ͷ
    ϦΫΤετΛ౤͛·͘Δ
    ϦΫΤετͷॏෳ͸ؾʹ͠ͳ͍ Ωϟογϡ͞Ε͍ͯͳ͍෼͔͠
    ωοτϫʔΫʹग़ͯߦ͔ͳ͍
50. هࣄͷϓϦϑΣον ᶃ ᶄ ᶅ ωοτϫʔΫΑΓશવૣ͍͕ɺ
    ͘͝Θ͔ͣʹ͕͔͔࣌ؒΔɾɾɾ ʢdNTʣ
51. هࣄͷϓϦϑΣον { 4: {id: 4, title: 'title', body: 'body'}, 5: {id: 5, title: 'title', body: 'body'}, 6: {id: 6, title: 'title', body: 'body'} } ᶄ ᶃ ᶅ 4FSWJDF8PSLFSͷΩϟογϡΛ
    ͞Βʹ+4্Ͱ΋อ࣋
52. ϓϦϑΣον
    PO
    ϓογϡ௨஌ wهࣄ౤ߘ͕ϓογϡ௨஌͞Εͨ৔߹ɺର৅ͷهࣄΛϓϦϑΣον
    wϓογϡ௨஌͕λοϓ͞Εͨ࣌ʹର৅ͷهࣄΛߴ଎ͰදࣔͰ͖Δ ᶄ ᶃ ᶅ 165 ᶆ ᶇ
53. όοΫάϥ΢ϯυಉظ ʮ͍͍Ͷʯ͸஗Ԇ͕ڐ͞ΕΔͷͰ ΦϑϥΠϯͰ΋ૹ৴Ͱ͖ͨΑ͏ͳ දࣔΛߦ͏ɻ
    ૹ৴͸όοΫάϥ΢ϯυಉظͰΦ ϯϥΠϯ෮ؼ࣌ʹࣗಈͰߦΘΕΔɻ ΦϑϥΠϯͰ΋ද্ࣔ͸ૹ৴
    Ͱ͖͔ͨͷΑ͏ʹදࣔ͢Δ
54. Ξόλʔը૾ͷΩϟογϡઓུ wΩϟογϡ͔Βฦ͕͢ɺಉ࣌ʹωοτϫʔΫ͔Βऔಘ͠ɺΩϟογϡ Λߋ৽͢Δʢࠓճ͸$MPVEJOBSZΛ࢖༻͍ͯ͠ΔͷͰҙຯ͕ແ͍ʜʣ
    wৗʹ࠷৽ͷը૾͕දࣔ͞ΕΔΘ͚Ͱ͸ͳ͍͕ɺߋ৽ස౓͕௿͍ͨΊڐ ͞ΕΔ ᶃ ᶄ` 4UBMF8IJMF3FWBMJEBUF ᶅ` (&5 ᶄ 165 ᶆ` ᶅ
55. ᶇ Ξόλʔը૾ͷϑΥʔϧόοΫ w4FSWJDF8PSLFS͸औಘʹࣦഊͨ͠৔߹ͷϨεϙϯε΋੍ޚͰ͖Δ
    wϑΥʔϧόοΫϨεϙϯεͷ಺༰͸63-ผʹ෼͚Δ͜ͱ΋Ͱ͖Δ ᶃ (&5 ᶄ ᶆ ᶅ ϑΥʔϧόοΫ༻ը૾
56. 4FSWJDF8PSLFSͷճආ ઃఆը໘ͷΞόλʔը૾͚ͩ͸࠷ ৽ͷ΋ͷ͕දࣔ͞Εͳ͍ͱߋ৽͕ ଈ࣌൓ө͞Εͳ͍ɻ
    ΫΤϦύϥϝʔλʹΑͬͯ 4FSWJDF8PSLFSͷΩϟογϡΛ ճආ͢Δɻ ௨ৗϦΫΤετ
    JNBHFTBWBUBSTVTFSOBNFQOH
    4FSWJDF8PSLFS௨աϦΫΤετ
    JNBHFTBWBUBSTVTFSOBNFQOH TFMG
57. ߋ৽࣌ͷϦϩʔυཁٻ 4FSWJDF8PSLFSͷߋ৽͸ଈ࣮࣌ ߦ͞Εͣɺલͷόʔδϣϯͷ 4FSWJDF8PSLFS͕؅ཧ͍ͯ͠Δશ ͯͷϒϥ΢βλϒ͕ด͡ΒΕΔ· Ͱߋ৽͞Εͳ͍ɻʢྫ֎͋Γʣ
    ϞʔμϧΛग़͢͜ͱͰϢʔβʹ࠶ ىಈΛଅ͢ɻ
58. 4FSWJDF8PSLFSͷߋ৽ ᶃ ᶄ ᶅ (&5
59. 4FSWJDF8PSLFSͷߋ৽ ᶃ ᶄ ᶅ (&5 "QQMJDBUJPO4IFMMͷΞηοτΛ
    ߋ৽ͯ͠΋
    ϩʔΧϧΩϟογϡ͕࢖༻͞ΕΔ ίʔυʹมߋ͕ͳ͚Ε͹ɺ
    4FSWJDF8PSLFS͸ߋ৽͞Εͳ͍
60. 4FSWJDF8PSLFSͷߋ৽࣮ߦ৚݅ ᶆ ᶄ ᶅ 165 ᶃ ৽͍͠4FSWJDF8PSLFSͷ
    ΠϯετʔϧϓϩηεͰ
    ৽͍͠Ξηοτ͕Ωϟογϡ͞ΕΔ
61. 4FSWJDF8PSLFSͷߋ৽ ৽͍͠4FSWJDF8PSLFSͷ
    Πϯετʔϧ͸
    όοΫάϥ΢ϯυͰߦΘΕΔ
62. 4FSWJDF8PSLFSͷߋ৽ 4FSWJDF8PSLFSͷަ୅͸
    શͯͷϒϥ΢βλϒ͕ด͡ΒΕͨ࣌
63. 4FSWJDF8PSLFSͷߋ৽
64. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ࠷৽ͷ࠾༻৘ใΛνΣοΫˠ !QC@SFDSVJU