Deploying PWA


#1

Hey!
I’ve been scouring the net trying to find some info on how to build and deploy an ionic 2 app as a PWA, but no luck. So I resort to posting here. If anyone could be so kind as to explain how to build and deploy a normal ionic 2 application (standard template is fine) to run as a PWA I’d be very grateful!

Thanks!


#2

Hi,

For what I can tell you make an Ionic 2 app (as PWA comes pre-set-up in an Ionic 2 App), build it using ionic serve --lab and then upload the files in the www folder to your web server. That’s what I did and it seems to work.

That’s probably not the proper way of doing it but like I say it worked for me.

Hope that helps.
Carl


#3

ionic serve creates a “dev” build; for production you may want to run

npm run ionic:build --prod

and deploy what’s in the www folder.


#4

And to add to building the app in production mode, you probably will also want to remove the calls to Cordova as that will not work in the browser

Chris
author, “Mobile App Development with Ionic 2


#5

Not sure what the difference is, or if there is any (maybe some additional possible plugin support?), but you can also add “browser” as a platform with

ionic platform add browser

Then you can build with

ionic build browser --prod

#6

Yeah, I’ve gotten that far. But as for what do to with the files I am a bit clueless. I also noticed that on my desktop browser I get a 404 because cordova.js is missing. Changing the path in the index.html solves this however, but I am not sure if this is the way to do it or if you’re expected to add more libraries?


#7

I am trying to assemble info on PWA amd gather everything in one place. I have tried to write up a quick guide on how to deploy it. Let me know if it’s helpful or what changes would you like to have.


#8

If you do ionic build browser --prod it will include the Cordova JavaScript files as well, but you need to deploy what’s in platforms/browser/www, not in the top-level www folder.

However unless you specifically need a Cordova plugin that runs in the browser I wouldn’t worry about that. Less JavaScript files to be downloaded by the client is better.


#9

as the file generated have always the same names, how do you force the browser to load a new version after a deployment ? (it will get it from cache until expiration) thanks.


#10

Thanks! I got it working!


#11

When I run ionic build browser --prod
I get the following error:
ionic2 failed at the ionic-hello-world@ ionic:build script 'ionic-app-scripts

The browser platform is added.

Ionic info:

cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.5
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.8.0


#12

@sebastianovide you can rewrite HTML on the fly (with PHP or so), and include expiry dates (for example the modification time of the file). Or just adjust the cache settings in your server, see http://www.mnot.net/cache_docs/ for instance.


#13

I’ve tried this without success. The error I get is

No default language could be detected for this app.

I mean, everything is javascript, but it doesn’t accept it.


#14

Just an addition, for Ionic 2.2.1, to build a production ready PWA, you may run this command:
npm run build --prod
Documentation is provided here: https://github.com/driftyco/ionic-app-scripts


#15

I just wanted everybody to know that pages do not behave as angular components, the web page has a little delay once you change tab or push a page. I’m recoding it to be pure angular2.


#16

Can anyone explain what the benefit of adding the browser platform is?


#17

Adding the browser platform gives you access to cordova functions and plugins that support the browser platform.
The support is certainly less than ios/android though so it’s not exactly the same, but ok for some functions.


#18

Ok, thanks, I think I get it. So for my PWA, IF there is a browser implementation the plugin should work automatically. If not, I need to check what platform I am on and implement a web version of the plugin if needed…

I could also ignore the Browser platform completely and do the platform check and implementation for all of them.

Does that sound about right?


#19

Yeah that’s correct, it’s much easier if the plugin has browser support. Otherwise you will need to sniff the platform and do workarounds.


#20

Thanks. Maybe you would know this: I have a single code base for my native apps and now my new PWA. If I comment out the Service Worker in index.html in the source folder, will it affect my native app cordova build (I use Ionic Cloud to create the native packages). IE do I have to have 2 different Index.html files?