Converting WordPress website to Progressive Web App

Usama Noman picture Usama Noman · Apr 12, 2016 · Viewed 15k times · Source

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.

Answer

Salva picture Salva · Apr 12, 2016

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!