Scratch3.0에서 만든 앱을 PWA로 게시해 봅시다.

iPhone이나 Android의 앱 스토어를 통과하지 않아도,

작성한 Scratch3.0 게임 및 앱을 다양한 컴퓨터에 설치할 수 있습니다.

Service Worker란 무엇인가?

실제로 이전에 작성한 Scratch3.0 앱을 PWA로 실행해 봅시다.

코드는 다음

오프라인 앱화 가능

ServiceWorker를 사용하여 인터넷에 연결되어 있지 않으면 사용할 수 없었습니다.
웹 앱이 오프라인에서도 작동할 수 있습니다.

ServiceWorker가 퍼지면,
지금까지는 서버에서 웹 페이지를 순차적으로 다운로드하고 있었던 것이 PWA화된 세계에서는
서버에서 웹 앱을 다운로드하여 이용한다.

로 간 세계로 바뀌게 됩니다.

가벼운 앱이라면 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를 사용해 봅시다.