Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2019-12-13

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

| 09:25

 世の中のPWAについて書いてるのを色々見ると、一番の目玉はキャッシュをつかって高速に、オフラインでも見れる、とゆうことであるらしい。

 ーですか。ワタシのようなしろーと的には、インストール出来るとかカッコいい! だったんですがw

 でも、オフラインで動くというのはよきですよ☆

 一段とアプリっぽさがアップするし、何より確かに実用的です。

 と、ゆうわけで、やっぱりオフラインには対応しなくては!

オフラインでも動かしたい】

 なでしこ3をオフラインで動かそうとゆう場合、まず一番になすべきことは、なでしこを使うために必要なwnako3.jsをダウンロードしてくることです。

https://nadesi.com/v3/

 ふつーは、なでしこの公式にアップされている物へリンクを貼って引っ張っていると思うんだけど、コレがないとなでしこが動かないので、これ自体をキャッシュにいれてやらねばならんのです。

 ダウンロードして、良きところへアップロードして、HTMLのwnako3.jsを呼び出すscriptタグのsrcを書き換え。

kanzan_3.html


<script src="https://yamato-nadesiko.sakura.ne.jp/wnako3/nadesiko3-3.0.61/wnako3.js?run" defer></script>

sw.js

 ででで、sw.js

 cacheNameを付けて、contentToCacheにキャッシュするファイルのリストを。

 これは、sw.jsからの相対指定で良いようです。はwnako3.js以外は全てsw.jsと同じトコにあります。違うとこに置いたwnako3.jsは相対指定がめんどーだったのでURLを貼りました。全部をURLにするのもアリです。

 なんにもせよ一個でも読めないファイルがあるとダメなのでご注意なのです。

 installイベントの中身は、呪文ですw

var cacheName = 'kanzan_3';
var contentToCache = [
  'https://yamato-nadesiko.sakura.ne.jp/wnako3/nadesiko3-3.0.61/wnako3.js',
  'kanzan_3.html',
  'icon-192.png',
  'icon-512.png'
];

self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(contentToCache);
    })
  );
});

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

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

 Javascriptが分んないから、こんなんでもいちいち苦戦orz

 どうもうまくいかなんだので、色々なんだかんだして、これオフラインで動くための、必要最小の構成と分りました。

https://yamato-nadesiko.sakura.ne.jp/pwa-test/3/kanzan_3.html

 これで、いちおうインストールして、機内モードにしても動くようにはなったんですけれどね。まだ、完全ではありません。

 インストールした後、一目はキャッシュを取る為オンラインで起動しなきゃならなかったり、オフラインで使用中に不用意に再読込してしまうと止まっちゃったりします。


