【増席しました!!40→60】PWA Beginners 勉強会 #3 に参加しました。2018/04/16(月)

所感、その他もろもろ

PWA導入のメリット

• AppleやGoogleの審査に通さなくて良い
  • iPhoneアプリ審査での111の禁止項目（意訳）や、App Store審査ガイドラインに従わなくていいとうこと。
  • 素早いリリースが可能になり、PDCAサイクルをより早く回せる。
• 開発コスト削減
• 運用/保守コスト削減
• 殆どのブラウザで対応可能であること
• LPO(ランディングページ最適化)に繋がる可能性がある。(アリババ、Twitter、楽天レシピの例など)
• アプリダウンロード促進のための広告費削減。ネイティブアプリをリリースしても、ダウンロードしてくれるかわからないようなサービスには有効かもしれない。
• どのサービスがPWAに向いているのかは、導入例などを見て要検討しなければならないと感じた。ユーザーに何を届けたいかを考え、どのようなサービスを目指すのかといったことをまず考えないと、PWAにする必要があったけ？となってしまうというShohei Koyamaさんのお話は身にしみた。

PWAに関する個人的サイトまとめ

• WebサイトをPWA（Progressive Web App）に変える簡単な手順（翻訳）
• WordPress を PWA に！ホーム画面への追加機能を実装
• PWA勉強会第1回
• PWA勉強会第2回

WebでアプリなPWA、実際に本気でプロダクトを作ってみて見つけた悩み処

プロフィール

• Shohei Koyamaさん
• Java
• グロースハック
• G's Academy...

PWAとは何か

「Webの体験を劇的に変えるもの」
宮沢さんの資料が秀逸なので、あとで参考にしましょう。

• 審査に通す必要がない
  • これが一番大きい
  • PDCAを早く回すことができる

「情報」< 「経験値」のほうが圧倒的に大事

• 経験からの着眼と思考
• 着眼点の提供 PWAってどうなの、これどうするの？ っていう問題は必ず出て来る。
• 導線？ どうやってユーザーに受け入れてもらう？　PWAの立ち位置は？

作ってみたサービス

COMPASS

• 旅行ガイドアプリ
  • ユーザーの好奇心にそった旅先の情報を提供

技術スタック

• PWA
• Vue.js
• Onsen UI

最初はSwiftとwebview。

審査のところで、審査に通らない決済が出てきた。

PWAにしたら解決するのでは？あとでURLを叩いてみよう

Questions

どうやってユーザーにPWA化してもらう？

• 画面上にHowToの画面を作る？
  • 別の技術の説明しないと行けない。
  • 一般のユーザーはPWAは知らない
  • 日本は半分がIOS。ユーザーが日本人だったらどうする？
• むしろ説明しなくていいのではないか?
  • 何回もアクセスするなら、これをホーム画面に追加しますかってなればいいのでは？
• 更新の方法
  • キャッシュの更新
  • WebのUX？AppのUX？
  • UXが違う-> UIも違ってきていいはず
    • native,web
    • native -> PWA
    • 最初からPWA
• ユーザーに何を届けたいかを考える。最初に考えつくされていないと、こういうことをユーザーに届けたい、というものをしっかりしないと、PWAにする必要があったけ？となってしまう。どの時間がもったいない。エンジニアはここの部分を強く抑えておこう。
• native と web　の境界はあやふやになっている。webでもappのような挙動。「APPがいい」というユーザーがいるのか？ユーザーはどっちだっていいはず。AppleとGoogleと関係のよう。
• 実際に、自分のサービスの事考えて、web,native,PWAを使い分けよう

「プログラミング愛してま〜す！『PWAを簡単に使える方法！！』」

PWAを気軽に体験

「遅咲きエンジニア 山崎」で調べると検索に出てきます。

Twitter

今回のポイント

• WEBAPP MANIFEST
• SERVICE WORLER

Can I Use

フロントエンドでは結構有名なサイト

• PWAは殆どのブラウザで対応可能
• 最初からPWA化するつもりで作らないと辛い
• すでにできているものをPWA化するのはすごい辛い。思い通りに行かない。
• 大きいサイトでは難しい

作ったサイト

• Lean Canvas
  • 大体3週間で完成。1週間でモックアップ、２週間で実装
  • 全て１人で作っている
