psy

I built a PW PWA in 15 minutes

Recommended Posts

Yep, well took a bit longer reading the doco, experimenting etc and my site was already live. Now I know how to do it, will only take 15 minutes next time.

Steps:

  1. Create your icons. I only had up to 256x256px. That's old hat. Now you need up to 1024x1024px. Decided to go with my existing website/app icon set anyway.
  2. Go to http://www.manifoldjs.com/generator and fill in the blanks
  3. Generate the files, download the kit, edit the files and/or your PW template(s) required and upload to the root directory, not /site/ directory, of your ProcessWire site

Woohoo!!! Works great with a couple of provisos:

  1. The online builder does not work for Mac, iOS and Windows 10 devices, only everything else. Found it somewhat ironic it lacks Windows 10 support as this is a Microsoft product. No surprises there!
  2. For Mac, iOS and Win10 you have to use the PWABuilder CLI, almost formerly ManifoldJS CLI as it's going through a name change. Would be ever so grateful to anyone who can tell me how to do that. Followed the instructions to the letter, and also multiple variations, and could not get the CLI version to install/work and I definitely have the latest versions of Node and npm.

PWABuilder delivers a manifest.json file and a couple of basic service workers, without all the fuss associated with SPAs, REST APIs etc, for small, informational websites. Watched a video recently that amongst other things, stressed PWA != SPA. Took me a while to get that. (Tip: skip the ads)

 

 

While not yet perfect, PWABuilder was a good introduction for me to PWAs for ProcessWire.

 

  • Like 15

Share this post


Link to post
Share on other sites

