Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2019-12-12

PWAでなでしこプログラムをAndroidにインストールしてみるよ!(その2)

| 07:35

 も、取りあえず「インストール」できるようにするのが目的です。

 サービスワーカーを登録すると、ちゃんとアプリドロワーにも入ってくれちゃうってコトなんです!

【サービスワーカーの登録】

https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/Offline_Service_workers


kanzan_2.html

 なでしこの場合は、htmlの中に、直でコードを書くので、htmlファイルのheadにscriptタグで、サービスワーカーを登録するためのJavascriptの呪文を入れます。

<script>
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/pwa-test/2/sw.js');
}
</script>

 こんだけなんですが、ここ重要なことが。

 ・sw.jsのありかは、呼出し元のhtmlからの相対ではないのでご注意です。

 ・あと、呼出し元のhtmlは、sw.jsと同じかの配下にないとダメっぽい(?)

 コレが分ってなかったせいで、延々はまったのよヽ(;´Д`)ノ


sw.js

 して、肝心のサービスワーカーの内容ですが、取りあえずこんだけ。

self.addEventListener('install', function(e) {
});

self.addEventListener('activate', function(e) {
});

self.addEventListener('fetch', function(e) {
});

 必要のイベントを登録してますが、中身は何も無いダミーです。ではダメです。

 インストール出来るようにするだけなら、fetchだけあればいいらしい(?)とゆう話もあるんですが、試してません。取りあえず、この三つは後で使うヤツなんで、こうしておきますですよ。


 これだけで、なんと!

https://yamato-nadesiko.sakura.ne.jp/pwa-test/2/kanzan_2.html

 Androidchromeでは、画面下に、「ホーム画面に単位変換を追加」とゆうお知らせがポップアップします。ぽいっ!(喜)

 前のとは違って、ホームのアイコンを削除しただけでは無くならず、アプリドロワーからアンインストール出来るようになってます。ぽいぽいっ♪

 ちなみにFirefoxでは、マニフェストを登録しただけの時と挙動は変わらず、家に+のマークが出るので、こからインストールできますが、アプリドロワーには入らないようです。

 あと、PCのGoogleChromeさんでも、○に+のマークがURLバーのトコに表示されて、インストール出来るようになってんです。デスクトップと、スタートメニューにもショートカットが入ります。

 windowsからも、webアプリってコトを意識しないで使える、ちょっとした物が作れそうじゃないですか?!

 いや、なでしこ1があるからそれは別にいいんだけど。

 でも、人にやらそうと思った時、だうんろーどして解凍とか意味分らんって人、世の中にはいっぱいいたりするじゃないですか?w


 次は、ちゃんとオフラインでも動くようにします。

《続きます》

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20191212