CODEWITHSUNDEEP
apkprogressive-web-appspwabuilderbubblewrap
Codebricks
Codebricks

Reputation: 1263

How can I debug why my progressive web app PWA wont convert into an android apk

I am trying to convert my PWA website into an Android apk file to distribute in the Google Play store but cannot generate an apk file using either Bubblewrap or PWABuilder. The url for my PWA is https://www.stephengarside.co.uk .

I am running the following command line bubblewrap init --manifest "https://www.stephengarside.co.uk/manifest.json" and the error I get is:

ERROR invalid json response body at https://www.stephengarside.co.uk/manifest.json reason: Unexpected token  in JSON at position 0

My manifest.json file is:

{
  "start_url": "/",
  "description": "The SG Digital app provides free articles on the latest web software development techniques including chatbots, VR and AR, progressive web apps and voice apps for smart speakers and displays.",
  "short_name": "SG Digital",
  "name": "SG Digital Web Development",
  "display": "standalone",
  "orientation": "any",
  "lang": "English",
  "scope": "/",
  "background_color": "#000",
  "theme_color": "#000",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "images/icons/icon-120x120.png",
      "sizes": "120x120",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "images/icons/icon-180x180.png",
      "sizes": "180x180",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "screenshots": [
    {
      "src": "images/screenshots/screenshot1.jpg",
      "sizes": "1280x720",
      "type": "image/jpg"
    },
    {
      "src": "images/screenshots/screenshot2.jpg",
      "sizes": "1280x720",
      "type": "image/jpg"
    }
  ]
}

My PWA works fine, I am able to install it and get no errors on Windows or Android device. Google Lighthouse validates it as a PWA too. I get a similar error with PWABuilder.

I have tried renaming the file to manifest.webmanfest, have validated the manifest with https://manifest-validator.appspot.com/ .

As I have the service wroker for the app already installed on my machine I have tried unregistering to ensure nothing is being brought from cache, and also tried running pwabuilder in incognito.

Any help would be much appreciated.

Upvotes: 1

Views: 1201

Answers (1)

Codebricks
Codebricks

Reputation: 1263

It turned out to be nothing to do with the content of my Json file, it was the encoding. I downloaded notepad++ and saved the manifest.json file with UTF8 encoding and that solved the problem. You can read a little more in this article https://www.stephengarside.co.uk/blog/how-to-create-a-pwa-umbraco-website/

Upvotes: 1

Related Questions