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