Ionic PWA .htaccess Rewrite

Introduction

When developing a Progressive Web App (PWA) using Ionic, you may run into issues with routing and refreshing the page. This is because Ionic PWA uses the Angular Router, which only handles client-side routing.

To solve this issue, we can use a .htaccess file to rewrite URLs on the server-side. In this tutorial, we will go over the steps to create a .htaccess file with rewrite rules for Ionic PWA.

Prerequisites

To follow along with this tutorial, you should have:

• A web server that supports .htaccess files (e.g. Apache)
• A basic understanding of Ionic PWA and Angular routing

Creating a .htaccess file

1. Create a new file named .htaccess in the root directory of your web server.

2. Add the following code to the .htaccess file to enable URL rewriting:

RewriteEngine On

3. Next, we need to add a rule to redirect all HTTP requests to HTTPS. Add the following code below the previous code:

RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

4. Now, we need to add a rule to handle the routing for Ionic PWA. This rule will redirect all requests to the index.html file, which will then handle the routing on the client-side. Add the following code below the previous code:

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html [L]

Explanation

Let's go over what each of these rules does:

• RewriteEngine On enables URL rewriting.
• RewriteCond %{HTTPS} off checks if the request is not over HTTPS.
• RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] redirects the request to HTTPS.
• RewriteCond %{REQUEST_FILENAME} !-f checks if the request is not for an existing file.
• RewriteCond %{REQUEST_FILENAME} !-d checks if the request is not for an existing directory.
• RewriteRule ^(.*)$ /index.html [L] redirects the request to the index.html file.

Conclusion

By adding these rules to our .htaccess file, we can enable server-side URL rewriting, which is necessary for Ionic PWA to handle route refreshes correctly. Now, when a user bookmarks a route or refreshes the page, it will be handled correctly by the Angular Router.