Posted at
ScratchDay 16

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

More than 1 year has passed since last update.

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で作成したゲームが動作しています。

スクリーンショット 2017-12-24 22.17.00.png

で、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 化してみよう