Scratch 3.0 自分専用機 を作ろう!! (16) ServiceWorker で、PWA 化してみよう

on
By kyorohiro (河村潔広)

Scratch3.0 で、作成したアプリを、PWAとして公開してみましょう。
iPhoneやAndroidのアプリストアを経由しなくても、
作成した Scratch3.0 の ゲームやアプリを、様々なコンピューターにインストール出来るようになります。

Service Workerとは何か

https://developers.google.com/web/ilt/pwa/introduction-to-service-worker

実際に、前々回に作成した、Scratch3.0アプリを、PWA として動作させて見ましょう。
コードは以下
https://github.com/kyorohiro/doc.advent.scratch30/tree/master/scratch-serviceworker

オフラインアプリ化できる

ServiceWorker を利用することで、Internetに接続していないと利用出来なかった、
Webアプリが、オフラインでも動作させることが出来るようになります。

ServiceWorkerが広がると、
今までは、サーバーからWebページを逐次ダウンロードしていたのが、PWA化された世界では、
サーバーから、Webアプリをダウンロードして利用する。
と行った世界に変わることになります。

軽めのアプリであれば、AppStore や GooglePlayStore などが、不用になりますね!!


インストール処理を追加できる

インストール処理を書く必要があります!!
どのファイルをキャッシュするのかを指定するだけで実現できます。

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open({名前の文字列})
      .then(function(cache) {
        return cache.addAll({キャッシュして起きたいファイル一覧の配列});
      })
  );
});

上のような感じ


サーバーへのリクエストに割り込める

サーバーから、データーをダウンロードする際に、
キャッシュを使用するのか?
それとも、サーバーに置いてあるデーターを再利用するのかを
決めることができます。

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // キャッシュがあったのでそのレスポンスを返す
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

上のような感じ!!


動かして見ましょう

https://github.com/kyorohiro/doc.advent.scratch30/tree/master/scratch-serviceworker

git clone https://github.com/kyorohiro/doc.advent.scratch30.git
cd scratch-serviceworker
npm install
webpack-dev-server

http://localhost:8362/ にアクセスしてみると、
無事、Scratchで作成したゲームが動作しています。



で、webpack-dev-server を止めて見ましょう!!
http://localhost:8362/ にアクセスしてみると、
オフラインでも動作します!!

Comments

Post a Comment