Ionic V4 - PWA not user friendly : impossible to bookmark?

Ionic Framework
1

When we build a PWA and place it on a server, we get a root location like

http://mysite/myapp

The user types it on it’s phone, but when the app launches, it gets redirected to the homepage we defined

http://mysite/myapp/home

So if the user wants to pin the app to the device, the bookmark points to the home location, and it fails when it launches again…

I could try to move the homepage to the root folder, but it does’nt seem very serious…

Is it a colateral damage of angular routing, or I missed something ?

2

Some PWA links:

3

Don’t forget that you have two players who want take control over the routing. Your Server and your angular router.

Try to configurate your server to send every request to the index.html and let angular do the routing

4

Check out the deployment section of angular’s documentation. Sound like base href is the issue. You will also want to configure your manifest.json to reflect the changes made to your base href in index.html.

5

I think my base href is ok, since the app works when the right path is given. You can try it here :

https://plus2dev.000webhostapp.com/premieres

then you are automatically redirected to :

https://plus2dev.000webhostapp.com/premieres/home

But if you clear site data and retry

https://plus2dev.000webhostapp.com/premieres/home

as a bookmark would, you get a 404…

6

I found this workaround : create a home folder, insert the redirection index.html file :

<html>
<head>
<title>Redirection en HTML</title>
 
<meta http-equiv="refresh" content="0; URL=https://plus2dev.000webhostapp.com/premieres">
</head>
 
<body>
</body>
 
</html>

But that stinks ! ! !

7

Would you be kind enough to post a .htaccess doing this ? I can’t find one and don’t know much about this file…

8

Unfortunately, I use IIS that ships with Windows.

9

This is the content of my .htaccess file:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . index.html [L]
</IfModule>
1 Like
10

Why don’t you try Firebase Hosting and work your way through the Progressive Web App Checklist.

For example: Site is served over HTTPS

Once all your issues are resolved you can host your PWA wherever you like.

11

By the way. I use PLESK for Server Admin.

You can use this in the settings for apache for your domain to redirect every request from http to https.

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{HTTPS} off
	RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
	RewriteRule ^index\.html$ - [L]
</IfModule>

Together with the .htaccess File in the root folder of your app.

12

@trollanfer At your first request to https://mydomain/, your browser is supposed to install the service worker. After that, all the queries to this domain.

My first deployments were erroneous because of some configuration files that were changed by my server, making the hashes produced at build by angular-pwa to be wrong.

I found out about the exact issue by looking at <my-pwa-url>/ngsw/state.

When I go to https://plus2dev.000webhostapp.com/premieres/, the service worker is correctly installed. But when I then try to access to https://plus2dev.000webhostapp.com/premieres/ngsw/state, I get an http error 500… That smells bad.