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
PWA_Toolkitについて.pdf
Search
scrpgil
April 17, 2019
0
1.9k
PWA_Toolkitについて.pdf
scrpgil
April 17, 2019
Tweet
Share
More Decks by scrpgil
See All by scrpgil
Firebase Realtime DB から ActionCable 移行のマネジメントの話
scrpgil
0
110
フレーム問題で考えてみるやる夫スレViewer
scrpgil
0
44
ChatGPTとLangChain さわってみた
scrpgil
0
110
久しぶりに ionic startしてみた
scrpgil
0
250
Ionic 6でWeb3やってみた
scrpgil
0
220
Ionic×Angularで作る ストーリーズ風UI
scrpgil
0
450
Angularで作るモバイルアプリ開発〜スタートアップの開発事情〜
scrpgil
0
660
夢のクロスプラットフォーム開発
scrpgil
0
380
Stencil JSについて
scrpgil
0
450
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Unsuck your backbone
ammeep
671
58k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Statistics for Hackers
jakevdp
799
220k
How STYLIGHT went responsive
nonsquared
100
5.9k
Transcript
IonicとPWA Toolkitについて @scrpgiil
自己紹介 ・榊原宏祐 @scrpgil ・株式会社キネカ ・マッチングアプリの開発&運営 ・技術分野:Ionic、Go、Rails ・得意分野:アスキーアート
技術書典6で本出しました
アジェンダ ・Ionicについて ・PWA Toolkitについて ・IonicからみたPWAの使用事例
Ionicの歴史(ざっくり) ・Ionic1(2013〜) angularJS/Cordovaで作られたモバイルフレームワーク ・Ionic2/3(2016〜) Angular/Cordovaで作られたモバイルフレームワーク PWA対応が追加(ServiceWorker、manifest.json) ・Ionic4(現行Ver) WebComponentsで作られたUIフレームワーク アプリ化はCordovaからCapacitorへ移行 デフォルトでPWA対応(ServiceWorker、manifest.json)
Ionic 4について ・WebComponentsベースで表示が爆速 ・React、Vueでも使えるようになった ・PWAファースト(所管)
PWA Toolkit https://ionicframework.com/pwa/toolkit
PWA Toolkitの特徴 ・デフォルトでWorkbox(ServceWorker)が設定済み ・デフォルトで全てのアセットをキャッシュしている ・デフォルトでmanifest.jsonが入ってる ・Ionicが入ってるのでモバイルUIやルーティングが対応済み これからPWA始めるなら圧倒的敷居の低さ
PWA Toolkitの始め方 npx create-stencil ionic-pwa 必要なのはこのコマンドだけ
こんな感じのスタータープロジェクトが立ち上がる iOS Android
IonicのPWA使用事例
PokemonGoのサポートアプリ ・Pokemon Goのサポートアプリの開発 ・アプリが4万ダウンロード ・RedditでポケモンGoユーザーに宣伝 ・ユーザーを十分に獲得してからアプリリリース https://blog.ionicframework.com/how-i-built-launched-an-app-in-2-weeks-to-40000- users-with-ionic/
そのほかの資料 ・無料のPWAガイドがでています。 ・PWAの機能や仕組み、どう活用するかが書いてあ る ・IonicブログでPWAの記事が上がる ・文章がエモくて面白い ・https://blog.ionicframework.com/
おわり
None