オフラインでもちゃんと動くようにする】

 大体・・・なんでんな苦戦したのか、自分でもマッタク分からんね。

 だってね、の後もう一度やったら・・・

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

 呪文部分は全て、こっからのコピペで出来たんですからっΣ(゜д゜;

 単に、ファイルリストの問題だったのか・・・Javascript以前に、またジェイソンさんなのか・・・orz

 cacheNameはバージョン管理出来るようにしとけとどっかに書いてあったのと、htmlファイルが連番にしてあるので、こんな風にしてみましたが、は無事通りました;(文字列変数を使う時には囲みを「`」にするのを忘れず!)

sw.js

//-----------------------------------------------
// バージョン
var Ver = '4';

// キャッシュの名前
var cacheName = `kanzan_${Ver}`;

// キャッシュするファイルのリスト
var contentToCache = [
  'https://yamato-nadesiko.sakura.ne.jp/wnako3/nadesiko3-3.0.61/wnako3.js',
  `kanzan_${Ver}.html`,
  'icon-192.png',
  'icon-512.png'
];
//-----------------------------------------------

// 以下は呪文w
self.addEventListener('install', function(e) {
  console.log('[Service Worker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
          console.log('[Service Worker] Caching all: app shell and content');
      return cache.addAll(contentToCache);
    })
  );
});

self.addEventListener('activate', function(e) {
  e.waitUntil(
    caches.keys().then(function(keyList) {
          return Promise.all(keyList.map(function(key) {
        if(cacheName.indexOf(key) === -1) {
          return caches.delete(key);
        }
      }));
    })
  );
});

self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request).then(function(r) {
          console.log('[Service Worker] Fetching resource: '+e.request.url);
      return r || fetch(e.request).then(function(response) {
                return caches.open(cacheName).then(function(cache) {
          console.log('[Service Worker] Caching new resource: '+e.request.url);
          cache.put(e.request, response.clone());
          return response;
        });
      });
    })
  );
});

 一応・・・

 activateは、不要になった古いキャッシュを消去するためのヤツらしい。

 fetchでは、「リソースが実際にキャッシュ内にある限り、ネットワークではなくキャッシュからコンテンツを提供します。 アプリがオンラインかオフラインかに関係なく、これを行います。 ファイルがキャッシュにない場合、アプリはそれを提供する前にまずこに追加します。」とゆうことが行われているらしい。

 タブンですが、まずはインストール時にキャッシュするよ。もしcacheNameが変更になってたらバージョンアップしたよとゆうことで、前のキャッシュは消してあたらしいキャッシュを取りにいくけど、それ以外の時は常に、オンラインでもオフラインでもとにかくキャッシュを使うぜ! というこってしょう(?)

 とりあえず、これで3の時にあったようなオフライン時の不都合が一切無くなり、イイ感じです♪

https://yamato-nadesiko.sakura.ne.jp/pwa-test/4/kanzan_4.html

 これなら、呪文部分は使いしで、変数宣言部分だけ書き換えれば、だいたいのHTML埋め込みなでしこプログラムが、PWA化出来そうじゃないですか?(喜)

 PWAには、他にも通知やプッシュ通知などの出来る機能があるみたいだけど、それは当然アプリ毎に実装する機能だからワタシなどの知恵ではマッタク追っつかないので、ひとまずこんな所でしょう。

 むしろ、CSSなんかをうまく使って、よりアプリっぽい見た目にすると良さげ?

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

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

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

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

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

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

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

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

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


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

《続きます》

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

2019-12-11

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

| 09:21

 なんでも、PWAなる技術を使うと、ウェブサイトがAndroidにインストール出来るようになって、アプリっぽく起動するらしい!

 りゃやってみないと! とゆうわけで、やってみようと思ったら、https接続でしか出来ないらしい(´・ω・`)(いちおうローカルホストでは出来るらしい)

 ってコトで、コレをお試しする為だけに、さくらインターネットに登録してしまったよ(^▽^;

 さくらのレンタルサーバーでは、ライトプランでも初期ドメインでは共有SSLってのが使えるんだよね。素晴らしい。

 共有SSLは、初期状態から標準で利用中になってるっぽいですね。

 あと、.htaccessに、こんな呪文が必要です。

 httpからhttpsにリダイレクト(?)する呪文です。

RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

 これで、http接続では出来なかった、位置情報の取得も出来るようになりました。おおぅ!

 こんなことなら、はなっからジオシティーズからのお引っ越し先をここにしとけば良かったけど、ついつい無料のトコで探しちゃったよね。

 

 さてさて、それではとりあえず、前作った単位変換のプログラムで、お試ししてみたいと思います!

 主にココを参考にやっていきます~。

https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps#Core_PWA_guides


【ウェブマニフェストの読み込み】

 なんか順番がアレですけど、取りあえずインストールできるようにするのが目的なので、まずは「4.PWAをインストール可能にする方法」から。

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


 ウェブマニフェストファイルとアイコンを用意します。

 ウェブマニフェストは、なんか、こんな感じ。

kanzan.webmanifest

 アプリとしての各種設定などを記述するファイルです。

{
  "name":"単位変換 尺貫法⇔メートル法",
  "short_name":"単位変換",
  "description":"尺貫法とメートル法の単位を換算する",
  "icons": [
    {
      "src": "icon-192.png",
      "sizes":"192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512.png",
      "sizes":"512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/pwa-test/1/kanzan_1.html",
  "display": "standalone",
  "theme_color": "#EEF9FF",
  "background_color": "#F9FCFF"
}

 ウェブマニフェストの詳細はここあります

https://developer.mozilla.org/ja/docs/Web/Manifest

 とりあえず「display」は「standalone」にすると、ブラウザタブやタイトルバー表示されず、アプリっぽくなります。

 アイコンは、サンプルのソースを見るとべらぼうにいっぱい登録されていますが、最低限の要件として「少なくとも1つのアイコン」とあるので、ならとりあえず一個あれば良いのだろうと思ったのですが、「少なくとも192 x 192 pxのアイコンと512 x 512 pxのアイコンを用意する必要あります」という説もあり。

https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja#%E3%82%A6%E3%82%A7%E3%83%96%E3%82%A2%E3%83%97%E3%83%AA%E3%83%9E%E3%83%8B%E3%83%95%E3%82%A7%E3%82%B9%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B

 512pxのアイコンが無いと、アプリ起動時に表示されるアイコンが出ない感じでした。


kanzan_1.html

 して、HTMLのheadにlinkタグでウェブマニフェストファイルを読み込むためのリンクを設置します。

<link rel="manifest" href="kanzan.webmanifest">

 あと、iPhoneはウェブマニフェストがまだサポートされてないらしく、代わりにこんなmetaタグを追加するってコトなんですが、iPhone無いからお試し出来ません;

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="単位変換">
<link rel="apple-touch-icon" href="icon-192.png">

 とりあえずこれで、Androidのchromeメニューからホーム画面に追加すると、ホームにアイコンが出来て、ぽい感じに起動するようになりました!

 Firefoxでは、URLバーの横っちょに家の形に+のアイコンが表示されて、インストール出来ることをお知らせしてくれちゃいます!

https://yamato-nadesiko.sakura.ne.jp/pwa-test/1/kanzan_1.html

 まあ・・・たったこんだけの筈だったんですがね・・・

 どうもうまくいかず延々はまった(´д`)

 JSONさん違えてただけだった。最後の項目にさりげなく「,」が入っててっヽ(;´Д`)ノ


 とっ、ともかく、何もしていないPWA未対応の状態だと、chromeメニューからホームに追加するをしても、ホームには単にサイトへのショートカットができるだけです。

https://yamato-nadesiko.sakura.ne.jp/pwa-test/0/kanzan_0.html

 比べて悦に入り、気を取り直しますw

 よきよきー♪


 とはいえ、こんだけだとマニフェストにしたがってホームのアイコンが変わり、standaloneでぽい見た目になってるだけで、実際にはショートカット出来てるだけと、変わりはないですね。

 ブラウザで、インストール出来る感を出してくれるのは、AndroidのFirefoxだけですし。

 次は、サービスワーカーについて学びます☆


《続きます》

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