필요한 것

티라노 라이더 v200 이상

할 수 있는 일

홈 화면에 추가

리소스 캐시

하는 일

티라노 라이더에서 "슈퍼 브라우저 게임"형식으로 패키징

↑적색으로 둘러싸인 중 어느 쪽인가

티라노 빌더를 사용하고 있는 경우는 한번 빌더측에서 「브라우저 게임」형식으로 출력, 출력한 폴더를 티라노 라이더로 읽어들여 슈퍼 브라우저 게임 형식으로 패키징하면 OK

홈 화면에 추가

1. manifest.json 만들기

manifest.json

{
    "name": "GAME_TITLE",
    "short_name": "SHORTNAME",
    "icons": [
        {
            "src": "link.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "link_02.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
    "start_url": "/",
    "display": "fullscreen",
    "background_color": "#000",
    "theme_color": "#fff",
    "orientation": "landscape"
}

manifest.json을 작성하는 방법은 이건

2. manifest.json 업로드
pwa 대응하고 싶은 폴더에 놓기
예를 들어 game라는 폴더에 티라노 라이더에서 출력 한 파일이 있다면

game
├ data
│ └scenarioとか
├ tyrano
│ └libとか
├ index.html
└ manifest.json <=ここ！

게임을 공개하고 있는 사이트 전체가 아니라 게임을 개별적으로 pwa화하고 싶다면 게임의 index.html과 같은 계층에 manifest.json을 두어 두면 좋다고 생각한다

3. manifest.json을 html 헤더로로드

index.html

<link rel="manifest" href="/manifest.json">

바탕 화면에서 확인하는 방법 이건
이 페이지에 모든 방법을 썼습니다.
스마트 폰에서 확인은 localhost로 할 수 없다?
확인 시에는 https로 액세스할 필요가 있으므로 주의(자계)

리소스 캐시

할 일은 대체로 티라노 군이 해준다.
config.tjs에서 ;debugMenu.visible=true로 설정한 상태에서 Developer Tools(F12 키)를 열고 Network 탭에서 이미지 등이 로드되어 있는지 확인할 수 있으면 OK


티라노 라이더로부터 슈퍼 브라우저 형식으로 출력하면 ServiceWorker의 등록은 디폴트로 설정되어 있으므로 특히 괴롭힐 필요는 없다(라고 생각한다)

스마트 폰에서 브라우저 게임을 플레이하면 아무래도 주소 바가 방해에 느껴지는 경우가 많다고 생각하기 때문에 pwa화해 조금이라도 표시 영역을 넓게 취하고 싶은 기분