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

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

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

B989cc865d53d8e26fdadac99727113c?s=128

Satoshi Kawashima

December 06, 2017
Tweet

Transcript

  1. ઒ౡܛ(.01FQBCP *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"ͱ͸ w1SPHSFTTJWF8FC"QQTͷུশ w৽͍ٕ͠ज़ʹΑͬͯωΠςΟϒΞϓϦͷΑ͏ͳಈ࡞͕Մೳʹͳͬͨ 8FCΞϓϦέʔγϣϯ

  8. 4UBU$PVOUFS %FTLUPQWT.PCJMFWT5BCMFU.BSLFU4IBSF8PSMEXJEF 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Λϕʔεʹɺ৽͍͠ςΫϊϩδʔΛ༻͍࣮ͯݱ͢Δ .PCJMF8FC /FX5FDIOPMPHZ 18"

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

  16. 4FSWJDF8PSLFS ᶃ ᶄ

  17. 4FSWJDF8PSLFS ᶃ ᶄ ᶅ ᶆ DMJFOUTJEF

  18. 4FSWJDF8PSLFS ᶃ ᶄ ᶅ 165 DMJFOUTJEF

  19. 4FSWJDF8PSLFS ᶃ ᶄ ᶅ (&5 DMJFOUTJEF

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

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

    ᶆ (&5 ᶄ 165 ᶇ ᶈ
  22. 4FSWJDF8PSLFS ᶄ ᶃ ϒϥ΢β͕ด͡ΒΕͯ΋ಈ͘

  23. 4FSWJDF8PSLFS ᶃ TZODSFHJTUFS

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

  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"ʯͱ͸ϚʔέςΟϯάϫʔυͳͷͰ͢ɻ ݫີͳఆٛ͸ಛʹ͋Γ·ͤΜɻ 1SPHSFTTJWF8FC"QQT3PBETIPX5PLZP2"

  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 w0OTFO6* 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