Add PWA Support to the Theme about theme-scaffold HOT 7 CLOSED

A placeholder image is an interesting one, but a challenge is making one that scales at all aspect ratios in a way that it doesn't look horrible. Hopefully 404 images should be rare anyway, right?

For the PWA plugin, you can refer to my child theme of Twenty Seventeen to see some integrations: https://github.com/westonruter/twentyseventeen-westonson

In particular:

• Offline page (offline.php) and Internal Server Error page (500.php). See also mentions of offline and 500 in functions.php, and pick what you need.
• Precaching scripts and styles for offline access. The PWA plugin in develop has this integration behind a flag.
• Customize the Web App Manifest via filter.
• Opt-in to stale-while-revalidate for navigation requests.

Note that WPRig has added support for the offline/500 templates as well: wprig/wprig#212

Beyond these aspects, the rest is really up to the specific site's needs. For instance, adding support for SPA (app shell) via AMP you can refer to this un-merged PR: ampproject/amp-wp#1519

👉 The PWA plugin would value your feedback from integrating. It's overdue for releasing 0.2 on WordPress.org, so any feedback you can give would help in that regard to push out the next release.

from theme-scaffold.

My next thought was to place it at the root of the theme, but this still traps us a bit. Ideally, we need to place the service worker in the root install of a project.

@dainemawer Could you please use the PWA feature plugin for this? It handles this for you.

Aside: We're about to release 0.2 on WordPress.org.

from theme-scaffold.

Write up about a service worker template: https://madebymike.com.au//writing/service-workers/

from theme-scaffold.

Perhaps some integration with PWA plugin (Google, Automattic, XWP) hooks if the plugin is active?

Examples:

• wp_register_service_worker()
• web_app_manifest()
• wp_register_service_worker_caching_route()
• wp_service_worker_integrations_enabled()

from theme-scaffold.

Think a simple service worker to potentially provide:

• "Offline" page
• Image placeholder (loads a branded image for the site if the image 404s)

May be a good baseline for inclusion.

from theme-scaffold.

@timwright12 I've added a manifest file and tested. Heres the output of Lighthouse's Audit:

Just waiting on write access to the repo, which I pinged you about in Slack.
I looked into the Service Worker as well. Service Workers are scoped to whatever folder structure they are found in, so for instance, if the Service Worker is placed in dist/js/sw.js - its scope only applies to the dist folder. My next thought was to place it at the root of the theme, but this still traps us a bit. Ideally, we need to place the service worker in the root install of a project.

I wasn't sure what would be the best way of handling that. I've seen some suggestions on using symbolic links which we could maybe setup using bash in our build scripts or execute via node / webpack. A further discussion around what we actually want the Service Worker to handle may help us get a better idea of where to place it.

from theme-scaffold.

The PWA plugin v0.2 was released last week: https://wordpress.org/plugins/pwa/

from theme-scaffold.