PWAの”A”から始まる話 2019/07/17 PWA Night @cyber_snufkin

アジェンダ • ⾃⼰紹介 • PWAの”A”について

⾃⼰紹介 安積洋 @cyber_snufkin 株式会社ロケーションバリュー プロジェクトマネージャー エンジニア的な変遷 perl → Flash → Java → python → php→ WebFrontEnd → MobileAppのPM 基本的にはLAMP環境でのWebエンジニア インフラも少々 (以前の）社内⽤にXenやVMwareでテストサーバーを簡単に⽴てら れる仕組みつくったり 「アプリ屋さんの中でフロントエンドエンジニア」でしたが最近PM してます

簡単に会社の紹介 株式会社ロケーションバリュー https://www.locationvalue.com/ NTTドコモグループ NTTドコモと博報堂の戦略⼦会社

ModuleAppsについて https://moduleapps.com/ 国内最⼤級の企業向け O2O販促アプリ開発サービス 累計DL数3,000万突破

お約束 これからのお話は個人の見解であり、 所属企業の見解とは全く関係ありません。

今⽇の私の話はプログラムの話ではありません。 まだPWAという⾔葉が無かった頃、2012年のChrome TechTalkNightで聴いた @agektmrさんの「これからのChromeはオフラインファーストで開発していきます」 という⾔葉に動かされてから今まで、 ブラウザとPWA周りの動向を⾒ていて思うことをお話したいと思います。 個々については皆さんご存知の内容だと思いますが繋げてみると気がつくこと、あると思います。

NCSA Mosaic の登場以来、Webの歴史はブラウザの歴史でもありました。 ブラウザは「Webにリクエストしてレスポンスされる⽂書を表⽰する」事が⽬的で、 つまりは “Document Viewer” として進化してきました。

NCSA Mosaic の登場以来、Webの歴史はブラウザの歴史でもありました。 ブラウザは「Webにリクエストしてレスポンスされる⽂書を表⽰する」事が⽬的で、 つまりは “Document Viewer” として進化してきました。 1993年 CGIとSSIが利⽤できるようになり、動的なWebが普及 1996年 Netscape Navigator2.0 と Internet Exploler3.0 にJavaScript が搭載 現在ではWebApplication という⾔葉が⼀般的に

PWA Progressive Web Apps

PWA Progressive Web Apps

Application is 何︖

Application is 何︖ ↓ Applyするもの

Apply 〔〜を…に〕適⽤する、当てはめる 〔〜を…に〕応⽤する、利⽤する、⽣かす 〔物を〜に〕当てる 〔薬・化粧⽤クリームなどを〕塗る、塗布する、付ける 〔資⾦などを〕〜に振り向ける 〔装置などを〕作動させる、使⽤する、働かせる 〔熱・電圧などを〕加える 〔⼼・精神・労⼒などを〜に〕傾ける、注ぐ 〔プロレスの技などを〕かける、⾷らわせる、決める

Apply 〔〜を…に〕適⽤する、当てはめる 〔〜を…に〕応⽤する、利⽤する、⽣かす 〔物を〜に〕当てる 〔薬・化粧⽤クリームなどを〕塗る、塗布する、付ける 〔資⾦などを〕〜に振り向ける 〔装置などを〕作動させる、使⽤する、働かせる 〔熱・電圧などを〕加える 〔⼼・精神・労⼒などを〜に〕傾ける、注ぐ 〔プロレスの技などを〕かける、⾷らわせる、決める

Apply 〔〜を…に〕適⽤する、当てはめる 何に適⽤する︖ 〔〜を…に〕応⽤する、利⽤する、⽣かす 何を応⽤する︖

Apply 〔〜を…に〕適⽤する、当てはめる 何に適⽤する︖ → ⽬的、課題、問題 〔〜を…に〕応⽤する、利⽤する、⽣かす 何を応⽤する︖

Apply 〔〜を…に〕適⽤する、当てはめる 何に適⽤する︖ → ⽬的、課題、問題 〔〜を…に〕応⽤する、利⽤する、⽣かす 何を応⽤する︖ → コンピュータ資源

アプリケーションプログラムとは コンピュータを「応⽤」する⽬的に応じた、コンピュータ・プログラム 対語: システムプログラム アプリケーションプログラムに対して処理実⾏のための 計算機資源を抽象化して提供する、などのインフラとしての役割のプログラム

アプリケーションプログラムとは コンピュータを「応⽤」する⽬的に応じた、コンピュータ・プログラム 対語: システムプログラム アプリケーションプログラムに対して処理実⾏のための 計算機資源を抽象化して提供する、などのインフラとしての役割のプログラム PWAにとってのインフラとは、（平たく⾔えば） Google Chrome

PWAにとってのインフラとしてのChrome ChromeのAPI https://developer.chrome.com/apps/api_index APIのリストを眺めて思うこと Bluetooth USB mDNS notifications vpnProvider …

PWAにとってのインフラとしてのChrome ChromeのAPI https://developer.chrome.com/apps/api_index APIのリストを眺めて思うこと Bluetooth USB mDNS notifications vpnProvider … 本当にブラウザに必要なAPI︖

Chromeって実は "Chrome” は実はOSの名前 MacOS, Windows, Linux, Android の上で動くハイパーバイザ、 またはVirtualMachineと捉えるのが正しいのでは。 VMWareやFlashと同じでは︖ ≒ ？

でも iOS Chromeは別 「ChromeはVM」と⾔わないのはここが理由

でも iOS Chromeは別 「ChromeはVM」と⾔わないのはここが理由 Flashの時のこと思い出します。

Steve Jobsからの⼿紙 Thoughts on Flash (April, 2010) https://www.apple.com/hotnews/thoughts-on-flash/ Sixth, the most important reason. (snip) We know from painful experience that letting a third party layer of software come between the platform and the developer ultimately results in sub-standard apps and hinders the enhancement and progress of the platform. If developers grow dependent on third party development libraries and tools, they can only take advantage of platform enhancements if and when the third party chooses to adopt the new features. We cannot be at the mercy of a third party deciding if and when they will make our enhancements available to our developers. 04౳ͷϓϥοτϑΥʔϜͱ։ൃऀͷؒʹαʔυύʔςΟͷதؒϨΠϠʔ͕ڬ·ΔࣄʹͳΕ͹ɺ ։ൃऀ͕ΞϓϦͰͰ͖Δࣄ͸ͦͷதؒϨΠϠʔͷఏڙऀ͕ܾఆ͢Δ͜ͱʹͳͬͯ͠·͏ɻ ·ͨͦͷதؒϨΠϠʔ͕ΫϩεϓϥοτϑΥʔϜͰ͋ͬͨ৔߹ɺڞ௨Ͱར༻Ͱ͖Δϓϥοτ ϑΥʔϜͷ࠷খݶͷػೳ͔͠ར༻Ͱ͖ͳ͍͜ͱʹͳΔɻ ͦΕ͸ΞϓϦͷਐԽͱϓϥοτϑΥʔϜͷਐԽΛ๦͛Δɻ

現在のガイドラインはどうでしょうか︖ 現在のApp Store Review ガイドライン（和訳） https://developer.apple.com/jp/app-store/review/guidelines/ •ύϑΥʔϚϯε • ਖ਼֬ͳϝλσʔλ • "QQ͸J04ɺ.BDɺ"QQMF57ɺ"QQMF8BUDIͰͷ࢖༻Λલఏͱ͍ͯͩ͘͠͞ɻڐՄΛಘ ͨಛఆͷ૬ޓ࡞༻తػೳ͕͋Δ৔߹Λআ͖ɺଞͷϞόΠϧϓϥοτϑΥʔϜͷ໊લɺΞΠίϯɺ ը૾Λ"QQ·ͨ͸ϝλσʔλʹؚΉ͜ͱ͸Ͱ͖·ͤΜɻ"QQͷϝλσʔλͱͯ͠هड़Ͱ͖Δͷ͸ɺ "QQͱͦͷૢ࡞ੑʹؔ͢Δ৘ใͷΈͰ͢ɻ"QQMF΍։ൃϓϩηεʹؔ͢Δ৘ใͳͲɺؔ܎ͷͳ͍ ৘ใ͸ؚΊͳ͍Ͱ͍ͩ͘͞ɻ • ιϑτ΢ΣΞཁ݅ • "QQ͸όϯυϧ಺Ͱ׬͍݁ͯ͠Δඞཁ͕͋Γ·͢ɻଞͷ"QQΛؚΊɺࢦఆ͞Εͨίϯςφ ΤϦΞ֎ʹର͢ΔσʔλͷಡΈॻ͖ɺ·ͨ͸"QQͷಛ௃΍ػೳΛಋೖͨ͠Γมߋͨ͠Γ͢Δίʔ υΛΤϦΞ֎͔Βμ΢ϯϩʔυɺΠϯετʔϧɺ࣮ߦ͢Δ͜ͱ͸ڐՄ͞Ε·ͤΜɻ࣮ߦܗࣜͷ ίʔυͷֶश΍։ൃɺֶੜʹΑΔςετΛ໨తͱͨ͠ڭҭ༻"QQͰ͸ɺίʔυ͕ଞͷ໨తͰ࢖༻ ͞Εͳ͍ͱ͍͏ɺݶΒΕͨঢ়گͰͷ࢖༻ʹݶΓɺίʔυͷμ΢ϯϩʔυ͕ڐՄ͞ΕΔ৔߹͕͋Γ ·͢ɻ͜͏ͨ͠"QQͰ͸ɺϢʔβʔ͕"QQ্ͰιʔείʔυͷશମΛ֬ೝ͠ɺฤूͰ͖Δ͜ͱΛ ڐՄ͓ͯ͘͠ඞཁ͕͋Γ·͢ɻ • 8FCΛӾཡ͢Δ"QQͰ͸ɺద੾ͳ8FCLJUϑϨʔϜϫʔΫͱ8FC,JU +BWBTDSJQUΛ࢖༻͢ Δඞཁ͕͋Γ·͢ɻ

"QQMF͸ଞͷϓϥοτϑΥʔϜͷ໊લΛΞϓϦʹ͚ͭΔ͜ͱΛڐՄ͍ͯ͠ͳ͍͠ɺ IUNMΛϨϯμϦϯά͢ΔͨΊʹ͸8FCLJUͱ+BWBTDSJQU $PSFҎ֎ͷ࣮૷΋ڐՄ͍ͯ͠ͳ͍ $ISPNFɺ'JSFGPY 0QFSB &EHF ͦͷଞ༷ʑͳϒϥ΢β͕"QQ4UPSFʹ͋Γ·͕͢ɺ *04ϒϥ΢βͷ࣮ମ͸͢΂ͯ4'4BGBSJ7JFX$POUSPMMFS 8,8FCWJFX 6*8FC7JFX EFQSFDBUFE ͷ ͍ͣΕ͔ 4BGBSJ *& ౳ͷϒϥ΢β͕%PDVNFOU7JFXFSͱͯ͠ਐԽ͖ͯͨ͠தɺ J04Ҏ֎Ͱͷ$ISPNF͸ผͷԿ͔Λ໨ࢦͯ͠ਐԽ͖͍ͯͯ͠Δ

"QQMF͸ଞͷϓϥοτϑΥʔϜͷ໊લΛΞϓϦʹ͚ͭΔ͜ͱΛڐՄ͍ͯ͠ͳ͍͠ɺ IUNMΛϨϯμϦϯά͢ΔͨΊʹ͸8FCLJUͱ+BWBTDSJQU $PSFҎ֎ͷ࣮૷΋ڐՄ͍ͯ͠ͳ͍ $ISPNFɺ'JSFGPY 0QFSB &EHF ͦͷଞ༷ʑͳϒϥ΢β͕"QQ4UPSFʹ͋Γ·͕͢ɺ J04ϒϥ΢βͷ࣮ମ͸͢΂ͯ4'4BGBSJ7JFX$POUSPMMFS 8,8FCWJFX 6*8FC7JFX EFQSFDBUFE ͷ ͍ͣΕ͔ 4BGBSJ *& ౳ͷϒϥ΢β͕%PDVNFOU7JFXFSͱͯ͠ਐԽ͖ͯͨ͠தɺ J04Ҏ֎Ͱͷ$ISPNF͸ผͷԿ͔Λ໨ࢦͯ͠ਐԽ͖͍ͯͯ͠Δ .PCJMF4BGBSJ͸ʁ

MobileSafariは︖ WebKit Feature Status https://webkit.org/status/ Service Workers A method for browsers to run JavaScript in the background to handle network requests and manage cached responses. Service Workers offers a replacement for Application Cache.

MobileSafariは︖ WebKit Feature Status https://webkit.org/status/ Service Workers A method for browsers to run JavaScript in the background to handle network requests and manage cached responses. Service Workers offers a replacement for Application Cache. ↑ Service WorkersはApplication Cacheに代わるものを提供 確かにそうだけど、なんか思ってるのと違う

.PCJMF4BGBSJʹ4FSWJDF8PSLFST͕࣮૷͞Εͨͷ͸େ͖ͳาͰͨ͠ɻ ͔͠͠ɺҎԼͷ"1*͕ະ࣮૷ #BDLHSPVOE4ZOD 1VTI"1* ")4΋Ͱ͖ͳ͍

.PCJMF4BGBSJʹ4FSWJDF8PSLFST͕࣮૷͞Εͨͷ͸େ͖ͳาͰͨ͠ɻ ͔͠͠ɺҎԼͷ"1*͕ະ࣮૷ #BDLHSPVOE4ZOD 1VTI"1* ")4΋Ͱ͖ͳ͍ ͜Ε͸ଵຫͱ͔Ͱ͸ͳ͘ɺ.PCJMF4BGBSJ͕%PDVNFOU7JFXFS͔ͩΒ J044BGBSJʹ͸1VTI͕དྷͳ͍ͷ͸ɺ"QQMF͕4BGBSJΛ%PDVNFOU7JFXFSͱҐஔ͚͍ͮͯΔ͔Β

.PCJMF4BGBSJʹ4FSWJDF8PSLFST͕࣮૷͞Εͨͷ͸େ͖ͳาͰͨ͠ɻ ͔͠͠ɺҎԼͷ"1*͕ະ࣮૷ #BDLHSPVOE4ZOD 1VTI"1* ")4΋Ͱ͖ͳ͍ ͜Ε͸ଵຫͱ͔Ͱ͸ͳ͘ɺ.PCJMF4BGBSJ͕%PDVNFOU7JFXFS͔ͩΒ J044BGBSJʹ͸1VTI͕དྷͳ͍ͷ͸ɺ"QQMF͕4BGBSJΛ%PDVNFOU7JFXFSͱҐஔ͚͍ͮͯΔ͔Β ʢ %PDVNFOU7JFXFSʹඞཁͳ͍ػೳ͸ɺ4FSWJDF8PSLFSTҎ֎ͷ෦෼͔Β΋஫ҙਂ͘औΓআ͔Ε͍ͯΔͱࢥ͍·͢ʣ

.PCJMF4BGBSJʹ4FSWJDF8PSLFST͕࣮૷͞Εͨͷ͸େ͖ͳาͰͨ͠ɻ ͔͠͠ɺҎԼͷ"1*͕ະ࣮૷ #BDLHSPVOE4ZOD 1VTI"1* ")4΋Ͱ͖ͳ͍ ͜Ε͸ଵຫͱ͔Ͱ͸ͳ͘ɺ.PCJMF4BGBSJ͕%PDVNFOU7JFXFS͔ͩΒ J044BGBSJʹ͸1VTI͕དྷͳ͍ͷ͸ɺ"QQMF͕4BGBSJΛ%PDVNFOU7JFXFSͱҐஔ͚͍ͮͯΔ͔Β ʢ %PDVNFOU7JFXFSʹඞཁͳ͍ػೳ͸ɺ4FSWJDF8PSLFSTҎ֎ͷ෦෼͔Β΋஫ҙਂ͘औΓআ͔Ε͍ͯΔͱࢥ͍·͢ʣ ॳظͷ"OESPJEʹ$ISPNF͕৐Βͳ͔ͬͨͷ΋ɺ౰࣌ͷ"OESPJEʹඞཁͩͬͨͷ͸ %PDVNFOU7JFXFSͱͯ͠ͷϒϥ΢β͔ͩͬͨΒʁ

Q1. お使いのブラウザは以下のどちらですか？ • アプリケーションのプラットフォーム • DocumentViewer

Q1. お使いのブラウザは以下のどちらですか？ • アプリケーションのプラットフォーム • DocumentViewer Q2. 公開しようとしているものは以下のどちらですか？ • アプリケーション • ドキュメント

Q1. お使いのブラウザは以下のどちらですか？ • アプリケーションのプラットフォーム • DocumentViewer Q2. 公開しようとしているものは以下のどちらですか？ • アプリケーション • ドキュメント こういった観点での整理もアリだと思います。

Native実装かWeb実装かの選択基準の⼀つとして 開発しようとしているものが アプリケーションならNative、 DocumentならWebView、 というスタンス

Native実装かWeb実装かの選択基準の⼀つとして 開発しようとしているものが アプリケーションならNative、 DocumentならWebView、 というスタンス で、PWAだったら︖

PWAの位置づけについて • ⽈く、「NativeのようなUI」 • ⽈く、「Nativeに迫るパフォーマンス」

PWAの位置づけについて • ⽈く、「NativeのようなUI」 • ⽈く、「Nativeに迫るパフォーマンス」 「ネイティブアプリのようなもの」を作る⽅法︖ 「webエンジニアの⼯数だけで作れる⽅法」から「安いものを作る⽅ 法」になってしまわないか 「それだけコスト掛けるのならネイティブで」という話に・・・ /BUJWFͱൺֱͨ͠ݴઆͰ͸ͳ͘ɺ 8FCϕʔε͔ͩΒͦ͜ͷϝϦοτΛߟ͍͑ͨ

PWAΛʮ͍҆΋ͷΛ࡞Δಓ۩ʯʹͨ͘͠ͳ͍

⽬指す⽅向として NativeAppはNativeAppで「モバイルに適したUX」を⽬指している MobileWebはNativeAppを⽬指すのではなく、⾃らの⽴ち位置から 「モバイルへの最適化」を⽬指したい

•όΠφϦͷܰ͞ •5XJUUFSͷ৔߹ •J04.# •"OESPJE.# •18",C •͙͢6*ΛఏڙͰ͖Δʂ •"OESPJEͰ΋࠷ۙ"QQ#VOEMF͕࿩୊Ͱ͢Ͷʂ ωΠςΟϒΞϓϦ΋ࠓޙܰ͘ͳ͍ͬͯ͘ •Πϯετʔϧޙ΋୺຤ͷετϨʔδΛѹഭ͠ͳ͍ϝϦοτ͸ඇৗʹେ͖͍ •όΠφϦαΠζ͸ʮઃఆʯΞϓϦͰҰ໨ྎવ •Ϣʔβʔ͸େ͖ͳΞϓϦ͔Β࡟আ͢Δ •Ϧʔνͷ޿͕Γ •ΧδϡΞϧʹ͓ࢼ͠Ͱ͖Δ •ಉ͘͡"OESPJEͰ͸ *OTUBOU"QQT͕࿩୊ •৹ࠪෆཁ •αʔϏε͕ϓϥοτϑΥʔϚʔͷ౎߹ʹࠨӈ͞Εͳ͍ PWAのアドバンテージ 検索後のUXはAndroidも進化していますが、PWAの方にアドバンテージを感じません？

1$ϋʔυ΢ΣΞͷҧ͍Λ04͕ٵऩ͠ɺ04ͷҧ͍Λ7.Ͱ͋Δϒϥ΢β͕ٵऩ͠ɺ ͻͱͭͷ8FCΞϓϦέʔγϣϯ͕ԿॲͰ΋ಈ͍ͯผͷϋʔυ΢ΣΞͱܨ͕Γ 63-͚ͩͰڞ༗͞ΕΔɺͦΜͳະདྷ PC Hardware OS Browser as VM Application! Other hardware アプリケーションの未来としては Share with (only)URL!

ご清聴ありがとうございました！