Monaca、WKWebViewに移行しようぜ！

by Daisuke Kishino

Slide 1

Slide 1 text

MonacaɺWKWebViewʹҠߦ͠Α ͏ͥʂ Daisuke Kishino Monaca UG ONLINE #1 2020.4.2

Slide 2

Slide 2 text

ࣗݾ঺հ • ϐʔϓϧιϑτ΢ΣΞגࣜձࣾ • ؛໺ େี(@kishisuke) • Ԭࢁݝ૔ෑࢢࡏॅ • ͜͜2೥൒͸BaaS@rakuza+MonacaΞϓϦͷ։ൃ (Vue.jsϝΠϯ) • Monaca UG OKAYAMA΍ͬͯ·͢ • ࠷ۙ͸FlutterΞϓϦ΋࡞ͬͯ·͢

Slide 3

Slide 3 text

ൃ୺ https://developer.apple.com/news/?id=12232019b ”App Store͸ɺ2020೥4݄Ҏ߱ɺUIWebViewΛ࢖༻͢Δ৽͍͠Ξ ϓϦɺ͓Αͼ2020೥12݄Ҏ߱ɺUIWebViewΛ࢖༻͢ΔΞϓϦͷ ΞοϓσʔτΛड͚෇͚ͳ͘ͳΓ·͢ɻ”

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Ͳ͏͢Ε͹ྑ͍ͷʁ • UIWebViewΛ࡟আ͢Δ • ͔ΘΓʹWKWebViewΛ࢖͏ • Ҏ্ʂ

Slide 6

Slide 6 text

WKWebView is Կ • iOS 8͔Βొ৔ͨ͠৽͍͠WebView • ϨϯμϦϯά΍JSͷ࣮ߦ͕ߴ଎ • ϓϩηε͕ΞϓϦͱ෼཭͍ͯ͠ΔʢΫϥογϡ͠ʹ͍͘ʣ • ηΩϡϦςΟ͕ݫ֨

Slide 7

Slide 7 text

J04ϦϦʔεɻ8,8FC7JFX͕ొ৔ J04ϦϦʔεɻ6*8FC7JFX͕ඇਪ঑ʹͳΔ ͍ۙকདྷ6*8FC7JFXΛؚΉΞϓϦͷਃ੥͕Ͱ͖ͳ͘ͳΔܯࠂ͕௨஌ ͞ΕΔʢ*5.4ʣ ৽ن͸ɺطଘ͸ʹ6*8FC7JFXΛؚΉΞϓϦͷਃ ੥͕Ͱ͖ͳ͘ͳΔ͜ͱ͕௨஌͞ΕΔ .POBDB͕8,8FC7JFXͷαϙʔτΛ։࢝ 6*8FC7JFXΛؚΉ৽نΞϓϦͷਃ੥͕Ͱ͖ͳ͘ͳΔˡΠϚίί 6*8FC7JFXΛؚΉطଘΞϓϦͷਃ੥͕Ͱ͖ͳ͘ͳΔ

Slide 8

Slide 8 text

UIWebViewΛར༻͍ͯ͠Δ͔֬ೝ͢Δํ๏ • UIWebViewΛ࣮ࡍʹը໘ʹද͍ࣔͯ͠ͳ͘ͱ΋ɺϦϯΫ͍ͯ͠Δ৔߹͸ϦδΣΫτ͞ ΕΔՄೳੑ͕͋Δ • UIWebView͕ϦϯΫ͞Ε͍ͯΔ͔͸nmίϚϯυͰ֬ೝՄೳ • ※όΠφϦϑΝΠϧͷύε͸ҎԼͰ֬ೝ 1. ipaϑΝΠϧΛղౚ͢Δʢ֦ுࢠΛzipʹมߋͯ͠ɺzipܗࣜͱͯ͠ղౚʣ 2. {ϑΝΠϧ໊}/Payload/{ϑΝΠϧ໊}.app/{ϑΝΠϧ໊} nm <όΠφϦϑΝΠϧͷύε> | grep UIWebView

Slide 9

Slide 9 text

UIWebViewΛར༻͍ͯ͠Δ͔֬ೝ͢Δํ๏ • ݁ՌྫʢԿ΋දࣔ͞Εͳ͔ͬͨΒOKʣ U _OBJC_CLASS_$_UIWebView U _OBJC_METACLASS_$_UIWebView U _OBJC_CLASS_$_UIWebView U _OBJC_METACLASS_$_UIWebView

Slide 10

Slide 10 text

جຊతͳରԠํ๏

Slide 11

Slide 11 text

WebViewͷEngineΛWKWebViewʹมߋ

Slide 12

Slide 12 text

WebViewΛWKWebViewʹมߋ WKWebView ʹมߋ

Slide 13

Slide 13 text

PlatformͱXcodeΛมߋ iOS 5.1.1 ʹมߋ Xcode11.3 ʹมߋ

Slide 14

Slide 14 text

WKWebView൛ΧελϜσόοΨʔʹରԠ Monaca Core UtilityΛ Ұ୴࡟আ

Slide 15

Slide 15 text

WKWebView൛ΧελϜσόοΨʔʹରԠ ௥Ճ 2.1.0 ΛΠϯετʔϧ

Slide 16

Slide 16 text

αʔυύʔςΟϓϥάΠϯͷରԠ

Slide 17

Slide 17 text

αʔυύʔςΟϓϥάΠϯͷରԠ • αʔυύʔςΟͷϓϥάΠϯͰ΋UIWebViewΛϦϯΫ͍ͯ͠ΔՄೳ ੑ͕͋Δɻ • ͦͷ৔߹ɺϓϥάΠϯΛΞοϓσʔτ·ͨ͸࡟আʢඞཁͰ͋Ε͹୅ ସ࣮૷ʹҠߦʣ͢Δ

