LV. 21
GP 247

【其他】讓RPGMV網頁版也能使用PWA的技術來做Web APP

樓主 快閃小強 mmmm748748
GP22 BP-
 
我想…看到標題就點進來的人應該不知道PWA是什麼吧..
其實PWA就是Progressive Web App(漸進式網路應用)的簡稱,
是Google I/O 2018所發表推行的最新的網頁應用技術。
 
總之我還是先說為何PWA技術可以運用在RPGMV網頁版上吧
其實PWA說穿了就是把你瀏覽的網站直接變成APP自動安裝到你的手機上
當然並不是用APK下載再安裝這樣,簡單來說PWA技術它也可以把RPGMV網頁版的遊戲直接變成APP 而且不必透過Google Play或App Store下載APP
就能直接使用並隨時保持更新,以下我放上DEMO來給大家實際使用看看
 
※目前新版的iOS系統礙於蘋果公司的安全政策問題,對於PWA的支援非常差,
所以最好還是用Android或Windows的等等作業系統的Chrome瀏覽器會比較好

(目前已知新版的iOS系統除了無法後台運行,關閉PWA之後再次開啟並不會重啟
而且遊戲音效方面只會持續1秒就沒聲音了,感謝巴哈網友SWATPC的回報)



用手機開啟最新版的Google Chrome APP(版本需要Chrome 52以上) 然後點上方網址載入之後下方跳出有「MV控制器 加到主畫面」的字樣點下去按新增
這網站就會變成APP自動安裝到手機上
 
當然像是平板等裝置可能就要手動再右上角開啟功能選單並按「加上主畫面」
順帶一提,Windows7、Windows8、Windows8.1,還有Windows10,以及Mac OS 10.10以上
可以使用最新版的Google Chrome(版本需要Chrome 70以上) 可以安裝到電腦上,
只是需要自己手動按安裝就是了
(在右上角打開功能選單並選擇安裝「MV控制器」之後,按F5鍵重新整理就會跳出安裝提示喔)


但如果你的瀏覽器的功能選單沒有出現安裝選項的話,可以在網址列輸入chrome://flags/
然後搜尋PWA之後將Desktop PWAs的設定值設為Enadled之後在重啟Google Chrome瀏覽器就行了
 
看完之後覺得對這技術運用在RPGMV的可以往下看以下的本篇教學喔
 
 
第一步
先將遊戲專案輸出成網頁瀏覽器的格式
 
第二步
到以下的網址線上上傳icon,並輸出各種尺寸的icon圖示,記得圖示大小一定要512x512以上

 
 
第三步
將剛剛輸出的icon圖示的壓縮檔解壓縮到網頁版遊戲專案目錄之下的icon資料夾裡


第四步
將DEMO專案內的manifest.json和service-worker.js複製並放在你的網頁版遊戲專案

 
第五步
修改剛剛的manifest.json
 
綠字的程式碼分別是
 
"name": "(完整的遊戲名稱)",
"short_name": "(簡短的遊戲名稱)",
"description": "(遊戲內容描述)",
"lang": "(網頁編碼語言,輸入zh-Hant-TW就好)",
"display": "(APP的顯示方式,輸入fullscreen就好)",
"background_color": "啟動畫面(Splashscreen)背景顏色,用#+(色碼)表示",
"theme_color": "主題顏色,用#+(色碼)表示",      
"orientation":"(螢幕方向,通常輸入landscape就好)",
 

