PWA_Toolkitについて.pdf

 PWA_Toolkitについて.pdf

8673a339e4002704b42bc66c43c65445?s=128

神撃のIonicッカー

April 17, 2019
Tweet

Transcript

  1. IonicとPWA Toolkitについて @scrpgiil

  2. 自己紹介 ・榊原宏祐 @scrpgil ・株式会社キネカ  ・マッチングアプリの開発&運営 ・技術分野:Ionic、Go、Rails ・得意分野:アスキーアート

  3. 技術書典6で本出しました

  4. アジェンダ ・Ionicについて ・PWA Toolkitについて ・IonicからみたPWAの使用事例

  5. Ionicの歴史(ざっくり) ・Ionic1(2013〜) angularJS/Cordovaで作られたモバイルフレームワーク ・Ionic2/3(2016〜) Angular/Cordovaで作られたモバイルフレームワーク PWA対応が追加(ServiceWorker、manifest.json) ・Ionic4(現行Ver) WebComponentsで作られたUIフレームワーク アプリ化はCordovaからCapacitorへ移行 デフォルトでPWA対応(ServiceWorker、manifest.json)

  6. Ionic 4について ・WebComponentsベースで表示が爆速 ・React、Vueでも使えるようになった ・PWAファースト(所管)

  7. PWA Toolkit https://ionicframework.com/pwa/toolkit

  8. PWA Toolkitの特徴 ・デフォルトでWorkbox(ServceWorker)が設定済み ・デフォルトで全てのアセットをキャッシュしている ・デフォルトでmanifest.jsonが入ってる ・Ionicが入ってるのでモバイルUIやルーティングが対応済み これからPWA始めるなら圧倒的敷居の低さ

  9. PWA Toolkitの始め方 npx create-stencil ionic-pwa 必要なのはこのコマンドだけ

  10. こんな感じのスタータープロジェクトが立ち上がる iOS Android

  11. IonicのPWA使用事例

  12. PokemonGoのサポートアプリ ・Pokemon Goのサポートアプリの開発 ・アプリが4万ダウンロード ・RedditでポケモンGoユーザーに宣伝 ・ユーザーを十分に獲得してからアプリリリース https://blog.ionicframework.com/how-i-built-launched-an-app-in-2-weeks-to-40000- users-with-ionic/

  13. そのほかの資料 ・無料のPWAガイドがでています。  ・PWAの機能や仕組み、どう活用するかが書いてあ る ・IonicブログでPWAの記事が上がる  ・文章がエモくて面白い  ・https://blog.ionicframework.com/

  14. おわり

  15. None