Processwire as a Progressive web app backend

[Gideon So]

Hi,

I am not sure if it is the right forum to ask this question. If not, please move it to the appropriate forum.

I would like to build a Progressive web app with Processwire as the backend to serve content to the web app. Is it possible? If so, what is needed?

Any ideas and suggestions are welcome.

Gideon 

[rick]

Hi @Gideon So,

What you ask can be done. Is it possible? Yes. What is needed? This is the kicker. Obviously it depends on your application requirements, and what you want to incorporate as 'progressive'.

Take a cell phone provider application as an example.

I use a top level page for the process module. Under which is a page for each cell phone provider that contains specific cell phone provider information, such as url, plan rates, etc. Under those pages are the pages for each application subscribed user that contains specific information about that user regarding that specific provider, such as password, services used, etc. Also under the process module is a history page for each user which tracks their application usage history.

Cellphone Process Module
- ATT
-- User A Provider page
- Verizon
-- User A Provider page
-- User B Provider page
- Sprint
-- User B Provider page
- History
-- User A History page
-- User B History page

This allows me to have a template for each provider, and a template for each user of that provider. Making changes to each template is relatively simple to reflect those changes in your code.

I don't use cookies to track usage simply because it won't be available if the user changes devices. You could however use cookies as a temporary storage and write the data to the history page on each user selection. You can get very complicated very quickly tracking user history so I would start off simple at first. What article/image/ad was displayed at what time. Did the user click any creative? If so, at what time? Did the user page through the complete article or stop mid-way? etc.

There are many utilities available to provide a smooth UI experience, but I don't use many of them simply because it is not worth the data load to me. That is entirely up to you as to how fancy looking you want to make the UI. I tend to use javascript only to ensure the user doesn't submit a form more than once, provide initial validation, etc.

This is a simplistic answer, but I hope it gives you food for thought.

 

[heldercervantes]

I've never really built a progressive web app, so this answer may be silly. Not having experience with them, I only know the basics, and am not aware of the best practices.

Disclaimer out of the way, Processwire's best feature is the flexibility of what you can make with it. I've made web-apps that mimic the look and feel of an actual app, and I've made single-page web applications that load content through Ajax calls.

You can very easily set up a page template that grabs content of the POST variables, does its thing and outputs whatever you want, be it JSON, XML or just a chunk of HTML to feed into a <DIV>. If your frontend is able to read that output and display it, you're good to go.

[Gideon So]

One of the ways is installing Processwire in a sub-directory called api and the progressive web app built with Angular or Vue in the root directory.

Then Processwire serves as a REST api provider and the web app fetch json data and parse it to content.

I need offline access to contents, the I can cache api/site/assets/ with service worker.

Is this feasible??

Gideon

 

[StanLindsey]

4 hours ago, Gideon So said:

One of the ways is installing Processwire in a sub-directory called api and the progressive web app built with Angular or Vue in the root directory.

Then Processwire serves as a REST api provider and the web app fetch json data and parse it to content.

I need offline access to contents, the I can cache api/site/assets/ with service worker.

Is this feasible??

Gideon

 

That is absolutely feasible. An application doesn't really care where it gets its data from, you just need to send a PWA compliant app bundle down to the client and within that app consume some APIs to get data. Whether that API is on a Digital Ocean, AWS, Linode server, or whether its written in NodeJS, PHP, Ruby, Go or whether its built on top of Wordpress, Magento, ProcessWire doesn't make much of a difference. 

I'm not sure how familiar you are with PWAs, but if you haven't built one yet I'd suggest you test it out without the ProcessWire part of the stack. If you can build a PWA that consumes the Github API, caches it with a Service worker and displays it offline. Then moving to a ProcessWire API Backend will be dead simple. 

ProcessWire is fantastic for this sort of headless/API based CMS, So you're making a good choice there  

[Gideon So]

@StanLindsey

I think making a PWA without a backend is not hard. There are so many tutorials and examples.

56 minutes ago, StanLindsey said:

ProcessWire is fantastic for this sort of headless/API based CMS, So you're making a good choice there  

Agree.

Thanks for the advice and encouragement.

Gideon

[bernhard]

@Gideon So very interesting topic, maybe you want to share your learnings in a post in the tutorials board?  

[Gideon So]

@bernhard I am not a capable and decent programmer. I am still learning writing code. I will try my best to work on it.  If I were able to get it done in a professional way, It is no doubt I would share my experience with all of you.

In fact I am inspired by this thread:

I think @POWERFULHORSE is able to give us some more light on how to do it.

@adrian also mentioned that he has some experiences. Would you share something with us here??

 

Gideon

[adrian]

On 1/26/2018 at 5:12 PM, Gideon So said:

@adrian also mentioned that he has some experiences. Would you share something with us here??

I haven't used their new PWA toolkit, but I have used PW as a backend for an Ionic app before. Might be worth taking a look: https://blog.ionicframework.com/announcing-the-ionic-pwa-toolkit-beta/

[bernhard]

6 minutes ago, adrian said:

Might be worth taking a look: https://blog.ionicframework.com/announcing-the-ionic-pwa-toolkit-beta/

just got an email from them:

Quote

Our community has spoken and PWA's are  ! We have had over 5,000 users sign up for our webinar and have exceeded our platform's capacity!   As a result we are moving our webinar over to YouTube live so everyone can attend.    The broadcast will start, Thursday February 8th, at 1 PM EST.    Progressive Web Apps (PWAs) are a huge new opportunity for developers. Major brands such as Twitter, Starbucks and Pinterest are jumping on the PWA trend.   Join the talk and progress your apps.

Join the PWA Live Talk

 

[Gideon So]

@adrian @bernhard Thanks for the info. Look promising.

[adrian]

Live right now: 

 

 

[adrian]

I think this is the new current feed

 

[szabesz]

Thanks Adrian! Luckily he was held up by the "technical issue" so I could watch it live.

So this is a PWA: https://stenciljs.com/ It IS performant but these early PWAs look rather poor on a desktop.

Demos: https://stenciljs.com/demos

They simply look like blown up mobile apps, but it is surely just the beginning...

[LeTroner]

Just an quick note... Building a web app using processwire as backend serving JSON via an API to VUE. Works very well... just wondering about performance compared to Laravel or something similar. But at this stage the knowledge I have of Processwire is such an advantage that allows me to work really fast. Would absolutely recommend using it for prototypes... you can always migrate later on to another backend and you can keep the front-end exactly as it is.