Thanks for sharing. I watched the entire video (no ads though... don't you use ad-blockers?).

So... if you say that tool installs a couple of basic service workers. What exactly do they do? Enabling offline mode? Push notifications? "add to homescreen"?

  • Like 2

Share this post


Link to post
Share on other sites

@dragan 

The tool gives you some choices about what you want to store offline and if you want an offline.html for content that's not saved locally. 

Worked for me on mac. Dragged the URL to the desktop, turned off all internet connections, opened the link** with Chrome and Firefox. All worked and any pages I hadn't visited online displayed my offline.html message.

** icon showed Safari even though it's not my default browser, not my PWA icon - an Apple thing? Also, link did not work when opened with Safari which gets back to Apple's lack of support for service workers I guess.

  • Like 1

Share this post


Link to post
Share on other sites

Tips for anyone using PWABuilder:

  • If you upload the manifest.json and js files to the root directory, change all relative urls in the pwabuilder js files to absolute https://yourdomain.com/ urls otherwise the files won't be found in pages lower down the page tree
  • Ditto for the image file URLS in manifest.json, or at least './site/wheveryouhaveyouricons'
  • Minimise the js and manifest.json files so Google won't penalise the site in page speed insights
  • If you don't want to use an index.html file for offline remove references to it from the pwabuilder js files otherwise the service worker registration may fail
  • The pwabuilder js & json files could probably be put in your templates dir providing all scripts & meta links pointed to them correctly. Haven't tried that yet

 

  • Like 1

Share this post


Link to post
Share on other sites

What confuses me is: I get two folders in the ZIP:

PWA, which contains

  • generationInfo.json
  • manifest.json
  • Web-next-steps.md

And a folder ServiceWorker3 with

  • pwabuilder-sw.js
  • pwabuilder-sw-register.js

Do I have to put all these JS file into my site root? And do I have to keep them in these folders? The instructions on the generator site are a bit vague...

Oh and... (maybe a stupid question, because you didn't mention it): Do I have to install this PW module as well?

Share this post


Link to post
Share on other sites

Another question: Does it also create that "do you want to add it to your homescreen?" that was featured in the video?

 

Share this post


Link to post
Share on other sites

Hi @dragan Good questions!

Firstly, the video and PWABuilder share the same topic but are otherwise not related. What the video gave me was a simpler approach to adding PWA features to a website, the emphasis being on 'progressive'. A Google search then lead me to PWABuilder.

You don't have to do everything at once and while SPA's are PWA's, the reverse is not always true, ie a PWA does not have to be a Vue.js or similar application with REST API's, authentication, etc. Vue.js and its ilk give many more options - JWT, offline DB Storage, push notifications, etc.

I needed to get my head back into the basics.

The MS PWABuilder is purely a starting point. Many of the niceties you're looking for aren't included, eg a push notification saying "do you want to add it to your homescreen?"

I got PWBuilder working for me by putting the following in my site root directory:

  • manifest.json
  • pwabuilder-sw.js
  • pwabuilder-sw-register.js
  • offline.html

I then referenced manifest.json, pwabuilder-sw.js and pwabuilder-sw-register.js in my "_main.php" template so every page would get them. Also, see my tips above about what/where to put the generated files.

To test that the pwabuilder-sw.js was working, I 'drag-n-dropped' the URL from my browser to the desktop, turned off all internet connectivity then launched the URL from the desktop. All 'while-online-pages' I'd referenced were available offline (also I few I hadn't visited). Other pages I hadn't viewed and hadn't had time to cache before I left the online version, displayed my offline.html page.

PWABuilder stores pages offline in the browser cache. Clear the browser cache, lose the offline stuff.

What PWABuilder gave me, in combination with ProCache, was super fast load times and pages that could be viewed offline. It's a good starting point, not the be-all-and-end-all.

I'm still learning this stuff too :) 

 

 

  • Like 1

Share this post


Link to post
Share on other sites
Posted (edited)
On 2/19/2018 at 9:29 AM, psy said:

Steps:

  1. Go to http://www.manifoldjs.com/generator and fill in the blanks

 

Somehow this URL leads me to https site, but all my browsers are saying: not secure....
This server could not prove that it is www.manifoldjs.com; its security certificate is from *.azurewebsites.net
I've added an exeption, but then I got a 'Page not Found' :-/

 

Edit* -  never mind... -> https://www.pwabuilder.com/

Quote

With this update, Manifoldjs will be renamed PWA Builder. The name will change to fit the technology, but our goal remains to help web developers keep their workflow, while enjoying native aspects of client OSes.

 

Edited by videokid

Share this post


Link to post
Share on other sites

Hello @psy, I got it working for the home page, but not for the pages down the tree.

I tried putting the full url everywhere I think it should be...

Is it possible to show full examples of the files? 

Share this post


Link to post
Share on other sites

I now have 100% for PWA in lighthouse on all pages.

I forgot the url to the pwabuilder-sw.js in _main.php.

Still not sure how it all works but the tips above do help. thanks.

 

 

Screenshot from 2018-03-18 22-19-19.png

  • Like 1

Share this post


Link to post
Share on other sites
1 minute ago, webhoes said:

Still not sure how it all works

Haha, me either but it does :lol:

Share this post


Link to post
Share on other sites

Discovered a 'gotcha' with PWABuilder.

When a page should go to the Error 404 page, the offline.html page is displayed instead.

Not helpful in this instance.

Any suggestions on how to fix most welcome.

Share this post


Link to post
Share on other sites

A few very recent updates to the PWA story:

  1. Finally Apple iOS has support for service workers so PWA Builder works on iPhone Safari v11.3+
  2. Google has released/updated its docs for building your own PWA scripts with Workbox. GitHub version updated 9 days ago

The thing that interested me most, and the thing most requested by my customers, is entering data to forms when offline then auto-updating the db when online. Haven't tried it yet but https://developers.google.com/web/tools/workbox/ looks very promising, especially https://developers.google.com/web/tools/workbox/modules/workbox-background-sync Untested and maybe not the answer but at least the demand is recognised

 

 

 

Share this post


Link to post
Share on other sites
2 hours ago, psy said:

A few very recent updates to the PWA story

Also, this: https://jakearchibald.github.io/isserviceworkerready/ 🙂

And the latest Edge version now supports PWA features.

Quote

Starting in EdgeHTML 17, Service Workers and push notifications are enabled by default

https://blogs.windows.com/msedgedev/2018/04/30/edgehtml-17-april-2018-update/#bu5H7OqbuguSwr2B.97

  • Like 1

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.