Progressive Web Appsで自作アプリを配信

1. 青木 宏樹
P r o g r e s s i v e W e b A p p s
で 自 作 ア プ リ を 配 信

2. 楽器
2008 〜 ギター
2019 〜 タブラ
趣味
青木 宏樹

3. 2013.4 〜 Sier新卒入社
2018.6 〜 メーカー中途入社 now!
職歴
青木 宏樹

4. PWA
Progressive
Web
Apps とは？

5. GoogleがPWAを提唱する背景にある
Webマーケティングの課題

6. Webアプリ/サイトは
気軽に見てもらえるが
読み込み速度に難あり

7. ページの読み込みが遅いと
閲覧者は去ってしまう・・

8. でもネイティブアプリを
インストールしてもらうのは大変・・

9. スマホで使えるアプリの種類
Webアプリ
(Webサイト)
ネイティブアプリ
気軽に使えるが
動きは遅め
スムーズに動くが
インストールしてもらえない
ハイブリット
アプリ
動きは遅め

10. スマホで使えるアプリの種類
Webアプリ ネイティブアプリ
読込が早いWebアプリ！
PWA
ハイブリット
アプリ
動きは遅め

11. インストール
できる!!!
プッシュ通知
を送れる!!!
オフラインで
閲覧できる!!!
早いだけじゃない！
Webアプリなのに..
PWAは

12. 早いだけじゃない！
Webアプリなのに..
プッシュ通知
(iOS未対応 )
インストール
できる!!!
オフラインで
閲覧できる!!!
PWAは

13. 事例
日経新聞

14. ストアを介さずに
配信できる
JavaScriptで
書ける
開発者にとっての嬉しさは？
iOS/Android
共通のコードで良い！
iOS個人開発ライセンス
99＄/年が不要に！
既存のWebアプリを
モバイルアプリ化できる！
審査の手間
がなくなる！

15. PWAで
僕が欲しかった
アプリを開発

16. 網棚の忘れ物を防止する
ためのアプリ
網棚に安心して手荷物を
置くためのアプリ

17. Content itself is what the end-user
derives value from also can refer to
the information provided through the
medium, the way in which
Content B
網棚の抱える課題
Content itself is what the end-user
derives value from also can refer to
the information provided through the
medium, the way in which
Content A
https://ja.wikipedia.org/wiki/%E7%B6%B2%E6%A3%9A

19. 解決するには・・
どこに何を
置いたかを記録！
到着前に
お知らせ！

20. 解決するには・・
到着前に
お知らせ！
iOSでプッシュ通知できない
→ 別の方法を検討中
どこに何を
置いたかを記録！

21. amidana β
for me

22. 手荷物を追加できます
到着5分前にお知らせする機能
(Androidのみの機能となりま
す)

23. 「ホームに追加」で
インストールできます

24. 使ったフレームワーク・サービス
Amazon Simple Storage
Service
Amazon CloudFront OneSignal
Nuxt.js
https://ja.nuxtjs.org/design/
サイト公開 プッシュ通知
フロントエンド全般 マテリアルデザイン
Vuetify

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