前回の続きです!!
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
アプリ と ブラウザー のどちらが覇権をとるかという問題は、過去からありました。
ひと昔前だと、「Windows, Macromedia Flush, Java, Browser(AJAX)」 とかでしょうか?
iOSが登場して、構図が一変しましたが、今後どうなるかはわかりません。
Dart界隈でこの流れをとるなら、
Flutter vs PWA
Flutter vs Anguar Dart
でしょうか?
まぁ、 Flutter は Webも取り込み流れだったりしますが..
□ Home 画面から起動できるようにする (Chrome)
次の情報が記述されたウェブアプリ マニフェスト ファイルが存在する。
short_name（ホーム画面で使用）
name（バナーで使用）
192x192 の png アイコン（アイコンの宣言には MIME タイプ image/png の指定が必要）
読み込み先の start_url
サイトに Service Worker が登録されている。
HTTPS 経由で配信されている（Service Worker を使用するための要件）。
2 回以上のアクセスがあり、そのアクセスに 5 分以上の間隔がある。
ということなので、試してみましょう。
[H-1] 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 を読み込むようにする
<!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 画像を用意する
[H-4] 動作確認してみる
1 サーバーを起動
webdev serve --release
2 開く
localhost:8080 にアクセス
※ 古い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 で 実現する方法を紹介していきいます。