googlechromelabs/progressivewordpress

A Sample WordPress-based Progressive Web App

Progressive WordPress (PWP)

A Sample WordPress-based Progressive Web App.

Local Development

Setup

Theme

Install all the dependencies (use Node 8 or newer)

$ npm install

and build the theme

$ npm run build

For continuous builds, run

$ npm run watch

Docker

The Docker setup is a network consisting of Caddy, Apache2/PHP7 and a MySQL container. The image for the Apache2/PHP7 container is based on the official Wordpress Docker image. It is also published to the Docker Hub if you don’t want to build locally. WordPress also needs a MySQL server for which the official MySQL Docker image is used. Caddy is added to the mix for easy local HTTP/2 development.

$ docker pull surma/progressivewordpress # if you don’t want to build locally
$ docker-compose up -d

The WordPress install wizard is now available at http://localhost:8080. If you want to use HTTP/2 during development, you have to:

• point surmblog.dev to 127.0.0.1 using /etc/hosts
• trust the certficiate in caddy/certs
• navigate to https://surmblog.dev:8443 instead

Once installed, make sure to enable the theme “surmblog” and set the permalink style to “Post name”.

---

Apache 2.0

progressivewordpress's Issues

Lazy loading images: No fallback on disabled javascript

If you disable javascript the thumbnail is not replaced with the real image.

What about putting the original img tag into a noscript tag?

I found this blog post that goes more into detail: https://www.robinosborne.co.uk/2016/05/16/lazy-loading-images-dont-rely-on-javascript

Docker pull URL is not working

The docker pull command doesn't work, it was returned not found response. It suppose to be docker pull surma/progressivewordpress because i found it here

install issues

When trying to install, I couldn't successfully run npm run build, discovering that the minimum version of node needed is node 7.6+. It would be nice to mention this in the README.md

On the first execution of npm run build with node 7.6, I got the error Error: ENOENT: no such file or directory, open 'dist/theme/scripts/system.js'.
Running again npm run build worked fine. To reproduce, run:

$ git clean -d -x -f 
$ npm install
$ npm run build

Error and service worker redundant

Hi,
I am not sure why I am getting this error message: and the service worker is redundant.
sw.php:1 Uncaught (in promise) TypeError: Request failed

Thanks

PWP Lazy Image plugin: Filter content on output, not on input

Hey!! I think that custom elements should replace native images elements on content output, not on content input. Actually, the content is modified and saved to database. In this way you get stuck to PWP lazy image plugin. If you want to use other lazy load solution or want to change the theme at any point in the future, you will need to rewrite all the posts content and save them again to database.

Alternative: use the_conent filter instead of content_save_pre. This way you preserve the content in the native format and you are free to switch between themes, lazy load solutions or even publishing platforms at any time:

add_filter('the_content' , 'lazify_images', 0, 1);

It can add a very little extra work in every request, but you get more freedom. What do you think?

Scrolling done too early

To repro:

• scroll the main page
• navigate to a post
• hit browser's back button

The scroll position is restored too early, ideally it should wait for the content to fade out, then restore the scroll.

Not clear how this happens, as scrollTop gets set only in toSingle() but the function called on the browser's back is toFull()🤔

Implementation Question

Hi,

Thanks for updating the readme. Everything works as expected now. I have a couple of follow up questions.

