Ben Video Tutorial 5 PWA

Mobile Apps
#2

Hi @NewMedia and thank you for your kind words.

The icon that you are seeing is for Microsoft To Do and has nothing to do with the subject matter. My cursor rolled over the icon in the 3rd minute of the video.

Since I produced the series, I have learned to turn the Taskbar off to overcome confusion. At the moment, I am working on a new video that talks of turning an existing site into a PWA. I should have this finished over the next couple of days.

As far as registering the service worker, the following code will do that

if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘sw.js’)
.then(reg => console.log(‘service worker registered’))
.catch(err => console.log(‘service worker not registered’, err));
}

If you place the above code in your page and have an empty sw.js file, then, in the console, you will see

image
image827×197 102 KB

1 Like
#3

Thank you, Ben!

I really try to catch every mouse move and click in a step-by-step tutorial. If a hand appears and smacks a fly on the screen I’ve been self-trained to install my own fly and smack it, too!

I am really, really looking forward to your PWA conversion from a standard website tutorial.

While you are working on this, for another tutorial module, perhaps you can cover converting a website that also has a LOGIN requirement to access its features.

I really appreciate the work you’ve put in, Ben.
I’ll be looking for a donation link.

#4

Please see

2 Likes
#5

Ben —

What do you use for the narration? It is excellent!

1 Like
#6

http://blastersuite.com/wordnew/video-spin-blaster-pro/

#7

Wow!

There are lots of tools for creating existing websites into PWA’s. And at first I thought I was looking at a non-dynamic website on its remote server online.

But I’m seeing now that this video is about using already Wappler-created websites whose project folder contains all the necessary elements and which should be loaded as a template or a cloned project in a separate folder to start with.

I’m a bit confused at the beginning because the normal steps for starting a NEW project as defined in Wappler are not included.

By squinting I can see that you have named a new Project “Adding PWA” and that the target is “Development”.

I really need to see those steps first.

#8

Have a look at

PS: You can start at one of the other videos in the series if this first one is boring.

#9

I follow all of your videos, Ben!
So, when you made the Converting a Web Site to a PWA tutorial –
Did you CLONE the previous Website Project first into a separate folder so that no Project files for that website were overwritten?

Or were you using it as a previously saved Template to define the properties of your “Adding PWA” tutorial?

Or what was the process you used to create “Adding PWA” for your last Tutorial?

Without seeing your “Adding PWA” Project Settings, particularly TARGET, I can’t tell what I might be missing as I try to replicate the basic steps going forward in your Tutorial.

Screenshot 2020-11-10 at 13.31.05
Screenshot 2020-11-10 at 13.31.051630×1200 64.9 KB

1 Like
#10

Wow, you are very observant. The idea of the video is to start with an existing website. It does not matter what type of website. Because the PWA process is completely client side, making use of browser API’s, it is server agnostic, meaning that it can be used on any server platform. The only exception is a SPA hosted on NodeJS. I have tried for more than a week to make it work, but was unsuccessful. Will try again at some later stage.

How I arrived at my existing project? If you promise not to tell anyone else (especially the Wappler Team); I created a new project, then copied all of the files from the Aardvark project into the new project.

1 Like
#11

I took a look at the software site. However, I learned it was a Windows based app. All of my machines are Macs.

#12

If you are referring to the voice over program, it is web based. As such, it works in a browser and is not related to any operating system.

#13

Oh, that’s great. I bought it and will try it out! Thanks!

1 Like
#14

Okay, I’ll block the Wappler team from learning your Deep Secrets, Ben.

So, it turns out your secret is very much like my own secret!

Thanks for allowing me to relax now in my own state of ignorance.

1 Like
#15

I notice that the voiceover on your PWA tutorial sounds quite a bit better than their OWN Demos.
Their VO for their Marketing Demos sounds rather robotic. Yet, yours is much more natural in flow, pauses for phrases, etc.

It sounds like you Tweaked your rendered VO, partly by how you wrote the text to be converted in the first place.

1 Like
#16

One place I’ve been looking at for SPA & Node.js

#17

I have viewed all the info. However, I have not located the link or info regarding access to the web based application. Any suggestions?

#18

Yes, it is easy to create a SPA under NodeJS in the latest versions of Wappler.

The problem is to convert this into a PWA

#19

Try
https://danielvitali.com/speechelo-3/?gclid=CjwKCAiAtK79BRAIEiwA4OskBm8h1tAI8gdGinMH_7ZI3yrFJE3v-nn4E9nF3-lNhZksrZnFOiOWUxoCfswQAvD_BwE

1 Like
#20

Thanks Ben. I appreciate your help very much.

#21

Voiceovers, that’s what I’ve done for years. Audio books, radio & television spots, documentaries, characters. Middle-American Male.

But now I have competition! This sounds like a program that could save us all from Robotic narration or, hard-to-understand tutorials.

Good Deal!

1 Like