[service worker] I introducing service worker and webmanifest to the wiki, make my Wiki a PWA, now it can work offline!

[LinOnetwo]

I read the tutorial of PWA today, and created a manifest.webmanifest : https://github.com/linonetwo/Tiddlywiki-NodeJS-Github-Template/blob/master/PublicWiki/public/manifest.webmanifest

to test if it can turn my wiki into an APP that can be installed in my mobile phone, and I succeed!

Then I use workbox (it allows me to write service worker easily) to create a service worker: https://github.com/linonetwo/Tiddlywiki-NodeJS-Github-Template/blob/master/PublicWiki/public/service-worker.js

it make my wiki work offline, so that app really feels like an offline app, instead of a website.

Now my wiki can serve as a quick manual APP for me to search in mobile, it can open fullscreen, and open in lightening fast speed, and work offline!

The content of the wiki will get updated only if I deploy a new version of wiki, and close the website tab, then reopen the tab (so a service worker with new precache content will install)

Please try it out in your phone https://tiddlywiki-nodejs-github-template.now.sh

The code is here: https://github.com/linonetwo/Tiddlywiki-NodeJS-Github-Template 

I will write a post about the detail later.

[Mohammad Rahmani]

Hi Lin,

 Please add some description to be able use/install this great tool!

Best wishes

Mohammad

--
You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywikide...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/dd6050cb-925b-4059-a467-21f31581ca72%40googlegroups.com.

[PMario]

Hi,

That's an interesting approach.

I did have a closer (but fast) look at the library that is imported: https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js

If pretty-printed, so humans can read it again, it's 54 lines of code that import 12 other components. ... I'm not sure, if you are aware:  One of them seems to be a googleAnalytics module with "replay" capabilities.

So I do have "privacy concerns". I don't know, if the code is active, but I personally would only use components, that I know and that I really need. Google analytics is _not_ one of them.

Just to be sure you are aware.

Have fun!

mario

[LinOnetwo]

Hi Mario,

I read the doc again, I can assure that these ga related code are used to help page that already have ga to collect data even offline. If our wiki don't use ga already, and not explicitly use that code, it won't do anything.

Thanks for your reminder for that.

[LinOnetwo]

Hi, Mohammad,

For now, I'm just using a RawMarkup tiddler, as in the attachment, to load the service-worker.js served in /service-worker.js

So you may have to serve your HTML wiki along with service-worker.js

I think it is very easy to use, if you are using a static server (for example gh-page, or now.sh ) to serve your wiki. (I'm using now.sh to auto bundle NodeJS wiki to HTML wiki)

PWA is progressive, won't hurt any basic function, and it is getting widely adapted these days.

I'll do more experiment on it, maybe one day I will open a PR, letting service worker to be build into the main tiddlywiki.

[Mohammad]

Hi Lin,

 Many thanks! This wonderful. I uses gh-pages, but I give a try on now.sh

Cheers

Mohammad

[LinOnetwo]

Hi Mohammad,

I think you can also use service-worker.js in gh-page, if you already using that, you can try doing it in gh-page first.

when making gh-pages, also place service-worker.js in the root dir.

Just like this example https://github.com/linonetwo/ipfs-browser-gateway/tree/gh-pages

[Mohammad]

Thanks for the hint and nice example Lin!

--Mohammad

[TonyM]

lin One two,

I was very keen to see if TiddlyWiki could become a PWA. I used your link on my android and the save, saved locally to a tiddlers(n).html file. Can the changes be saved locally so the app can be accessed at the same address or as a native icon on the phone?.

What other imitations do you see?

I love your contributions to the Tiddlywiki community, very innovative.

Regards

Tony  

[LinOnetwo]

If you click the save button, it will simply save a HTML file. To allow save offline, I need to add a SyncAdaptor that will sent single tiddler via HTTP request, then service worker can use workbox-background-sync strategy to wait for onlien,

and use cache to hode changes locally, if you reopen the app and it is still offline, syncadaptor can retch skinnytiddlers and changed tiddlers from service worker Cache API.

So to make it a read-write PWA, we need to use SyncAdaptor  instead of Saver. And need to implement Cache and background-sync.

I'm using Github to store tiddlers now, so I hope there can be a Github SyncAdaptor (and with multiple repo support, so I can save tiddlers tagged with "private" to be saved to a private repo)

With Github SyncAdaptor, I can make it a read-write app that works offline and resync upon reconnect.

---

I'm currently working on a NodeJS version of TiddlerDesktop (using WebCatalog app), that can save tiddlers instead of save HTML, this will works good with Github SyncAdaptor in the future.

在 2020年4月20日星期一 UTC+8下午12:02:54，TonyM写道：

[LinOnetwo]

Forget to say, I'm precaching things using workbox-cli

https://github.com/linonetwo/Tiddlywiki-NodeJS-Github-Template/blob/cecfe6df1daff1ad5b21b3c85a261489284e67fb/package.json#L18

This requires running npm command to generate the final ./public/service-worker.js from the ./PublicWiki/public/service-worker.js,

so maybe github pages is not enough? Except you run this command locally and push the result to the github.

I run this script in the now.sh cloud, to generate final service-worker.js, on the fly.