Edited at
DartDay 11

Dart の PWA package を試して見た

More than 1 year has passed since last update.

自分のProject では、なるたけ Dart を 利用するようにしています。

Dart で オフラインアプリを作る方法について調べて見ました。


code

code


index.html

<html>

<head>
<meta charset="utf-8">
<title>Dart PWA Hello</title>
<script defer src="main.dart" type="application/dart"></script>
<script defer src="packages/browser/dart.js"></script>
</head>

<body>
Hello!!
</body>
</html>



maind.dart

import 'package:pwa/client.dart' as pwa;

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



pwa.dart

void main() {

Worker worker = new Worker();

worker.offlineUrls = <String>[
"http://localhost:8000/",
"http://localhost:8000/index.html",
"http://localhost:8000/packages/browser/dart.js",
"http://localhost:8000/main.dart.js",
];

worker.run(version: "v0.0.1");
}


pub serve --port 8000

できました。

一度、読み込めば、オフラインでも動作するようになります。


Dart だと、 pwa.dart を自動生成してくれる

Dart だと、 pwa.dart を自動生成してくれる

これは、すごい、

code

pub run pwa

pub serve --port 8000

おー、生成されました。

Dartなら、作成したWebアプリを、簡単にオフラインアプリ化できそうですね


REF

https://pub.dartlang.org/packages/service_worker

https://github.com/isoos/pwa

https://news.dartlang.org/2017/03/making-dart-web-app-offline-capable-3.html


私のメモ

Memo PWA (0)

Memo PWA (2) Dart PWA Package