Dart で PWA (2) Home に登録

[前回](https://qiita.com/kyorohiro/items/4ab34f17a5eec8ca811c)の続きです!!

Index
(1) [Hello World PWA](https://qiita.com/kyorohiro/items/4ab34f17a5eec8ca811c)
(2) [Add to Home](https://qiita.com/kyorohiro/items/33303398bac6e2be0887)
(3) [Standard Web Notification](https://qiita.com/kyorohiro/items/bb7736ae86fc1113ca80)
(4) [Hook request and Do original processing](https://qiita.com/kyorohiro/items/d76c3cf96f4e76ae70ec)
(5) [Post message](https://qiita.com/kyorohiro/private/cbd6ed32d13b0fc43021)

Code
https://github.com/kyorohiro/memo_pwa_2018 



アプリ と ブラウザー のどちらが覇権をとるかという問題は、過去からありました。
ひと昔前だと、「Windows, Macromedia Flush, Java, Browser(AJAX)」 とかでしょうか?

iOSが登場して、構図が一変しましたが、今後どうなるかはわかりません。


Dart界隈でこの流れをとるなら、

```
Flutter vs PWA 
Flutter vs Anguar Dart 
```

でしょうか?


まぁ、 Flutter は　Webも取り込み流れだったりしますが..

https://developers.googleblog.com/2018/12/flutter-10-googles-portable-ui-toolkit.html

https://medium.com/flutter-io/hummingbird-building-flutter-for-the-web-e687c2a023a8


# □ Home 画面から起動できるようにする (Chrome)

https://github.com/kyorohiro/memo_pwa_2018/tree/master/00_pub_run_pwa_with_dart

```
次の情報が記述されたウェブアプリ マニフェスト ファイルが存在する。
short_name（ホーム画面で使用）
name（バナーで使用）
192x192 の png アイコン（アイコンの宣言には MIME タイプ image/png の指定が必要）
読み込み先の start_url
サイトに Service Worker が登録されている。
HTTPS 経由で配信されている（Service Worker を使用するための要件）。
2 回以上のアクセスがあり、そのアクセスに 5 分以上の間隔がある。
``` 
ref [add to home screen prompt](https://developers.google.com/web/fundamentals/web-app-manifest/)

ということなので、試してみましょう。




### [H-1] manifest.json を作成する

```json:manifest.json
{
  "name": "demo",
  "short_name": "demo",
  "description": "A web app that uses AngularDart Components",
  "lang": "en-US",
  "start_url": "index.html?launcher=true",
  "scope": "/",
  "display": "standalone",
  "orientation": "any",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "launcher-icon-1x.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}
```

### [H-2] index.html で Manifest を読み込むようにする

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="manifest" href="manifest.json" />
    <link rel="apple-touch-icon" sizes="48x48" href="launcher-icon-1x.png">
    <link rel="apple-touch-icon" sizes="96x96" href="launcher-icon-2x.png">
    <link rel="apple-touch-icon" sizes="192x192" href="launcher-icon-4x.png">
    <meta name="theme-color" content="#ffffff" />
    <title>00_zero_pwa_with_dart</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" type="image/png" href="favicon.png">
    <script defer src="main.dart.js"></script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>
```

### [H-3] Icon 画像を用意する

![ic_launcher.png](https://qiita-image-store.s3.amazonaws.com/0/54192/e1793d61-bf61-b810-eb30-1191615a0d8d.png)



### [H-4] 動作確認してみる

1 サーバーを起動

```
webdev serve --release
```


2 開く

```
localhost:8080 にアクセス
```

<img width="503" alt="スクリーンショット 2018-12-04 3.40.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/54192/b44ff0cb-14e2-abab-fa3e-604daded21dd.png">



※ 古いServiceWorkerを削除したい場合

```
右クリック->検証->Application->ServiceWroker より、古いのを削除
```

※ 5分待てない場合

```
右クリック->検証->Application->Manifest.json より、インストール
```


####  ref
https://developers.google.com/web/fundamentals/web-app-manifest/
https://developers.google.com/web/fundamentals/app-install-banners/

2018年12月の時点の、動くように改造した物を、以下に起きましたしました。
https://github.com/kyorohiro/memo_pwa_2018
https://github.com/kyorohiro/pwa
https://github.com/kyorohiro/service_worker


# PS
https://github.com/isoos/pwa が masterブランチで、
一部、動かなかったので、フォークして修正しています。
https://github.com/kyorohiro/pwa

今回は、修正したものを使用しています。



## 次回
Notification とか ServiceWorker とか、
Dart で 実現する方法を紹介していきいます。