Dart で PWA  (1) オフラインアプリ化

Dart Advent Calendar 2018 の　4日目の記事です。


当初の予定では、「Flutter Engine で 使われている ビルドシステム GN & Ninja について」 を書こうとしていましたが、やめました。

ニッチすぎて情報がないかと思っていましたが、あったので、やめました。

pwa package　と service_worker package について、紹介していきます。

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 


# PWAとは

https://developers.google.com/web/progressive-web-apps/

```


Progressive Web Apps are user experiences that have the reach of the web, and are:

Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.
Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
Engaging - Feel like a natural app on the device, with an immersive user experience.
This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.

```

ということなので、ネイティブアプリのような感覚で扱えるWebページでいう感じですね。


### [1] オフラインでも表示できる
ネットワークに繋がらないい状態でも、Webページを表示したら、操作したりできるようになります。!!

これは便利です。
アプリのように、不要な通信を行わないという意味にもなります。
サーバー運用費も安く押さ得ることができそうですね..


### [2] Home画面から起動できる

アプリのように、Home画面から起動することができます。、
https://developers.google.com/web/fundamentals/app-install-banners/

https://medium.com/@firt/android-oreo-takes-a-bite-out-of-progressive-web-apps-30b7e854648f

まさに、ネイティブアプリのよう

### [3] 通知ができる

登録してくれたユーザー、通知を送ることができます。
https://developers.google.com/web/fundamentals/push-notifications/

と、基本的な機能は、だいたい　揃っており。だいたいのアプリを置き換えることが可能です。
また、 Play Store、 AppStore を通す必要がなく、アプリをインストールさせることができます。



# Dart で PWAを使ってみよう。

今回のサンプルは、
https://github.com/kyorohiro/memo_pwa_2018/tree/master/00_pub_run_pwa_with_dart
です。


### 秒でオフライン化してみる

#### PWA対象の Angular Page を作る

PWAなしの、ページを作成する

```
> stagehand web-angular
> pub get
> webdev serve

```

Angular の Template が　表示されます。

<img width="632" alt="スクリーンショット 2018-12-03 20.27.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/54192/3b92a0ff-c52f-1fe6-aee5-525ff72c6c06.png">


こんな感じ。



#### オフラインアプリ化する

```:pubspec.yaml

dependencies:
  ..
  .
  pwa: 
    git: 
      url: https://github.com/kyorohiro/pwa.git

```
pubspec.yaml に追加する


```:commandline
> pub get
> pub run pwa
```

pwa用のコードを自動する。


```:main.dart
import 'package:angular/angular.dart';
import 'package:demo/app_component.template.dart' as ng;
import 'package:pwa/client.dart' as pwa;

void main() {
  runApp(ng.AppComponentNgFactory);
  pwa.Client client = new pwa.Client(scriptUrl: './pwa.dart.js');
}
```

pwaのコードを呼び出すための機能を追加する。
'new pwa.Client'　を追加すると、
これより、オフラインアプリとして動作するようになります!!




## 確認してみる。 Chromeで

```:commandline
> webdev serve
```

一度、起動すると、オフラインで動作します。
削除したいときは、



```
chrom://inspect
```

とかで、動作している。ServiceWorkerを削除してください。



# REF

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 で 実現する方法を紹介していきいます。