PWA working - code once, install on everything!

SinisterSoft · March 2021

I managed to get PWA working.

With PWA you can export a HTML5 version of your game, it will then have an install link to the desktop on anything that has a chromium browser. Eg: Windows (Chrome/Edge, etc), OSX (Chrome/Edge), ChromeOS, Android, Raspberry Pi, etc...

Here are some screenshots from various systems.

This screenshot is a Gideros app running on ChromeOS as a proper ChromeOS application!!!

SinisterSoft · March 2021

Instructions...

First, export your game/app to HTML5. You can have encryption and compression turned on - but leave the hostname blank - that bit is important (I think)!

Second, open the index.html. Add this to the head:

 
if (navigator.serviceWorker.controller) {
    console.log("Active service worker found");
    } else {
        navigator.serviceWorker
        .register("serviceWorker.js", {
        scope: "./"
        })
        .then(function (reg) {
        console.log("Service worker  registered");
        });
    }

Edit: The forum formatting skipped a few lines, it should look like this:

Then create a file called manifest.json, put this text in it and edit it for your app details...

{
  "short_name": "ReportComplete",
  "name": "Report Complete",
  "icons": [
    {
      "src": "/images/reportcomplete192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/reportcomplete512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6",
  "description": "The best end-of-term report writing system",
  "screenshots": [
    {
      "src": "/images/screenshot1.png",
      "type": "image/png",
      "sizes": "540x720"
    },
    {
      "src": "/images/screenshot2.jpg",
      "type": "image/jpg",
      "sizes": "540x720"
    }
  ]
}

Create a file called serviceWorker.js (make sure to make the W uppercase!)

Put this text in it:

// Perform install steps
let CACHE_NAME = 'my-cache';
let urlsToCache = [
 //   'gideros.css',
//	'index.html'
    ];
 
self.addEventListener('install', function(event) {
// Perform install steps
    event.waitUntil(
        caches.open(CACHE_NAME)
        .then(function(cache) {
            console.log('Opened cache');
        return cache.addAll(urlsToCache);
        })
    );
});
 
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});
 
self.addEventListener('activate', function(event) {
  var cacheWhitelist = ['pigment'];
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

SinisterSoft · March 2021

You will need a couple of icons in an images subfolder, one 192x192 and one 512x512. You should also have a couple of screenshots, they can be jpg or png. In the manifest, I've given a couple of examples. Having the files available is important.

I managed to get this working tonight. There are some improvements. Bits are not exactly right yet, but it's getting there. There is a site called https://www.pwabuilder.com/ that shows what is missing.

Here is my example website: https://web.reportcomplete.com

The install icons are usually to the far right of the URL, on mobile they are at the bottom of the page.

SinisterSoft · March 2021

If you have an Android or iOS version of your app, rather than have them install the html5 version you can add a tag to the manifest:

"prefer_related_applications": true
"related_applications": [
  {
    "platform": "play",
    "url": "<a href="https://play.google.com/store/apps/details?id=com.example.app1" rel="nofollow">https://play.google.com/store/apps/details?id=com.example.app1</a>",
    "id": "com.example.app1"
  }, {
    "platform": "itunes",
    "url": "<a href="https://itunes.apple.com/app/example-app1/id123456789" rel="nofollow">https://itunes.apple.com/app/example-app1/id123456789</a>"
  }
]

Here is some more info on the manifest file:

https://developer.mozilla.org/en-US/docs/Web/Manifest

SinisterSoft · March 2021

Hopefully, eventually, this will be built-in to the official Gideros HTML5 export.

SinisterSoft · March 2021

I forgot to mention, I think your website that has the app should be https, not just http.

jimlev · March 2021

Well...I'm happy that you achieve such a demonstration and... so sorry that I couldn't find time before to document my own achievement. I feel so ashame...

So, here my own journey on the same subject.
My personal objectif was to make a game that could be installed on mobile platform (iOs and Android) and played totally offline.

Here is the url of the 'project' :
https://www.yamsgratuit.com/

Firs of all, I confirm that your project MUST be hosted under httpS protocol (secured domain).

I used tools to generate the manifest.json file :
https://app-manifest.firebaseapp.com/
https://www.simicart.com/manifest-generator.html/

Another great link is the google's dev pageabout PWA :
https://web.dev/add-manifest/

And, the mozilla developer documentation was also of great help (already underlined by @sinisterSoft):
https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps

These tools help to manage json format (who could be tricky if you forgot a comma or a '{' symbol). They also help you generate the multiple icons formats needed on mobile (be carefull, some of these tools are a bit too much enthousiasts, generating something like 300 files for iOs, Android,etc. oO)

So, what I did achieve...
- the game can be installed on iOs and Android with the help of my dedicated page
- the game can be played offline after the first launch (ios and Android)
- the user's best score is saved in local storage
- the 'app' display a nice icon on the device's screen

and what I didn't ?
- I didn't worked to much on the notifications and the installation prompt pop-up to convert more users to installation.
- I have to work a bit more (already done a lot on that tiring subject) on the screen ratio problem. How to optimize screen usage on so much different devices and the fact that switching to fullscreen is easy on android and add a lot of issues on iOs
I also loose a lot of time on 2 points :
- sound issues with some iOs version/devices and wav files
- in the service worker file, you have to list all the files needed for the installed version to work. You must be carefull that the pathes to theses files are in the scope of the app (same domain, folder, etc.) and relative to the js file.

And, as a final story, here are my future step :
As I want the game to be alone in the page of the installed version (without the site navigation and footer), I have to change the url of my app in the serviceWorker.js file. The online game page and the standalone page (which is download locally) will be differents htlml files. That will probably give a better experience BUT the google web crawler robot doesn't like too muche duplicate content. So I have to exclude that second page from my sitemap and from the robot review process.

Again, so sorry to haven't shared my XP before. Hope the mistake is a bit repaired now.

jimlev · March 2021

Post-mortem :

To be honest, to make an installable version of my game was not really my first goal. But, I'm quite seduced by the PWA process and possibilities.
BUT, I don't think that the gideros HTML5 export s the most optimized way to make a 'good' PWA. I think that a pure JS version of my game could be 60% lighter.
From the simple gaming point of vue, no difference but from the SEO and google point of vue, there is a huge difference. My game is judged as an 'heavy loaded object of unusual kind' by all the robots who crawled my website and, for that matter, my ranking is not really increasing (there are lots of over reasons but that's not the subject of the thread). And, as you probably know, bad ranking = no traffic. No traffic = no ads revenues. No revenue = no motivation. etc.

But I really encourage all of you who use Gideros as a hobby to share your creation with a PWA. I think it's an "easy" way to share your creation with small communities (friends, family, etc.) without managing the specific shop (Google Play, apple appstore) requirements.

SinisterSoft · March 2021

I've pm'ed with @hgy29 and it looks like most of the information to generate the manifest automatically is already available. All that would be needed is optional links to app stores for dedicated installs (if available), a line for the description, and a list or folder location for screenshots. This means that hopefully, it may soon be a html5 export option.

SinisterSoft · March 2021

@jimlev I think that the fact that PWAs allow you to install as a 'proper' Chromebook app is great. It means one more platform that can play a game or app made with Gideros.

Howdy, Stranger!

Categories

In this Discussion

Top Posters

PWA working - code once, install on everything!

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

PWA working - code once, install on everything!

Comments