PWAで「出来ない」こと

class: center, middle

# PWAで「出来ない」こと

https://goo.gl/HwL1Us

<img src="img/moriken.png" alt="petamoriken" width="64" height="64">
        ピクシブアルバイト 森内建太（[petamoriken](https://github.com/petamoriken)）

---

# 自己紹介

福岡で悠々自適に暮らしています

ずっとフロントエンドばかりやってたが、最近は仕事で iOS アプリ、Rails も触っている  
        面白い効果があるサイトを作るのが好き

最近は WebAssembly のために Rust 勉強中  
        【宣伝】去年の弊社アドベントカレンダーの記事  
        [WebAssembly のスタンドアロンビルド](https://qiita.com/printf_moriken/items/9b41af9862a77fa092cf)

---

# 前提

> PWA はウェブの最新技術を分かりやすくフレーミングした言葉に過ぎません

> PWA 版の Instagram がどうなっているかというと画像のスワイプはできず、ボタンをタップしなければなりません

> これはユーザーの明示的なアクションなしにリソースをダウンロードしないようにするための工夫であり、ギガを気にするユーザーに快適に利用してもらうための意図的なデザインなのです

結局 PWA は来るの？来ないの？  
        https://blog.agektmr.com/2018/03/instagram-pwa.html より引用

---

# 概要

PWA はネイティブアプリの代替ではない  
        PWA を使うかどうかという**選択肢**が増えただけ

<center>
            <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">『スマホの』PWAについて色々話したんですが、やはり「ネイティブを置き換える銀の弾丸ではない」という認識で落ち着きましたWebの人からすれば「ここまでできる！すごい！」となりますが、ネイティブの人からすれば「なにこのおもちゃ」となるので適切な用途を模索する必要があるかと</p>— Atom（アトム） (@FromAtom) <a href="https://twitter.com/FromAtom/status/976851606170996736?ref_src=twsrc%5Etfw">2018年3月22日</a></blockquote>
        </center>

……というわけでネイティブアプリに出来て**ホーム画面に追加された** PWA で出来ないことをまとめました

※ 本来 PWA はスマートフォン限定ではありませんが、PC での比較はしません  
        ※ Safari は PWA ではなく Web Apps での話です

---

# 概要（おまけ）

Web App Manifest にも関連するネイティブアプリを示すフィールドが含まれているところからも代替を目的としていないことがわかる  
        むしろ PWA の代替としてネイティブアプリの指定をすることが出来る

```json
        "related_applications": [
            {
                "platform": "play",
                "url": "https://play.google.com/store/apps/details?id=com.example.app1",
                "id": "com.example.app1"
            }, {
                "platform": "itunes",
                "url": "https://itunes.apple.com/app/example-app1/id123456789"
            }]
        ```

https://developer.mozilla.org/ja/docs/Web/Manifest

---

# ストアにアプリを載せる

若いユーザーは Google Play, App Store を回遊してネイティブアプリをインストールする人もいるらしい  
        PWA だとそもそもアプリの存在を知ってもらえない可能性がある

ちなみに Windows 10 だと時期大型アップデートで Microsoft Store に PWA を並べられるようになる

Welcoming Progressive Web Apps to Microsoft Edge and Windows 10
        https://blogs.windows.com/msedgedev/2018/02/06/welcoming-progressive-web-apps-edge-windows-10/#KjicTSijtlttEhCp.97

Google Play にも欲しい……（まだ公式見解なし）

---

# 動画の自動再生

音声のある動画はタップされないと再生されない

Android ではホーム画面に追加されている場合は自動再生可能らしい

> Under the new policy media content will be allowed to autoplay under the following conditions:
        * On mobile, if the site has been added to the Home Screen by the user
        * On desktop, if the user has frequently played media on the site, according to the Media Engagement Index

Autoplay - The Chromium Projects  
        https://www.chromium.org/audio-video/autoplay より引用

---

# 物理バックボタンの挙動変更

History API を使ってある程度操作できるが挙動を変えることは出来ない（`beforeunload` イベントは使えるはず）

何も History に Push していない状態だと**前のアプリ**に戻る  
        Android としては普通の挙動

---

# 開いていたページに復帰する

Web App では一度ホーム画面に戻ってアプリに戻るとトップページに強制的に戻される  
        フォームに入力していたものは全部消える

> As it seems it's a limitation of Safari, a proposed solution is to persist your web apps state using Javascript and HTML5 localStorage. When your web app is launched, check for the persisted state and load it if available.

ios - Stop reloading of web app launched from iPhone Home Screen - Stack Overflow  
        https://stackoverflow.com/a/6943685/5169990 より引用

Safari が Web App Manifest 対応してくれたらもしかしたら解決する？

---
        class: center, middle

# 終わり

ユーザーのことをしっかり考えて PWA を採用するか考えていきましょう！  
        ご清聴ありがとうございました！