Converting WordPress website to Progressive Web App

23
votes

I am building a Progressive Web App but there is a very little documentation and support online so far. I am listing down all my questions in this email.

  1. What is the current support of Service Worker API (Offline Mode) for desktops? I wrote a small app which worked in offline mode for mobile (Android-Chrome) but not for my Desktop (Chrome 42). We need to configure development environment for this so we need to know what will we be needing to test our apps. It doesn't work on IOS-Safari/Chrome even.

  2. The service work uses caches extensively and there is a very good way to debug or unregistered service worker internals on Dekstop Chrome; but if I run my application on Mobile how would I remove service worker cache?

  3. If I have a responsive application (A WordPress site) and need to convert it into PWA; would I need to rewrite the application with RestAPI for mobile version all again? (Read App Shell of PWA). In PWA, application shell is separate from data however in CMS like WordPress data is not separate from the UI.

I have been looking for these answers for very long and not being able to find any proper support.

3
wordpressprogressive-web-apps

3 Answers

36
votes

What is the current support of Service Worker API (Offline Mode) for desktops? I wrote a small app which worked in offline mode for mobile (Android-Chrome) but not for my Desktop (Chrome 42). We need to configure development environment for this so we need to know what will we be needing to test our apps. It doesn't work on IOS-Safari/Chrome even.

Safari is not supporting service workers right now but it should work in Chrome 42 although you should consider to update your browser. Anyway, you can check the state of the art in a variety of places:

More about SW:

The service work uses caches extensively and there is a very good way to debug or unregistered service worker internals on Dekstop Chrome; but if I run my application on Mobile how would I remove service worker cache?

You need to debug Chrome for Android from Desktop Chrome.

Anyway, the URL chrome://serviceworkers-internals is available on Chrome for Android although there is no an easy way of clearing offline caches.

If I have a responsive application (A WordPress site) and need to convert it into PWA; would I need to rewrite the application with RestAPI for mobile version all again? (Read App Shell of PWA). In PWA, application shell is separate from data however in CMS like WordPress data is not separate from the UI.

No. Actually, WP has a very well architecture to decouple content from theme. The problem is that run on the server but you don't need your site running on the client to become a PWA. Mozilla is supporting a suite of WP plugins to help progressivizing your WordPress installations:

  • Offline Shell [github] identifies your shell assets (i.e. theme files) and cache them in an offline cache.
  • Offline Content [github] identifies your dynamic content and cache it as the user visit it.
  • Web Push [github] allows you to push real time notifications to your readers as soon as you publish new content.
  • Add To Home Screen [github] engages your readers by putting your WordPress in the Home Screen.

They are all very young plugins but you can track them on GitHub and contribute if you want!

2
votes

A very nice and helpful answer is already added by @Salva, but I thought let me add few things which might be helpful.

For 3rd part, I have worked on an automatic progressive web app converter platform, https://www.escalatingweb.com. I think you can use this platform to convert your web app on WordPress into progressive web app. You can use it to convert your web app into pwa within minutes. I have also written a very nice tutorial to use automatic pwa converter platform http://www.techromance.com/2017/07/22/automatic-pwa-converter-platform/.

For 2nd part, Just to add to above answer, and for testing purpose, you can delete all the cache for a particular website from site settings, which will also clear service worker's cache.

For 1st part, nothing to add as such.

P.S. Please nobody be offended in case they find it as a cheap way promoting my platform. The intention is just to help the community, either by building the platform or making it aware to the needful audience. Thank you @McNab for the suggestion. :)

1
votes

I also using a Wordpress site and there is a plugin can solve your problem. Instead of installing lots of Mozilla's plugin, you can install Super Progressive Web Apps plugin (search for it in plugin install), it works perfectly. Tried both on Android phone and IOS https://wordpress.org/plugins/super-progressive-web-apps/