Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Monaca、WKWebViewに移行しようぜ!
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Daisuke Kishino
April 02, 2020
Programming
0
940
Monaca、WKWebViewに移行しようぜ!
https://monacaug.connpass.com/event/170995/
の発表資料
Daisuke Kishino
April 02, 2020
Tweet
Share
More Decks by Daisuke Kishino
See All by Daisuke Kishino
Flutterコンテストを開催した話
kishino
1
450
Ionicあらまし@okayama-js
kishino
0
1.1k
MonacaアプリをネイティブのUXに近づけるために
kishino
0
950
Sign In with Appleを実装してみた
kishino
0
430
Fluid interfaces for Monaca
kishino
0
250
Vue.jsの特徴
kishino
0
610
Monacaでアプリ名の多言語化
kishino
0
760
Other Decks in Programming
See All in Programming
生成AIを使ったコードレビューで定性的に品質カバー
chiilog
1
280
Vibe Coding - AI 驅動的軟體開發
mickyp100
0
180
組織で育むオブザーバビリティ
ryota_hnk
0
180
副作用をどこに置くか問題:オブジェクト指向で整理する設計判断ツリー
koxya
1
610
React Native × React Router v7 API通信の共通化で考えるべきこと
suguruooki
0
100
MDN Web Docs に日本語翻訳でコントリビュート
ohmori_yusuke
0
650
Grafana:建立系統全知視角的捷徑
blueswen
0
330
MUSUBIXとは
nahisaho
0
140
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
azukiazusa1
1
750
なるべく楽してバックエンドに型をつけたい!(楽とは言ってない)
hibiki_cube
0
140
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2.1k
Best-Practices-for-Cortex-Analyst-and-AI-Agent
ryotaroikeda
1
110
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.1k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
350
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
The Invisible Side of Design
smashingmag
302
51k
Facilitating Awesome Meetings
lara
57
6.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
760
GraphQLとの向き合い方2022年版
quramy
50
14k
Optimizing for Happiness
mojombo
379
71k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1k
Design in an AI World
tapps
0
150
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
130
Transcript
MonacaɺWKWebViewʹҠߦ͠Α ͏ͥʂ Daisuke Kishino Monaca UG ONLINE #1 2020.4.2
ࣗݾհ • ϐʔϓϧιϑτΣΞגࣜձࣾ • ؛ େี(@kishisuke) • Ԭࢁݝෑࢢࡏॅ • ͜͜2BaaS@rakuza+MonacaΞϓϦͷ։ൃ
(Vue.jsϝΠϯ) • Monaca UG OKAYAMAͬͯ·͢ • ࠷ۙFlutterΞϓϦ࡞ͬͯ·͢
ൃ https://developer.apple.com/news/?id=12232019b ”App Storeɺ20204݄Ҏ߱ɺUIWebViewΛ༻͢Δ৽͍͠Ξ ϓϦɺ͓Αͼ202012݄Ҏ߱ɺUIWebViewΛ༻͢ΔΞϓϦͷ ΞοϓσʔτΛड͚͚ͳ͘ͳΓ·͢ɻ”
None
Ͳ͏͢Εྑ͍ͷʁ • UIWebViewΛআ͢Δ • ͔ΘΓʹWKWebViewΛ͏ • Ҏ্ʂ
WKWebView is Կ • iOS 8͔Βొͨ͠৽͍͠WebView • ϨϯμϦϯάJSͷ࣮ߦ͕ߴ • ϓϩηε͕ΞϓϦͱ͍ͯ͠ΔʢΫϥογϡ͠ʹ͍͘ʣ
• ηΩϡϦςΟ͕ݫ֨
J04ϦϦʔεɻ8,8FC7JFX͕ొ J04ϦϦʔεɻ6*8FC7JFX͕ඇਪʹͳΔ ͍ۙকདྷ6*8FC7JFXΛؚΉΞϓϦͷਃ͕Ͱ͖ͳ͘ͳΔܯࠂ͕௨ ͞ΕΔʢ*5.4ʣ ৽نɺطଘʹ6*8FC7JFXΛؚΉΞϓϦͷਃ ͕Ͱ͖ͳ͘ͳΔ͜ͱ͕௨͞ΕΔ
.POBDB͕8,8FC7JFXͷαϙʔτΛ։࢝ 6*8FC7JFXΛؚΉ৽نΞϓϦͷਃ͕Ͱ͖ͳ͘ͳΔˡΠϚίί 6*8FC7JFXΛؚΉطଘΞϓϦͷਃ͕Ͱ͖ͳ͘ͳΔ
UIWebViewΛར༻͍ͯ͠Δ͔֬ೝ͢Δํ๏ • UIWebViewΛ࣮ࡍʹը໘ʹද͍ࣔͯ͠ͳ͘ͱɺϦϯΫ͍ͯ͠Δ߹ϦδΣΫτ͞ ΕΔՄೳੑ͕͋Δ • UIWebView͕ϦϯΫ͞Ε͍ͯΔ͔nmίϚϯυͰ֬ೝՄೳ • ※όΠφϦϑΝΠϧͷύεҎԼͰ֬ೝ 1. ipaϑΝΠϧΛղౚ͢Δʢ֦ுࢠΛzipʹมߋͯ͠ɺzipܗࣜͱͯ͠ղౚʣ
2. {ϑΝΠϧ໊}/Payload/{ϑΝΠϧ໊}.app/{ϑΝΠϧ໊} nm <όΠφϦϑΝΠϧͷύε> | grep UIWebView
UIWebViewΛར༻͍ͯ͠Δ͔֬ೝ͢Δํ๏ • ݁ՌྫʢԿදࣔ͞Εͳ͔ͬͨΒOKʣ U _OBJC_CLASS_$_UIWebView U _OBJC_METACLASS_$_UIWebView U _OBJC_CLASS_$_UIWebView U
_OBJC_METACLASS_$_UIWebView
جຊతͳରԠํ๏
WebViewͷEngineΛWKWebViewʹมߋ
WebViewΛWKWebViewʹมߋ WKWebView ʹมߋ
PlatformͱXcodeΛมߋ iOS 5.1.1 ʹมߋ Xcode11.3 ʹมߋ
WKWebView൛ΧελϜσόοΨʔʹରԠ Monaca Core UtilityΛ Ұ୴আ
WKWebView൛ΧελϜσόοΨʔʹରԠ Ճ 2.1.0 ΛΠϯετʔϧ
αʔυύʔςΟϓϥάΠϯͷରԠ
αʔυύʔςΟϓϥάΠϯͷରԠ • αʔυύʔςΟͷϓϥάΠϯͰUIWebViewΛϦϯΫ͍ͯ͠ΔՄೳ ੑ͕͋Δɻ • ͦͷ߹ɺϓϥάΠϯΛΞοϓσʔτ·ͨআʢඞཁͰ͋Ε ସ࣮ʹҠߦʣ͢Δ
ରԠྫ • InAppBrowser • WKWebViewʹରԠ͓ͯ͠ΓɺUIWebViewͷඇϦϯΫԽ3.2.0͔ΒରԠ • Firebase SDK • 6.8.0ͱ6.8.1͔ΒUIWebViewͷඇϦϯΫԽʹରԠʢ6.8.1ະຬͷ߹ཁ
Ξοϓσʔτʣ • AFNetworking • 3.xͰUIWebView͕ϦϯΫ͞Ε͍ͯΔɻ4ͰରԠ൛ΛϦϦʔε༧ఆ
ϋϚͬͨ
LocalStorage
LocalStorageͷσʔλอଘॴ Ҡߦલ Ҡߦޙ Library !"" WebKit !"" LocalStorage !"" file__0.localstorage
Library !"" WebKit #"" LocalStorage $ !"" file__0.localstorage $ !"" WebsiteData !"" LocalStorage !"" file__0.localstorage WKWebView͕ ࢀর ࢀর͞Εͳ͘ͳΔ ʢফ༷͑ͨʹݟ͑Δʣ
LocalStorageͷσʔλΛҠߦ͢Δ • cordova-plugin-migrate-localstorageΛΠϯετʔϧ͢Δ͚ͩ • ϓϥάΠϯͷॳظԽ࣌ʹWebKit/LocalStorage/file__0.localstorage͔ΒWebKit/ WebsiteData/LocalStorage/file__0.localstorageʹϑΝΠϧΛίϐʔ͢Δ • Ωϟογϡσʔλ͔͠LocalStorageʹอଘ͍ͯ͠ͳ͍߹ɺ͋͑ͯҠߦ͢Δඞཁ ͳ͍͔ •
ςετೖ೦ʹ͢ΔʢGoogle Chrome 79ͷ൵ܶΛ܁Γฦ͍͚ͯ͠ͳ͍..ʣ
CordovaͰXHR͕ΤϥʔʹͳΔ
HTTP(S)ͷΞΫηε MonacaΞϓϦ ʢfile://…ʣ API ʢhttps://example.com/…ʣ WKWebView ಉҰੜݩϙϦγʔʹΑΓ XHRͰΞΫηεͰ͖ͳ͍ ϒϥβͱಉ༷ʹ CORSରԠ͕ඞཁ
ϩʔΧϧϦιʔεͷΞΫηε MonacaΞϓϦ ʢfile://…ʣ MonacaΞϓϦ ʢfile://…/page.htmlʣ WKWebView fileεΩʔϜͷϩʔΧϧϦιʔε ʹXHRͰΞΫηεͰ͖ͳ͍
ղܾࡦᶃ: cordova-plugin-wkwebview-file-xhr • cordova-plugin-wkwebview-file-xhr • XHRͷॲཧΛϑοΫͯ͠ɺωΠςΟϒଆʢNSURLSessionʣͰϩʔ ΧϧϑΝΠϧʹΞΫηεͯ݁͠ՌΛฦ͢ • ϓϥάΠϯͷॳظԽྃ͠ͳ͍ͱXHRϦΫΤετͰ͖ͳ͍ʹҙ
ղܾࡦᶄ: Custom SchemeϓϥάΠϯ • ϩʔΧϧϦιʔεʹXHRͰΞΫηε͢ΔͨΊͷMonacaެࣜͷϓϥάΠϯʢ3/31ϦϦʔεʣ • wwwσΟϨΫτϦԼͷϑΝΠϧશମΛΧελϜεΩʔϜΛ௨ͯ͡ΞΫηε͢Δ • fileεΩʔϜͰͳ͍ͷͰΞΫηε੍ݶͳ͠ •
cordova-plugin-wkwebview-file-xhrͱҟͳΓɺϓϥάΠϯͷॳظԽΛͭඞཁͳ͠ monaca-app://monaca.io/www/index.html
ղܾࡦᶄ: Custom SchemeϓϥάΠϯ • ҙ • WKURLSchemeHandlerΛ͍ͬͯΔʢϋζʣͳͷͰɺiOS11Ҏ߱ͷΈରԠ • publicͳnpmϨδετϦͰެ։͞Ε͍ͯͳ͍ͨΊɺϩʔΧϧڥͰnpm installͰ͖ͳ͍
ͦͷଞͷ͕ى͖ͨΒ • ·ͱΊهࣄΛಡΉ • 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
ྑ͍͜ͱ͋Δ • ύϑΥʔϚϯεͷ্ • ApplePayɺSign in with AppleͳͲͷ࠷৽ػೳʹରԠ͍ͯ͠Δ • UIWebViewͷόά͕Δ
None
None