PWA Progressive Web Apps- Tutorials , WordPress PWA plugin & chrome dev scrape web page table
I have been watching this series by the Net Ninja. He does really comprehensive beginner tutorials and I was extremely impressed with his series on PWA’s.
PWA’s can run offline by caching data in browser
From what I can figure PWA’s are web pages that work offline by caching info in your browser- newer browsers allow this to happen by 1/ Storing the html/js/css files that you need to display your page and also other files and data, as well as being able to have a mini database store where you can keep items you’ve already viewed in your browser for another time. It can get messy when you refresh the data as it could be refreshed from the cache so you get stale data, or it could be from the network.
To make this happen you crate a service worker that sits between the browser page and when it makes requests, within the service worker you can create rules for refreshing the data, you can have things like Cache first then go to network if you havent got it in cache, this is useful for reasonably static sites with little change. Then there is network first, for weather updates or news, where you are trying to get the latest info, then there is staleWhileWaiting, that immediately displays data from cache but at the same time goes to the network, if there is newer stuff on the network it brings it back and updates the cache and browser page.
So site relies on HTML, CSS & JavaScript.
Service Workers and Workbox
The service worker does the managing of when you are online or offline and there are ways to set rules about that with Workbox (JavaScript Libraries for adding offline support to web apps), that will re-write the service worker file if things change.
Audits & Dev Tools
There are a heap of tools in Chrome (I’ve yet to check out firefox with a running PWA, but I think I can do most things in Firefox and just do audit in chrome), but there are extra features in Chrome dev tools such as lighthouse which will run an audit on your PWA to see if its passing the requirements for a PWA.
Add to homescreen
To help make them look like a native application you can get a pop-up that asks if you’d like the app added to your home screen. I’ve yet to test that out. A nice feature though.
Notifications
Apparently you can do push notifications with PWA’s but they look as if they can be a bit temperamental and may depend on the browser you are using.
Works across platforms
As per web pages, it works across platforms so you don’t need to worry about the OS (not sure about linux).
Niggles- Only later browsers, Safari, Chrome, FireFox & Edge & serious coding
The PWA may perform differently depending on what browser you use and what version you are using. My Firefox updates itself on my machines, so thats fine, but if I had an older browser version I may run into some hitches.
You are having to do some serious coding but at the same time you can call API’s, link to Databases such as firestore and do other nice things, so coding pain versus versatility. Google seem to be wanting to make this happen so they are adding tools to help this along.
Creating Manifest files with online tools
I saw one vid where they were using online tools to make the manifest file, App Manifest Generator was one, PWA Builder Generator is another and it seems to also take your image and create the different sized images that you require. That is handy as that looks a little fiddly.
Starting Net Ninja tutorial
I’ve downloaded the Github resources from Here. I have the last lesson so I have to setup my own firebase DB and app, which I have done as per vid 23 in the series.
I’m getting no css or manifest or JS on the page, so I think I’ll need to go back a few lessons and start at an earlier point.
So I went back to lesson 8 and opened that on Code Live Server and it works fine. But no service workers or anthing at that point, so I may have to move forward a bit.
Jumped to lesson 12 then on to 17. In firefox you have the Dev Tool Tab Application that Shows Service Worker & Manifest, but you have to go to the Storage tab to see the Cache. All on Application tab in Chrome.
Starting Jad Joubran tutorial
This has a simple API call for the app and the app layout is simple (in design but with some good CSS (Cards), so beyond me at the moment as I’m not that great with CSS). Link to his github files here.
Have Vid 2 code up and running in VS Code. Followed through the video 6. The Workbox is loaded now, for doing service workers, also did webpack, but I need to get my head around that. Not as much explanation but quick and demonstrative, so useful. You end with something functioning at the end. I will watch other tutorials of this chap.
WordPress Super Progressive Web Apps Plugin
As I’m exploring PWA’s I wondered if I could conmvert my existing wordpress sites to make them PWA. There are a couple of Plugins for this and Super Progressive Web Apps Plugin has some good reviews and a large number of users, so I decided to try it out.
The setup was quite easy, apart from images. For the images you need a 194 x 194 PNG & a 512 x 512 PNG. Initially I loaded JPG files and they didn’t work, so when I tried installing the website onto the mobile it just showed a coloured background.
I ended up using Microsoft PowerToys to resize a couple of PNG images I had and they worked from Windows File Explorer. So set small and Medium image resizer to the 194 x 194 PNG & a 512 x 512 PNG and after selecting image, right click (with powertoys running) and select image size and it makes a copy. Easy as ….
After that just follow the requirements of the plugin a voila…
They all install ok. I had to go into private mode for the pir site, I got an earlier icon , so I’m wondering how you clear the browser cache on a mobile browser. I’ll need to check that out sometime.
Using Chrome Dev tools to get data from online Tables- a good tutorial to try later
One I was impressed with was his quick getting table data out via chrome dev tools. I’ll use that next time for a scrape of a site.
End comment
This looks interesting but complicated. There are some good things I like about it. The basic HTML/CSS/JS and databases. This is standard web stuff , and using Browser storage is great.
But its coding from scratch, so will take some time to learn. And lots of JS which always flumoxes me. So I’m in for some pain.
The nice thing about this is its all free and you don’t need to be on any platform. The Goolge cloud Firebase will be my first test with the Net Ninja tutorial.
The PWA for my websites with the Super PWA plugin was interesting. I’m sure not many people will use it but an interesting exercise.
I would like to do the expenses app I have on glide and get the functionality on that up and running and see how it is with speed versus the glideapp equivalent. Basic and raw. That will be my first project with PWA.
There is also apparently WordPress plugins (I already have too many) but it may be worth trying it out on a couple of my sites.
So, there will be pain, but a good deal of learning too hopefully.
