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

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

### PWAに関する個人的サイトまとめ
- [WebサイトをPWA（Progressive Web App）に変える簡単な手順（翻訳）](https://techracho.bpsinc.jp/hachi8833/2017_12_25/49054) 
- [WordPress を PWA に！ホーム画面への追加機能を実装](https://firstlayout.net/customize/entire-site/app-install-banners-to-wordpress/)
- [PWA勉強会第1回](http://tomoko-tsubasa.hateblo.jp/entry/pwa-for-beginners-1-report)
- [PWA勉強会第2回](http://tomoko-tsubasa.hateblo.jp/entry/pwa-for-beginners-2-report)

# WebでアプリなPWA、実際に本気でプロダクトを作ってみて見つけた悩み処
## プロフィール
- [Shohei Koyamaさん](https://connpass.com/user/ShoheiKoyama/)
- 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を簡単に使える方法！！』」](https://connpass.com/user/daisu_yamazaki/)

## PWAを気軽に体験
「遅咲きエンジニア 山崎」で調べると検索に出てきます。

[Twitter](https://twitter.com/daisu_yamazaki)

## 今回のポイント
- WEBAPP MANIFEST
- SERVICE WORLER

## [Can I Use](https://caniuse.com/#search=service%20wor)
フロントエンドでは結構有名なサイト 
- PWAは殆どのブラウザで対応可能
- 最初からPWA化するつもりで作らないと辛い
- すでにできているものをPWA化するのはすごい辛い。思い通りに行かない。
- 大きいサイトでは難しい

## 作ったサイト 

- **[Lean Canvas](http://venezia-works.sakura.ne.jp/)**
    -  大体3週間で完成。1週間でモックアップ、２週間で実装
    - 全て１人で作っている
- アプリを使って自分のアイディアを整理したい。
    - Lean CanvasのHowtoを出しながら教えてくれる。
    - SPからもUX高い
    - 同じビジネスモデルを勝手に検索してくれる。上位５０件。
- **[WebappmanifestとServiceworkerに関する資料](https://www.slideshare.net/venezia7/pwa-beginner-webappmanifest-serviceworker)**
- デベロッパーツールでPWAかどうかを確かめたいときは、Applicationの Manifest, service worker clear storageが上位にあることを確認する。
    - マニュフェスト...PWAをしていることの証。ホーム画面に追加するときの設定を表してみる。manifest.json
        - Start URL...ドキュメントルートの設定。SPでお気に入り　設定ファイルで設定。
        - <link rel="manifest" href="~"> を書くだけでいい
        - 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の紹介](https://speakerdeck.com/tipo159/introductory-talk-about-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でメッセージを送ることができる

## [サンプルサイトがあります。](https://github.com/ykyk1218)


# 「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の違い