SPA and PWA Boilerplate for Wappler

Today I managed to find time to start a tutorial based on the repository

The first video titled “Introduction” has now been published

I will try to create each of the next parts at a rate of one per day.

13 Likes

Great work Ben!

This is a fantastic starting point everybody is asking for!

SPA and PWA technologies are now easy to implement thanks to your boilerplate!

Together with the videos this will definitely be a great starter for many projects!

2 Likes

Very clever Ben, such a nice way to explain the way the technologies fit together too, thank you. Probably one of the easier explanations of PWA in use I have seen.

1 Like

Thank you both for your encouriging words, much appreciated.

Edit: Removed the video bcause it contains errors. Apologies. :blush:

Second edit:

The video is back again :joy:

3rd Video:

4th Video: The Index File

5th Video

8 Likes

So this works on the local machine/mobile device even though routes are implemented through a .htaccess file on the php server?

Are all the routes saved in some way so there is no need to make a call to the server?

It looks like the answer is ‘yes’.

Edit: Go to https://hollandtrade.com.au/ and try it for yourself

2nd Edit: I forgot about this one https://bunchoblokes.org/ where I still need the database to be used offline. And what about this forum which is also a PWA.

2 Likes
2 Likes
2 Likes
2 Likes

Can we have tutorial on implementing PWA + push service? :pray:

Short answer: Yes :+1:

Long Answer: I have wanted the boilerplate to be suitable for developers that are starting off using Wappler, to give them somewhere to start. The reason for including features such as SPA and PWA is because these can be silently included in the boilerplate without needing in depth knowledge of these techniques.

With Push notifications, this is different. We need to create a secure Admin section where we can send the notifications, we need a database and API (VAPID) keys.

The roadmap:

  1. Finish the totorial for the PWA Boilerplate
  2. Add database functionality
  3. Add Push notifictaions

In the meantime, you may want to have a look at

3 Likes
4 Likes
1 Like

First off, thanks for this awesome product! I look forward to being a longtime Wappler customer/student/user.
Secondly, Thanks Ben for making this awesome video as a beginner it is exactly when I needed to start familiarizing myself with Wappler.

My issue today: I am currently studying and following along with the PWA Boilerplate for Wappler youtube video. https://youtu.be/fq9TL_pisy4 . I have not finished this project but have it installed on my phone, which I hoped would automatically update itself and reflect the changes when I post new components on the app. However I’m finding this is not the case unless I first clear the browser cache, only then the app shows the updated page content. Is there an easier way to force the app to see my changes? This is the app in question, see link below.

https://bzebee.com/

Change the Service Workerversion and (re)load the app.

1 Like

Hello Ben,
I have tried as you suggested and no luck. Is it possible my host could be causing issues with the service worker?

I have uploaded the updated sw.js , I also made a change to my _home.html. I then opened the app on my phone, closed it and reopened it and still the modification I made to the page is not reflected.

I had an experience with Siteground (CPanel driven) some time ago that caused me a similar issue. They had a feature, I think it was called Super Cache, that was turned on by default. It would cache files outside the scope of your site/app so strategies you adopt (like Ben’s) weren’t effective. Check with your host and turn any feature like this off if you want full control of caching strategies.

Try clearing the data using the Chrome Developer Panel

Hello Ben,
I have done as you suggested. My SW versions are now at
const staticCacheName = ‘site-static-pwa-v2.0.4’;
const dynamicCacheName = ‘site-dynamic-pwa-v2.0.4’;

Can you tell me if the changes I made to _home.html was automatically updated on your side?

1 Like