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

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

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

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

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

Index
(1) Hello World PWA
(2) Add to Home
(3) Standard Web Notification
(4) Hook request and Do original processing
(5) Post message

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

PWAとは

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/

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

[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 が　表示されます。

こんな感じ。

オフラインアプリ化する

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