Unable to turn TW into a PWA?

,
1

A bit ago I was successful in turning my normal TiddlyWiki into a PWA using the methods discussed in this post, however, using the same methods, I am unable to do so again.

I’m currently using TiddlyHost to host my wiki, and I will link to the template wiki I have built that I am unable to do it with.

As for the device and browser I’m using, I am on an S23 FE running android 14, using the stock Chrome Browser, version 126.9.64378.71

I find it a bit odd that it isn’t working, only able to “add to homescreen” rather than “Install App” so here’s hoping someone in the community may know :sweat_smile:

2

I tried looking at your embedded manifests, and the icon src values don’t look right:

{
  "name": "My TiddlyWiki",
  "description": "a non-linear personal web notebook",
  "short_name": "My TiddlyWiki",
  "theme_color": "#4682B4",
  "background_color": "#4682B4",
  "display": "standalone",
  "orientation": "portrait",
  "scope": "/",
  "start_url": "https://jmh-template-1-0b.tiddlyhost.com/",
  "icons": [
    {
      "src": "<<datauri "icon-192x192.png">>",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "'<<datauri"icon-512x512.png">>'",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
1 Like
3

Ah, yes you’re right, I had the datauri wrapped in single quotes instead of backquotes, whoops!

I’ve gone ahead and made that change, though still no luck for some reason :thinking: i read via the mozilla dev page on pwa’s that 30 seconds of constant interaction on the page is needed to have the option available, so while I don’t see it now after saving and reloading, maybe there is a slight delay

Edit: hm, unfortunately no luck

4

image
image2195×1240 370 KB

It seems like you want to achieve this effect
If you can’t achieve this effect through tiddlywiki, the browser can also help you achieve this
image
image897×514 24.2 KB

5

Yes, the option to install the wiki as an app is unfortunately not avail able through either menu, but it is what im looking to achieve.

The only options present are the following

Screenshot_20240621_012913_Chrome
Screenshot_20240621_012913_Chrome1080×2340 224 KB

Sidenote, Im glad that the install symbol is the same for all languages haha

6

I think the problem is that there are no actual image tiddlers under the names icon-192x192.png and icon-512x512.png, so the datauri macro assumes their type to be text/vnd.tiddlywiki. As a result, the wikified manifest json is

"src": "data:text/vnd.tiddlywiki"

which doesn’t make sense.

I have copied your manifest to a new wiki, added an image tiddler referred to in the datauri macro (it can be the same image for both sizes and it can have any resolution you want, it must have image/png type), and it worked.

It seems the menu button in Chrome/Android is always the same icon and name “Add to Home screen” as on your screenshot, but if the website is recognized as PWA-compatible, the dialog shown after choosing it is different (install app instead of add shortcut).

1 Like
7

Success!

For some reason I thought I had those two png tiddlers in the wiki, but I’m glad I was mistaken, I was worried there was some sort of conflict from a plugin or something :sweat_smile:

Thank you guys so much for your help!