{
  "name": "MV控制器",
  "short_name": "MV控制器",
  "description": "PWA方面的測試專案",
  "lang": "zh-Hant-TW",
  "display": "fullscreen",
  "background_color": "#000",
  "theme_color": "#fff",
  "orientation": "landscape",
  "icons": [
    {
      "src": "./icon/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "./icon/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "./icon/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "./icon/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "./icon/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "./icon/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./icon/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "./icon/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html?launcher=true",
  "scope": "./"
}
 
第六步
修改剛剛的service-worker.js
 
 

var version = 1;
var cacheName = 'stale_rpgmv-' + version;


self.addEventListener('fetch', function (event) {

  if (event.request.url.match(/version/)) {
    event.respondWith(new Response('VERSION'))
  }
  event.respondWith(caches.open(cacheName).then(function (cache) {
    return cache.match(event.request).then(function (response) {
      console.log("cache request: " + event.request.url);
      var fetchPromise = fetch(event.request).then(function (networkResponse) {
     
        console.log("fetch completed: " + event.request.url, networkResponse);
        if (networkResponse) {
          console.debug("updated cached page: " + event.request.url, networkResponse);
          cache.put(event.request, networkResponse.clone());
        }
        return networkResponse;
      }, function (event) {
        console.log("Error in fetch()", event);
        event.waitUntil(
          caches.open(cacheName).then(function (cache) {
            return cache.addAll
              ([
/*
            如果有用不到到載入資源可以先把該項目反斜線   
當然有追加下面清單以外的資源可以追加上去喔
*/
                "/index.html",
                "/js/*.js",
                "/js/libs/*.js",
    "/js/plugins/*.js",

                "/img/animations/*.png",
                "/img/battlebacks1/*.png",
"/img/battlebacks2/*.png",
"/img/characters/*.png",
"/img/enemies/*.png",
"/img/faces/*.png",
//"/img/parallaxes/*.png",
//"/img/pictures/*.png",
"/img/sv_actors/*.png",
"/img/sv_enemies/*.png",
"/img/system/*.png",
"/img/tilesets/*.png",
"/img/tilesets/*.txt",
"/img/titles1/*.png",
//"/img/titles2/*.png",
//"/img/weather/*.png",
"/icon/*.png",
"/fonts/gamefont.css",
"/fonts/mplus-1m-regular.ttf",
"/data/*.json",
//"./movies/*.webm",
"/audio/bgm/*.m4a",
"/audio/bgm/*.ogg",
//"/audio/bgs/*.m4a",
//"/audio/bgs/*.ogg",
"/audio/me/*.m4a",
"/audio/me/*.ogg",
"/audio/se/*.m4a",
"/audio/se/*.ogg",
"/manifest.json"

              ]);
          })
        );
      });
     
      return response || fetchPromise;
    });
  }));
});

self.addEventListener('install', function (event) {
  self.skipWaiting();
  console.log("Latest version installed!");
});
 
 
第七步
打開網頁版MV目錄的index.html並編輯它將以下的灰底程式碼加到</head>之上
並將紅字的部分改成自己遊戲的設定

<meta content="#FFF" name="theme-color">
<link rel="manifest" href="manifest.json">
<meta name="apple-mobile-web-app-title" content="MV控制器">
<script>
    (function () {
      var version = document.getElementById('version');
      navigator.serviceWorker.register('service-worker.js')
        .then(reg => {
          console.log('sw registered to', reg.scope)
          reg.addEventListener('updatefound', () => {
            var newWorker = reg.installing;
            document.getElementById('updatefound').innerHTML = 'Yes';
            newWorker.addEventListener('statechange', function (event) {
              var el = document.getElementById(newWorker.state);
              if (el) {
                el.innerHTML = 'Yes';
              }
              if (newWorker.state === 'activated') {
                fetchVersion()
              }
            })
          });
        })
        .catch(x => console.error('register failed', x.message))
      document.getElementById('update').addEventListener('click', function () {
        navigator.serviceWorker.getRegistration()
          .then(reg => reg.update())
          .catch(x => console.error('update failed', x))
      })
      fetchVersion()
      function fetchVersion() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/version');
        xhr.onreadystatechange = function () {
          if (xhr.readyState === XMLHttpRequest.DONE) {
            version.innerHTML = xhr.status === 200 ? xhr.responseText : 'NaN';
          }
        };
        xhr.send();
      }
    })()
    </script>
 
 
第八步
最後找個有支援https協定的網頁空間上傳就完成了,一定要https的協定才行
當然也可以向粽子大大申請網頁空間,有興趣的話可以找粽子大大申請喔~

在此奉上粽子大大的申請連結   https://ppt.cc/fyMB2x




本篇文章也同步發佈到我的小屋

22
-
LV. 1
GP 0
2 樓 SWATPC tpcaihx0711
GP0 BP-

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

※ 引述《mmmm748748 (快閃小強)》之銘言
你好,我是使用iPhone將它加入主畫面,一開始正常有畫面有聲音,但是如果切到主畫面或其他程式在回來,畫面正常的,但是聲音只會持續1秒就沒聲音,這個要怎麼解決呢?
0
-
未登入的勇者,要加入 3 樓的討論嗎?
板務人員:

2669 筆精華,08/19 更新
一個月內新增 4
歡迎加入共同維護。


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】