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

**URL:** <https://forum.ionicframework.com/t/ionic-v4-pwa-not-user-friendly-impossible-to-bookmark/143169>\
**Category:** Ionic Framework\
**Created:** [September 29, 2018, 7:23am UTC](https://forum.ionicframework.com/t/ionic-v4-pwa-not-user-friendly-impossible-to-bookmark/143169 "2018-09-29T07:23:21Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![trollanfer](https://avatars.discourse-cdn.com/v4/letter/t/a6a055/32.png) [@trollanfer](https://forum.ionicframework.com/u/trollanfer)\
**Post date:** [September 29, 2018, 7:23am UTC](https://forum.ionicframework.com/t/ionic-v4-pwa-not-user-friendly-impossible-to-bookmark/143169/1 "2018-09-29T07:23:21Z")

</div>

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

```auto
http://mysite/myapp

```

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

```auto
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 ?

---

<div class="post-metadata">

**Author:** ![robinyo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robinyo/32/115964_2.png) [@robinyo](https://forum.ionicframework.com/u/robinyo)\
**Post date:** [September 29, 2018, 8:06am UTC](https://forum.ionicframework.com/t/ionic-v4-pwa-not-user-friendly-impossible-to-bookmark/143169/2 "2018-09-29T08:06:56Z")

</div>

Some PWA links:

- [https://robferguson.org/blog/2018/09/14/pwa-tips-and-tricks/](https://robferguson.org/blog/2018/09/14/pwa-tips-and-tricks/)
- [https://robferguson.org/blog/2018/04/17/optimising-the-performance-of-an-ionic-pwa-part-2/](https://robferguson.org/blog/2018/04/17/optimising-the-performance-of-an-ionic-pwa-part-2/)
- [https://robferguson.org/blog/2018/04/16/0ptimising-the-performance-of-an-ionic-pwa-part-1/](https://robferguson.org/blog/2018/04/16/0ptimising-the-performance-of-an-ionic-pwa-part-1/)

---

<div class="post-metadata">

**Author:** ![Jacktoolsnet](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jacktoolsnet/32/107318_2.png) [@Jacktoolsnet](https://forum.ionicframework.com/u/Jacktoolsnet)\
**Post date:** [September 29, 2018, 12:05pm UTC](https://forum.ionicframework.com/t/ionic-v4-pwa-not-user-friendly-impossible-to-bookmark/143169/3 "2018-09-29T12:05:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![danieldugger](https://avatars.discourse-cdn.com/v4/letter/d/ad7895/32.png) [@danieldugger](https://forum.ionicframework.com/u/danieldugger)\
**Post date:** [September 29, 2018, 12:19pm UTC](https://forum.ionicframework.com/t/ionic-v4-pwa-not-user-friendly-impossible-to-bookmark/143169/4 "2018-09-29T12:19:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![trollanfer](https://avatars.discourse-cdn.com/v4/letter/t/a6a055/32.png) [@trollanfer](https://forum.ionicframework.com/u/trollanfer)\
**Post date:** [September 29, 2018, 1:10pm UTC](https://forum.ionicframework.com/t/ionic-v4-pwa-not-user-friendly-impossible-to-bookmark/143169/5 "2018-09-29T13:10:08Z")

</div>

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

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

```

then you are automatically redirected to :

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

```

But if you clear site data and retry

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

```

as a bookmark would, you get a 404…

---

<div class="post-metadata">

**Author:** ![trollanfer](https://avatars.discourse-cdn.com/v4/letter/t/a6a055/32.png) [@trollanfer](https://forum.ionicframework.com/u/trollanfer)\
**Post date:** [September 29, 2018, 2:14pm UTC](https://forum.ionicframework.com/t/ionic-v4-pwa-not-user-friendly-impossible-to-bookmark/143169/6 "2018-09-29T14:14:26Z")

</div>

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

```auto
<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 ! ! !

---

<div class="post-metadata">

**Author:** ![trollanfer](https://avatars.discourse-cdn.com/v4/letter/t/a6a055/32.png) [@trollanfer](https://forum.ionicframework.com/u/trollanfer)\
**Post date:** [September 29, 2018, 3:31pm UTC](https://forum.ionicframework.com/t/ionic-v4-pwa-not-user-friendly-impossible-to-bookmark/143169/7 "2018-09-29T15:31:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![danieldugger](https://avatars.discourse-cdn.com/v4/letter/d/ad7895/32.png) [@danieldugger](https://forum.ionicframework.com/u/danieldugger)\
**Post date:** [September 29, 2018, 6:46pm UTC](https://forum.ionicframework.com/t/ionic-v4-pwa-not-user-friendly-impossible-to-bookmark/143169/8 "2018-09-29T18:46:23Z")

</div>

Unfortunately, I use IIS that ships with Windows.

---

<div class="post-metadata">

**Author:** ![Jacktoolsnet](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jacktoolsnet/32/107318_2.png) [@Jacktoolsnet](https://forum.ionicframework.com/u/Jacktoolsnet)\
**Post date:** [September 29, 2018, 9:16pm UTC](https://forum.ionicframework.com/t/ionic-v4-pwa-not-user-friendly-impossible-to-bookmark/143169/9 "2018-09-29T21:16:03Z")

</div>

This is the content of my .htaccess file:

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

```

---

<div class="post-metadata">

**Author:** ![robinyo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robinyo/32/115964_2.png) [@robinyo](https://forum.ionicframework.com/u/robinyo)\
**Post date:** [September 29, 2018, 9:34pm UTC](https://forum.ionicframework.com/t/ionic-v4-pwa-not-user-friendly-impossible-to-bookmark/143169/10 "2018-09-29T21:34:06Z")

</div>

> [@trollanfer](#):
>
> When we build a PWA and place it on a server, we get a root location like
> 
> ```auto
> http://mysite/myapp
> 
> ```

Why don’t you try [Firebase Hosting](https://firebase.google.com/docs/hosting/quickstart) and work your way through the Progressive Web App [Checklist](https://developers.google.com/web/progressive-web-apps/checklist).

For example: **Site is served over HTTPS**

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

---

<div class="post-metadata">

**Author:** ![Jacktoolsnet](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jacktoolsnet/32/107318_2.png) [@Jacktoolsnet](https://forum.ionicframework.com/u/Jacktoolsnet)\
**Post date:** [September 30, 2018, 5:08pm UTC](https://forum.ionicframework.com/t/ionic-v4-pwa-not-user-friendly-impossible-to-bookmark/143169/11 "2018-09-30T17:08:27Z")

</div>

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.

```auto
<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.

---

<div class="post-metadata">

**Author:** ![dvillevalois](https://avatars.discourse-cdn.com/v4/letter/d/e56c9b/32.png) [@dvillevalois](https://forum.ionicframework.com/u/dvillevalois)\
**Post date:** [October 2, 2018, 1:45pm UTC](https://forum.ionicframework.com/t/ionic-v4-pwa-not-user-friendly-impossible-to-bookmark/143169/12 "2018-10-02T13:45:02Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:15pm UTC](https://forum.ionicframework.com/t/ionic-v4-pwa-not-user-friendly-impossible-to-bookmark/143169/13 "2021-07-19T21:15:51Z")

</div>