Paul's Address Book with a PWA

Showcase
#1

I originally built this app using the nocode site Glide with the data held on a GoogleSheet. However significant changes to Glide platform meant that I would need to rebuild the app from scratch. So I challenged myself to rebuild it in TW so that its future was more in my own hands rather than a third paty platform.

I tried to minimise the use of plugins and much of the layout and functionality is with some tweaks to core and some CSS. Also hiding the sidebar and making it read only.

The main plugins that it is dependant on are Leaflet, Shiraz Dynamic tables and Spotlight.

I also wanted a better mobile experience, like the bottom minimalist toolbar and the option to install as a PWA.

My build is done in node.js which is exported as a single file wiki. That gets uploaded to a web directory that has a Service Worker (js file) already waiting. I hand crafted the service worker to get it to do what I wanted from the PWA.

You should get a prompt after 15 seconds asking if you want to install. Depending on your browser you will get a web shortcut or a full PWA App install.

Some of the content - pictures and Bible verses are not cached so to get the best experience you do need a web connection.

Comments appreciated.
You can find the app here Paul's Address Book — A recreation of the Apostle Paul's address book

paul_screenshot
paul_screenshot1920×833 89.9 KB

journey_screenshot
journey_screenshot1920×835 134 KB

7 Likes
#2

Whoa! That is seriously impressive!

I don’t have time today to comment fully.
I hope to have time to soon.

Greetings to Northamptonshire from an ex-Rutlandian,
TT

1 Like
#3

This is an impressive tour de force. Thank you very much for sharing!

At some point, when my schedule lightens up, I will want to take a look at how you did the PWA app installation bit. Is that home-grown or a plugin?

1 Like
#4

I used a couple of online tutorials to learn how to create the manifest (manifest.json) and service worker (sw.js) files. I wanted to know exactly how these parts worked and what my options were.

I also found I needed to add some html to the TW index.html head and body so that it worked with the manfest.

This was done using tags $:/tags/RawMarkup and $:/tags/RawMarkupWikified/BottomBody to add HTML to <head> and <body> sections of final page. See pwaHTMLheader and pwaHTMLbody.

pwaHTMLheader tagged $:/tags/RawMarkup

<!--~~ PWA head section ~~-->
    <link rel="manifest" href="./manifest.json">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#222" />
    <meta name="description" content="Paul's Address Book">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Paul's Address Book">
    <link rel="apple-touch-icon" href="./icons/icon-152x152.png">
    <title>Paul's Address Book</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="./styles/styles.css" />
<!--~~ End PWA head section ~~-->

pwaHTMLbody tagged $:/tags/RawMarkupWikified/BottomBody

`<!--~~ Calls index.js ~~-->

<script src="./js/index.js"></script>
<!--~~ End Calls index.js ~~-->
1 Like
#5

Thank you very much. I’ll be looking at this closely after the election.

– Scott

#6

It Is well worth looking at in detail!

Great achievement—especially the PWA aspect.

I’m not sure everyone here understands yet that "PWA"s are a great way to distribute a lot of public facing TWs.

Yours is the first example I have seen that goes all the way to make it work really well.

I got a bunch of comments …

CONTENT DESIGN

  • The Purpose Is Obvious
  • Very clear design to fulfil the purpose.
  • And no more info than you need.
  • Visual minimalism.

CROSS DEVICE LOOKS

  • The clarity and minimalism of the visual design ensures …
  • It looked nice and obvious on all the devices I looked at

PWA TRIUMPH

Because I’ve never used a full-on TW-PWA before I gave it a good workout to see what happened saving it as a local app … on …

  • Chrome on medium size Chromebook (Android compatible)
  • Chrome on Android phone
  • Chrome on Windows 10 laptop
  • Firefox on Windows 10 laptop

It worked great on all!

Though with Firefox the icon disappeared but still works with a generic icon instead.

Installed app looks like …

Screenshot 2025-10-27 17.29.31
Screenshot 2025-10-27 17.29.31203×696 29.6 KB

Typically a right-click on the installed app shows …

Paul

On smartphone it is remarkably readable …

Screenshot_20251025-101108
Screenshot_20251025-101108720×1440 168 KB

Anyway. I thought it really great!

And @Scott_Sauyet has already indicated interest in: How was that all done!

TT

1 Like
#7

I do want to learn how to create a TW PWA so I start by copying an already working PWA. I exported all Paul’s Address Book tiddlers as .json and imported them into a fresh TW.

Even though in surface the cloned wiki looks like the original Paul’s TW, the service worker and the manifest are not there so I do suspect that this functionalities are not coded within a tiddler or were not exported as the rest of the tiddlers…

Can someone help me figure out the missing piece?

Thxs!

#8

Yes, the service worker and manifest are completely seperate and external to the TW file.

I read up a couple of guides to creating these elements:

There are plenty of others around and you should be able to pickup the tweaks you want to get the desired final product.

Once they are in place on the server (hosting) you can upload your TW file (in my case exported from a node.js set-up).

I can see packaging it all up so that the manifest and service worker files were created from a TW Plugin would be really smart - but too far up my learning curve!

1 Like