ionic 3 publish app as PWA (Progressive Web App)

Question

I want to publish my app as PWA so what i did is

insert this script to index.html

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

then install

npm run ionic:build --prod 

it looks like it deploy it but my questions are:

1. what files I need to upload to host for publish the app as PWA?

2. why when I change something in the app and run ionic serve nothing changed and it changed only in the index.html of the WWW folder? why?(because now it's PWA??)

3. when I open www folder and I run open index.html when i press on button that open alert dialog it not open that. why?

4. when I run the command? only in the end of development?

Answer 1

Run

ionic cordova platform add browser

ionic build browser --prod --release

Then go to [project_folder]/platforms/browser/www and copy the content at you http server.

Answer 2

Don't bother with Cordova for a PWA. Just use npm run build --prod and upload the /www folder.

PWA is more of a collection of concepts, so it's not just "on" or "off". At a minimum though you probably want to add a manifest file so you can make it more "app like" by hiding the browser frame, setting your icon, app name etc. Uncommenting the line to add service worker doesn't magically make it a PWA if you haven't put anything "useful" into service worker (which you may or may not need to do, depending on how your app works). Also note that you will need HTTPS to use a service worker.

You will also need to manually remove the line from index.html that includes cordova.js (which will be a 404 error if you just upload /www).

Answer 3

I use this command for building web app

ionic cordova build browser

Then copy the contents from IONIC-PROJECT/platforms/browser/www to the web server.