• アプリを使って自分のアイディアを整理したい。
  • Lean CanvasのHowtoを出しながら教えてくれる。
  • SPからもUX高い
  • 同じビジネスモデルを勝手に検索してくれる。上位５０件。
• WebappmanifestとServiceworkerに関する資料
• デベロッパーツールでPWAかどうかを確かめたいときは、Applicationの Manifest, service worker clear storageが上位にあることを確認する。
  • マニュフェスト...PWAをしていることの証。ホーム画面に追加するときの設定を表してみる。manifest.json
    • Start URL...ドキュメントルートの設定。SPでお気に入り　設定ファイルで設定。
    • を書くだけでいい
    • name... アプリ名, short_name...ホーム画面の名前
    • 実際の内容などは後で公開されるので見てみよう
    • description... chromeでは無効、あまり意味がない
    • ホーム画面のアイコンをクリックした時にどこにアクセスするか
    • Applicationにmanifestが出ていない...設定ミス。記述が間違っていると表示されない。
    • ホームスクリーン　「ホーム画面に追加」のボタン。Start URLが間違っていると、表示されません（ホーム画面に追加が）。
    • macでもホームに追加はできる。
    • stand alone ... バッテリーが出るようなfacebook
    • full screen... 戻るボタンすら出ない
  • スマホにキャッシュさせておきたい。よく使う画像、jquery,cssとか。
  • navigator.serviceWorler.register(/sw.js); ... 別処理で動く。DOM処理はできない
  • service workerの中身
    • googleの中身をパクるだけで行けるが、海外に良いサンプルがあった。
    • キャッシュしたいリソース、定義しているところが2つ、2つ読み込んでいる
    • たった一つでもキャッシュできないと、処理が落ちる。
    • もしコケたとしても、（リソースが重たいから）最後にcashが生きていれば、本当にキャッシュしたいものをキャッシュさせることができる.
    • 定義したものは必ずないと、エラーで動かなくなってしまう。パスも、ファイル名も間違ってはいけない。
    • googleも海外も変わらない。
    • self.addEcentListerner('fech') cash.put...キャッシュに追加、新しく読み込んだものは全てキャッシュする。
    • rails, javaなどの、フレームワーク,,, ネットワークで何かあったらキャッシュするといったことはバグになりかねない。外しておいた方がいい
  • サンプルは 「sitepoint-editors/PWA-retrofit」に上がっています。(github)
• localhost PWA さっきのgithub　クローンすると、動くサンプルがある。
• off lineの処理とかも入っている。 勉強になる。

「HNPWAの紹介」

profile

tipo159さん

HNPWAの紹介

• ハッカーニュース(コンピュータ)

• HNPWA... 色々な実装のHNが載っている。29個の実装が紹介されている。

• TODOMVCの精神的な後継者

  • JSアプリケーション開発者

• 必須条件

  • Lighthouseで90/100委譲
  • webPage Test
  • ...など、仕様が色々決まっている。

• これはフレームワークの性能比較に用いては行けない。

  • WebPageTestでは、インタラクティブになるまでの時間は測定できない

• PRPLパターン ... PWAの新たな開発パターン

「ServiceWorker on Rails」

• service worker をrails上でどうやって扱えばいいか

プロフィール ykyk1218さん

• 小林yosikiさん
• swot分析

seiviceWorkerをRails上でどうやって使うか

• service-workersのgem入れればok

  • serciceWorkerのscope問題
  • ルーティングをよしなに変更してくれる

• webpackとservicewoekerとrails

  • webpaackerでビルドをしても配置がうまくいかない

• serviceWorkerはDOM操作できない。

  • clickメソッドで、service workerでメッセージを送ることができる

サンプルサイトがあります。

「PWAで嫁に怒られなくなった話」

プロフィール

• 株式会社アンダーススターズ 西野翔太(morix1500)さん
• Discordを活用した勉強会がある。

PWAで作ったサービス

• ゴミ出し通知くん
  -毎朝今日出すゴミの日をpush通知で教えてくれうr

  • vue.js iosはpush通知な
  • fire base hosting firebase realtimeDatabese cloud functions

• firebace ... httpフックができる awaできない

• swとフロントでデータを共有したい場合は, indexes DBを使わないと行けない.

• localstrage と indexedDBの違い