Upgrade to Pro — share decks privately, control downloads, hide ads and more …

実践PWA 2020 / charitycon_oki2020

Chinen
June 21, 2020

実践PWA 2020 / charitycon_oki2020

Chinen

June 21, 2020
Tweet

More Decks by Chinen

Other Decks in Programming

Transcript

  1. 実践PWA 2020

    2020/06/21 まぁし / 知念 昌史


    View Slide

  2. 今日の話

    1. PWAの動向2020

    2. PWAとは

    3. クライアントワークでのPWA

    4. PWAの実装方法

    (質問・感想をツイートしてね! #charitycon_oki #roomB )


    View Slide

  3. 参加者アンケート


    View Slide

  4. 知念 昌史 / まぁし

    株式会社TAM フロントエンドエンジニア

    ● 沖縄出身、大学卒業後に就職を期に東京へ

    ● 未経験からWeb業界へ転職:美容師→エンジニア

    ● 2019年に沖縄へ戻りそのままTAMでリモート勤務

    ● リモートで新人教育を担当中

    ● 技術コミュニティ運営

    ○ PWA Night(東京)

    ○ v-okinawa(沖縄)

    ● この登壇が終わったらポケモン買う(剣盾)


    View Slide

  5. 今日の話

    1. PWAの動向2020

    2. PWAとは

    3. クライアントワークでのPWA

    4. PWAの実装方法

    (質問・感想をツイートしてね! #charitycon_oki #roomB )


    View Slide

  6. Google Trends


    View Slide

  7. 世界


    View Slide

  8. 日本


    View Slide

  9. 日本でPWAがトレンドだよ!

    (ツイートのチャンス!! #charitycon_oki #roomB )


    View Slide

  10. 今日の話

    1. PWAの動向2020

    2. PWAとは

    3. クライアントワークでのPWA

    4. PWAの実装方法

    (質問・感想をツイートしてね! #charitycon_oki #roomB )


    View Slide

  11. PWAとは・・Progressive Web App


    Progressive = 前進する、進歩的、進行形

    なウェブアプリ

    WEB

    PWA
    Webアプリ

    Webサイト
    (静的)
    Android
    iOS
    ネイティブアプリ


    View Slide

  12. 新しい言語ではない

    新しいフレームワークではない


    View Slide

  13. ブラウザとJavaScriptでできること


    View Slide

  14. 技術的な目線では・・・?

    ● HTTPSで提供していること

    ● Service Worker

    ● マニフェストファイル

    機能的な目線では・・・?

    ● ホーム画面にインストールできる 

    ● オフライン対応

    ● プッシュ通知


    View Slide

  15. どこまでやったらPWA?


    View Slide

  16. チェックリスト

    What makes a good Progressive Web App?

    https://web.dev/pwa-checklist/

    できるところからでOK!


    1. Capable・・・Webでできる

    2. Reliable・・・安定・信頼性

    3. Installable・・・インストール可能


    View Slide

  17. View Slide

  18. PWAの本質とは


    View Slide

  19. より良いWeb体験を作っていくこと

    → PWA


    View Slide

  20. 今日の話

    1. PWAの動向2020

    2. PWAとは

    3. クライアントワークでのPWA

    4. PWAの実装方法

    (質問・感想をツイートしてね! #charitycon_oki #roomB )


    View Slide

  21. クライアントワークでのPWA

    さまざまなご相談をいただいています。

    ● BtoB 部品メーカーのタイ向け商材検索アプリ

    ● 脳疾患患者向けの情報コンテンツPWA

    ● 銀行系アプリのPWA化・R&D協力(調査レポート、デモサンプル開発)

    ● 宝石販売の新規サービス開発

    ● カラオケ関連サービスのマイページ機能のPWA化

    ● アルバイト求人ポータルのPWA化

    ● 海外学生向けのラーニングアプリ


    View Slide

  22. 無理にPWAにする必要は無い


    View Slide

  23. 基本的な設計ができていること

    Webアプリとしての設計ができていれば、付加価値としてPWAを追加できる

     → ホームに追加、オフラインページの追加、キャッシュによる表示高速化など

     → 既存のウェブサイトがあればすぐにできる

    PWAありきの設計にしてしまうと、ブラウザ対応でネックになることも

     → Safari、IEなど

    ノーコードでできるサービスもアリ

     → Glide

     → WordPressプラグインもある


    View Slide

  24. 導入しやすいプロジェクト

    ● 業務系アプリ・社内ツール(ブラウザ・使用状況が限定される)

    ● PoC(実証実験)

    ● スタートアップ

    ● ウェブサービス(情報・教育・飲食、スポーツ、音楽)

    ● ECサイト

    ● 会員サイト、マイページ、コミュニティサイト


    View Slide

  25. ネイティブアプリから乗り換えるケースも

    ● ネイティブアプリのダウンロードが少ない

    → Web(PWA)の方が検索してもらえる

    ● 更新・改修もiOS/Androidとコストが二重にかかる、PDCAが遅くなる

    → Web(PWA)ならワンソース、レスポンシブでマルチデバイス対応

    ● OSのバージョンアップ、改修のたびに審査が必要(費用も)

    → 審査不要ですぐリリース可能

    ● iOS/Androidアプリエンジニアよりも、

    JavaScriptができるWebエンジニアの方がリソースを揃えやすい


    View Slide

  26. 今日の話

    1. PWAの動向2020

    2. PWAとは

    3. クライアントワークでのPWA

    4. PWAの実装方法

    (質問・感想をツイートしてね! #charitycon_oki #roomB )


    View Slide

  27. Webサイトを

    ホーム画面に

    追加できるようにしてみよう


    View Slide

  28. ホーム画面へインストールできるようにする

    1. manifest.jsonを追加

    2. iOS用にheadタグに設定を追加

    3. Service Workerを登録


    View Slide

  29. HTMLを用意


    View Slide

  30. manifest.jsonを作成

    manifest.json


    View Slide

  31. headタグで manifest.jsonを読み込み


    View Slide

  32. headタグにiOS用の設定


    View Slide

  33. ServiceWorkerの設定ファイルを作成

    sw.js


    View Slide

  34. ServiceWorkerを登録するJSファイルを作成

    script.js


    View Slide

  35. jsファイルを読み込み


    View Slide

  36. これでホーム画面に追加OK!


    View Slide

  37. できるところから少しずつ取り組もう

    (Progressive)


    View Slide

  38. PWA Nightで事例を教えて

    毎月、第3水曜に勉強会イベント開催中!! 


    View Slide

  39. PWAで困ったらTAMに相談ください


    View Slide

  40. 今日の話

    1. PWAの動向2020

    2. PWAとは

    3. クライアントワークでのPWA

    4. PWAの実装方法

    (質問・感想をツイートしてね! #charitycon_oki #roomB )

    ぷわん

    TAMくん


    View Slide

  41. ありがとうございました!!!

    Twitter

    @chocodogmagic

    お気軽にフォローどうぞ!

    毎月、第3水曜の

    PWA Nightも

    よろしくね!

    「実践PWA」BOOTHで検索 


    View Slide