Slide 18

Slide 18 text

ରԠྫ • InAppBrowser • WKWebViewʹରԠ͓ͯ͠ΓɺUIWebViewͷඇϦϯΫԽ΋3.2.0͔ΒରԠ • Firebase SDK • 6.8.0ͱ6.8.1͔ΒUIWebViewͷඇϦϯΫԽʹରԠʢ6.8.1ະຬͷ৔߹͸ཁ Ξοϓσʔτʣ • AFNetworking • 3.xͰ͸UIWebView͕ϦϯΫ͞Ε͍ͯΔɻ4ͰରԠ൛ΛϦϦʔε༧ఆ

Slide 19

Slide 19 text

ϋϚͬͨ఺

Slide 20

Slide 20 text

LocalStorage

Slide 21

Slide 21 text

LocalStorageͷσʔλอଘ৔ॴ Ҡߦલ Ҡߦޙ Library !"" WebKit !"" LocalStorage !"" file__0.localstorage Library !"" WebKit #"" LocalStorage $ !"" file__0.localstorage $ !"" WebsiteData !"" LocalStorage !"" file__0.localstorage WKWebView͕ ࢀর ࢀর͞Εͳ͘ͳΔ ʢফ༷͑ͨʹݟ͑Δʣ

Slide 22

Slide 22 text

LocalStorageͷσʔλΛҠߦ͢Δ • cordova-plugin-migrate-localstorageΛΠϯετʔϧ͢Δ͚ͩ • ϓϥάΠϯͷॳظԽ࣌ʹWebKit/LocalStorage/file__0.localstorage͔ΒWebKit/ WebsiteData/LocalStorage/file__0.localstorageʹϑΝΠϧΛίϐʔ͢Δ • Ωϟογϡσʔλ͔͠LocalStorageʹอଘ͍ͯ͠ͳ͍৔߹͸ɺ͋͑ͯҠߦ͢Δඞཁ͸ ͳ͍͔΋ • ςετ͸ೖ೦ʹ͢ΔʢGoogle Chrome 79ͷ൵ܶΛ܁Γฦͯ͠͸͍͚ͳ͍..ʣ

Slide 23

Slide 23 text

CordovaͰXHR͕ΤϥʔʹͳΔ

Slide 24

Slide 24 text

HTTP(S)΁ͷΞΫηε MonacaΞϓϦ ʢfile://…ʣ API ʢhttps://example.com/…ʣ WKWebView͸ ಉҰੜ੒ݩϙϦγʔʹΑΓ XHRͰΞΫηεͰ͖ͳ͍ ϒϥ΢βͱಉ༷ʹ CORSରԠ͕ඞཁ

Slide 25

Slide 25 text

ϩʔΧϧϦιʔε΁ͷΞΫηε MonacaΞϓϦ ʢfile://…ʣ MonacaΞϓϦ ʢfile://…/page.htmlʣ WKWebView͸ fileεΩʔϜͷϩʔΧϧϦιʔε ʹXHRͰΞΫηεͰ͖ͳ͍

Slide 26

Slide 26 text

ղܾࡦᶃ: cordova-plugin-wkwebview-file-xhr • cordova-plugin-wkwebview-file-xhr • XHRͷॲཧΛϑοΫͯ͠ɺωΠςΟϒଆʢNSURLSessionʣͰϩʔ ΧϧϑΝΠϧʹΞΫηεͯ݁͠ՌΛฦ͢ • ϓϥάΠϯͷॳظԽ׬ྃ͠ͳ͍ͱXHRϦΫΤετͰ͖ͳ͍఺ʹ஫ҙ

Slide 27

Slide 27 text

ղܾࡦᶄ: Custom SchemeϓϥάΠϯ • ϩʔΧϧϦιʔεʹXHRͰΞΫηε͢ΔͨΊͷMonacaެࣜͷϓϥάΠϯʢ3/31ϦϦʔεʣ • wwwσΟϨΫτϦ഑ԼͷϑΝΠϧશମΛΧελϜεΩʔϜΛ௨ͯ͡ΞΫηε͢Δ • fileεΩʔϜͰ͸ͳ͍ͷͰΞΫηε੍ݶͳ͠ • cordova-plugin-wkwebview-file-xhrͱҟͳΓɺϓϥάΠϯͷॳظԽΛ଴ͭඞཁͳ͠ monaca-app://monaca.io/www/index.html

Slide 28

Slide 28 text

ղܾࡦᶄ: Custom SchemeϓϥάΠϯ • ஫ҙ఺ • WKURLSchemeHandlerΛ࢖͍ͬͯΔʢϋζʣͳͷͰɺiOS11Ҏ߱ͷΈରԠ • publicͳnpmϨδετϦͰެ։͞Ε͍ͯͳ͍ͨΊɺϩʔΧϧ؀ڥͰ͸npm installͰ͖ͳ͍

Slide 29

Slide 29 text

ͦͷଞͷ໰୊͕ى͖ͨΒ • ·ͱΊهࣄΛಡΉ • https://qiita.com/kishisuke/items/d201790aeae2129ff2e3 • CordovaͷIssueΛ֬ೝ͢Δ • https://issues.apache.org/jira/issues/? jql=project%20%3D%20CB%20AND%20labels%20%3D%20wkwebview- known-issues

Slide 30

Slide 30 text

ྑ͍͜ͱ΋͋Δ • ύϑΥʔϚϯεͷ޲্ • ApplePayɺSign in with AppleͳͲͷ࠷৽ػೳʹରԠ͍ͯ͠Δ • UIWebViewͷόά͕௚Δ