Is Ionic PWA separate from traditional Ionic?

Question

This might seem an easy but yet confusing question. I have worked with Ionic 1 for a long time and just got introduced to Ionic 2+ two years ago but have not worked with it for a while.

Lately, I noticed that Ionic has released Ionic PWA but I can not understand if they are part of the same project or totally separate. I know that Ionic PWA is a web app framework meanwhile traditional Ionic was used/recommended only for hybrid apps.

So my questions are:

1. Are they merged together or they are separate?

2. If they are separate, is it possible to migrate from Ionic3 to Ionic PWA with ease? (I might need more browser support)

   Thank you!

UPDATE This question was made on the wrong assumption that Ionic PWA was a separate yet similar framework with original Ionic. Apparently, Ionic PWA is just a term for original Ionic with some minor changes(which you have to do yourself) to make it a PWA.

Answer 1

PWAs are different to hybrid apps in that they run in the context of a web browser rather than an OS-level WebView (more on WebViews for Android and iOS). The PWA is like a web page that has its own app icon and runs in a full-screen web browser without the tabs and URL bar etc.

Because of this, PWAs don't have the same access to native functionality as do hybrid apps. If you wanted to access the phone's camera in a hybrid app, for example, you could use something like a Cordova plugin (in your Ionic app, you'd use @ionic-native/camera). To access the camera from a PWA (essentially, from a web browser), Cordova wouldn't work -- you would need to use a web API (see what web APIs can do!).

Since the architecture of a PWA needs to be quite different to that of a regular hybrid app (and the more complex the app, the more divergence), Ionic has branched off Ionic PWA to help developers create PWAs more easily.

To enable your Ionic3 app run as a PWA: if you created your Ionic app from one of the Ionic starter app templates using ionic start, you could do two things to get your app running as a PWA.

1. Add a manifest.json file to your /src folder and add a link to it in your index.html: <link rel="manifest" href="/manifest.json">. An example of a manifest.json and further reading.

2. Enable Service Worker support by finding the following code snippet in your index.html and uncommenting it. I have found that more work is needed to actually get Service Workers working, though. More at MDN.

<!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
      }
  </script>-->

Then run ionic build and deploy the www folder to the web, ideally served over HTTPS. If you open the page from your mobile browser, you should be able to "Add to Home Screen" on both Android and iOS (iOS > version 11.3) and run the app as a PWA.

Bear in mind that any Cordova functionality you have will not work. Also, if you are using lazy-loading, this will help app performance.