PWA_Toolkitについて.pdf

Transcript

1. IonicとPWA Toolkitについて @scrpgiil
2. 自己紹介 ・榊原宏祐 @scrpgil ・株式会社キネカ 　・マッチングアプリの開発＆運営 ・技術分野：Ionic、Go、Rails ・得意分野：アスキーアート
3. 技術書典６で本出しました
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. おわり