Service Workerとは何か

実際に、前々回に作成した、Scratch3.0アプリを、PWA として動作させて見ましょう。

コードは以下

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

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);
      }
    )
  );
});

上のような感じ!!

動かして見ましょう

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/ にアクセスしてみると、

オフラインでも動作します!!

以下の場所でも、アレコレ書いていきます。

Scratch2.0 入門

火の型 With Scratch 2.0 (プログラム入門) 　第00巻

火の型 With Scratch 2.0 (プログラム入門) 　第01巻
 炎の型 With Scratch 2.0 (ゲームプログラム入門)

Scratch3.0 自分専用機を作ろう!!

(0)Scratch 3.0 自分専用機を作ろう!! (0)
(1) Scratch3.0をビルドしてみよう
 (2) Scratch3.0 を Androidアプリとして動作させてみよう (1)
(3) Scratch3.0 を Androidアプリとして動作させてみよう (2)
(4) Scratch3.0 を Androidアプリとして動作させてみよう (3)
(5) Webpack とは)
(6) Scratch3.0 の package.jsonを読んでみよう
 (7) scratch-gui をインストールしてみよう
 (8) scratch-vm に利用されている、scratch-xxx を触ってみよう
 (9) Babel を触ってみよう
 (10) scratch-render.js で何か作って触ってみよう
 (11) scratch-storage.js を触ってみよう
 (12) Blockly を触ってみよう
 (13) Scratch Block に触ってみよう
 (14) scratch-vm.js を使って、100行でHTML5化しよう
 (15) ScratchVM の Opcode
(16) ServiceWorker で、PWA 化してみよう

Scratch 3.0 を Hackしよう。 ServiceWorker で、PWA 化してみよう