psy Posted February 19, 2018 Share Posted February 19, 2018 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: 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. Go to http://www.manifoldjs.com/generator and fill in the blanks 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: 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! 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. 15 Link to comment Share on other sites More sharing options...
dragan Posted February 19, 2018 Share Posted February 19, 2018 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"? 2 Link to comment Share on other sites More sharing options...
psy Posted February 20, 2018 Author Share Posted February 20, 2018 @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. 1 Link to comment Share on other sites More sharing options...
psy Posted February 20, 2018 Author Share Posted February 20, 2018 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 1 Link to comment Share on other sites More sharing options...
dragan Posted February 28, 2018 Share Posted February 28, 2018 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? Link to comment Share on other sites More sharing options...
dragan Posted February 28, 2018 Share Posted February 28, 2018 Another question: Does it also create that "do you want to add it to your homescreen?" that was featured in the video? Link to comment Share on other sites More sharing options...
psy Posted March 1, 2018 Author Share Posted March 1, 2018 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 1 Link to comment Share on other sites More sharing options...
videokid Posted March 16, 2018 Share Posted March 16, 2018 (edited) On 2/19/2018 at 9:29 AM, psy said: Steps: 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 March 16, 2018 by videokid Link to comment Share on other sites More sharing options...
webhoes Posted March 18, 2018 Share Posted March 18, 2018 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? Link to comment Share on other sites More sharing options...
webhoes Posted March 18, 2018 Share Posted March 18, 2018 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. 1 Link to comment Share on other sites More sharing options...
psy Posted March 18, 2018 Author Share Posted March 18, 2018 1 minute ago, webhoes said: Still not sure how it all works Haha, me either but it does Link to comment Share on other sites More sharing options...
psy Posted April 23, 2018 Author Share Posted April 23, 2018 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. Link to comment Share on other sites More sharing options...
psy Posted May 12, 2018 Author Share Posted May 12, 2018 A few very recent updates to the PWA story: Finally Apple iOS has support for service workers so PWA Builder works on iPhone Safari v11.3+ 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 Link to comment Share on other sites More sharing options...
dragan Posted May 12, 2018 Share Posted May 12, 2018 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 1 Link to comment Share on other sites More sharing options...
JeevanisM Posted May 26, 2020 Share Posted May 26, 2020 @psy have you taken the video down from the youtube ? not able to view it now Link to comment Share on other sites More sharing options...
psy Posted May 26, 2020 Author Share Posted May 26, 2020 8 hours ago, JeevanisM said: psy have you taken the video down from the youtube ? not able to view it now Not my video - just shared it ? Link to comment Share on other sites More sharing options...
Recommended Posts