1. Is the twentyseventeen theme the PWA theme (it doesn't clarify which theme to activate in the instructions).
2. I set permalinks to post_name, clicked the Hello World post on the front end to make sure it loaded at least once, went back to the home page (on the front end), stopped the container (docker-compose stop), and then click the Hello World link (again). I was then expecting to see the page load (via all the fanciness of a PWA) but instead got ERR_CONNECTION_REFUSED. Is this the intended behavior?

Thanks again for working on this. As you can see, I'm closely following along.

How can I install this on my wordpress blog running on CPanel?

I uploaded and extracted this .zip file on the /wp-content/themes/ folder,

On the theme installation page, it says "

Name | Description |  
ProgressiveWordPress-master | Stylesheet is missing.

No peer certificate available - Bad SSL Response

Hi,

Following the instructions to simply download and run locally (docker pull…; docker-compose up -d) and the server is responding with ERR_SSL_PROTOCOL_ERROR when accessing https://localhost:8080.

Not sure if this is helpful, but perhaps…

openssl s_client -connect localhost:8080
WARNING: can't open config file: /Users/mattt/Desktop/PostgresApp/Postgres/Vendor/postgres/ssl/openssl.cnf
CONNECTED(00000003)
140735691084808:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:s23_clnt.c:766:
---
no peer certificate available
---
No client certificate CA names sent
---
SSL handshake has read 7 bytes and written 322 bytes
---
New, (NONE), Cipher is (NONE)
Secure Renegotiation IS NOT supported
Compression: NONE
Expansion: NONE
---

Would love to get rid of the WARNING: can't open config file: but not sure where that's really coming from, a botched Postgres SQL installation, I think, that I'm no longer using, but that doesn't make much sense either because it is outside the Docker container.

Any help greatly appreciated.

Thanks in advance.

Running on Mac OS X 10.12.6 (16G29)

Issue with Seeing New Changes in Dev Environment

Hello, I ran into a couple issues with the service worker/routing code that I'm trying to debug (may open an issue later if this turns out to be something not specific to my environment/setup), but whenever I try to modify the code (mostly adding some debugging console.log statements for now, or tweaking logic), I cannot see the changes appear.

I have tried:

• Restarting the docker instances generated when I first set up using docker-compose up -d / docker-compose down
• Clearing the app cache (Chrome dev tools > Application tab > Clear Storage section > check all boxes > click "Clear site data"
• Rebuilding using either node build.js or npm run build before each step above

With no effect on the output, rendered HTML, etc. So, any guidance on what I might be doing wrong would be extremely appreciated.

My tweaks were to sw.js, header.php, and router.js, if that helps at all. I can provide a complete list of changes I was working on if that would help, as well.

---

Edit: My environment, which could be useful:
macOS v10.13.2 running Docker 17.09.1-ce-mac42 (21090)
Browser: Chrome Version 63.0.3239.84
Node: v8.1.2
NPM: v.5.6.0

No theme called Surmblog

Hi Surma,

I got the PWA up and running using the Docker method, however after installing WP I can't see the theme surmblog. Is there anything I missed?

I followed all steps in the Readme. Im not a Docker expert but couldnt really see any errors.

NodeJS version: 10.15.0
NPM version: 6.4.1
Running locally on WIndows 10

Thanks!

Failed at the [email protected] build script

Please let me know if you need any other details about my machine or configuration. I have no idea how to solve this.

./ProgressiveWordPress-master/build.js:30
async function copyStatic() {
      ^^^^^^^^

SyntaxError: Unexpected token function
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Function.Module.runMain (module.js:447:10)
    at startup (node.js:141:18)
    at node.js:933:3

npm ERR! Darwin 16.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v5.7.0
npm ERR! npm  v3.6.0
npm ERR! code ELIFECYCLE

iOS Safari: content missing

1. Load https://pwp.dassur.ma/ in iOS Safari.
2. Tap on a link to e.g. a blog post.

Expected:

Content appears.

Actual:

Content does not appear. (Header and footer are visible, but not the "body".)

Failed at the [email protected] build script

NodeJS version: 10.15.0
NPM version: 6.4.1
Running locally on WIndows 10

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 info lifecycle [email protected]~build: [email protected]
7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~build: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\christians\Desktop\wordpress-pwa\ProgressiveWordPress\node_modules\.bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\ProgramData\ComposerSetup\bin;C:\WINDOWS\System32\OpenSSH\;C:\wamp64\bin\php\php7.2.4;C:\Program Files\nodejs\;C:\Ruby22-x64\bin;C:\Users\christians\AppData\Local\Programs\Python\Python36-32\Scripts\;C:\Users\christians\AppData\Local\Programs\Python\Python36-32\;C:\Users\christians\AppData\Local\Microsoft\WindowsApps;C:\Users\christians\AppData\Roaming\Composer\vendor\bin;C:\Users\christians\AppData\Roaming\npm;C:\Program Files\Git\bin\;C:\Program Files\Git\cmd\
9 verbose lifecycle [email protected]~build: CWD: C:\Users\christians\Desktop\wordpress-pwa\ProgressiveWordPress
10 silly lifecycle [email protected]~build: Args: [ '/d /s /c',
10 silly lifecycle   'npm version --no-git-tag-version -f patch && mkdir -p dist; node build.js' ]
11 silly lifecycle [email protected]~build: Returned: code: 1  signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] build: `npm version --no-git-tag-version -f patch && mkdir -p dist; node build.js`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
13 verbose stack     at EventEmitter.emit (events.js:182:13)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:182:13)
13 verbose stack     at maybeClose (internal/child_process.js:962:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
14 verbose pkgid [email protected]
15 verbose cwd C:\Users\christians\Desktop\wordpress-pwa\ProgressiveWordPress
16 verbose Windows_NT 10.0.17763
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
18 verbose node v10.15.0
19 verbose npm  v6.4.1
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: `npm version --no-git-tag-version -f patch && mkdir -p dist; node build.js`
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Theme structure

Hi Surma,
Thanks for the theme. I just wonder if you could describe the theme structure as it's not as a normal theme.
And I see the style.css is empty? so how WordPress get the name of the theme?
And I see there is an error message here:

https://pwp.dassur.ma/wp-content/themes/surmblog/
Fatal error: Uncaught Error: Call to undefined function etag_start() in /var/www/html/wp-content/themes/surmblog/index.php:16 Stack trace: #0 {main} thrown in /var/www/html/wp-content/themes/surmblog/index.php on line 16

Thanks

Default database name?

I am trying to replicate this setup and I have a docker-compose file up and running.
When trying to configure Wordpress through their setup pages, what settings do I need to connect to the DB?

database ?? whats the default
username root
password sosafelol
database host mysql

How apply the theme on a Wordpress that's already running ?

Hi @surma ,

When I try run the theme in my repository using 'npm run watch' or 'npm run build', this error appears:

async function copyStatic() { ^^^^^^^^ SyntaxError: Unexpected token function at createScript (vm.js:56:10) at Object.runInThisContext (vm.js:97:10) at Module._compile (module.js:542:28) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.runMain (module.js:604:10) at run (bootstrap_node.js:389:7) at startup (bootstrap_node.js:149:9) [build] [nodemon] app crashed - waiting for file changes before starting...

There are something wrong in my local ?

So, I too tried use only the theme and the plugin folders in a default installation of Wordpress on my server, but these errors appears in console:
The site where I try to apply this theme is: https://saopaulopublicidade.com.br/

Failed to load resource: the server responded with a status of 404 (Not Found) system.js Failed to load resource: the server responded with a status of 404 (Not Found) saopaulopublicidade.com.br/:791 Uncaught (in promise) ReferenceError: SystemJS is not defined at reduce (saopaulopublicidade.com.br/:791) at <anonymous> custom-elements.js Failed to load resource: the server responded with a status of 404 (Not Found)

How is the way to apply the theme on a installation of wordpress that's already running ?

Pwa example link crashes in Android Chrome browser

When I load the site https://pwp.dassur.ma into the Chrome browser on my android phone it crashes within 2 seconds. Error message: oops something went wrong.

The page loads OK on Firefox on android.

Errors when `npm run build`

maria@MacBook-Pro-Maria:~/Downloads/ProgressiveWordPress$  npm run build

> [email protected] build /Users/maria/Downloads/ProgressiveWordPress
> npm version --no-git-tag-version -f patch && mkdir -p dist; node build.js

npm WARN using --force I sure hope you know what you are doing.
v0.0.3413
/Users/maria/Downloads/ProgressiveWordPress/build.js:32
async function copyStatic() {
      ^^^^^^^^
SyntaxError: Unexpected token function
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:389:7)
    at startup (bootstrap_node.js:149:9)

npm ERR! Darwin 17.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v6.11.0
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `npm version --no-git-tag-version -f patch && mkdir -p dist; node build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script 'npm version --no-git-tag-version -f patch && mkdir -p dist; node build.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ProgressiveWordPress package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm version --no-git-tag-version -f patch && mkdir -p dist; node build.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ProgressiveWordPress
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ProgressiveWordPress
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/maria/Downloads/ProgressiveWordPress/npm-debug.log