We're Hiring!

Mattermost Discussion Forums

Is it possible to display the maintenance screen (HTML) on the Mattermost mobile app?

In maintaining the Mattermost server I want to display the maintenance screen when connecting.

About the above Although it was possible to display it with a browser or desktop application,Since it cannot be displayed on the mobile app, please let us know if there is a solution.

Hello, @k-narazaki

I used the Announcement Banner feature and verified that it is showing properly on my mobile app.

  • Desktop App

  • Mobile App

May I know if this is something that you would consider or a full on maintenance page when the user types in the URL to be shown instead of the default log in screen?

1 Like

What I would suggest doing is using a Cloudflare Worker to display a custom maintenance page when you are looking to perform maintenance. I currently use them for my websites, and my client’s websites, and it works great. Essentially the Cloudflare worker allows you to display a static HTML page to all users that do not provide a bypass URL parameter or have a specific IP address, and it will display the maintenance page until it is turned off. Here is a screenshot of my personal website’s maintenance page, as well as the URL to view it:
You can view the maintenance page at https://maint.andrewhenke.com/, which is a CNAME record pointing to the direct Cloudflare Worker URL, which is generated when you create said worker.

This is the code for the worker. I am removing my IP address and changing the URL bypass parameter so that I don’t leak my personal information and security bypass parameter, but for an “in production” deployment you can, of course, just insert your own options. The reason that there is this ability to bypass the maintenance page is so that maintenance can be performed, and those who need to have access to the platform can maintain their access.

addEventListener("fetch", event => {
  event.respondWith(fetchAndReplace(event.request))
})
 
async function fetchAndReplace(request) {
 
  let modifiedHeaders = new Headers()
 
  modifiedHeaders.set('Content-Type', 'text/html')
  modifiedHeaders.append('Pragma', 'no-cache')

  // Allow users through if they are bypass flag and set a cookie
  if(request.url.includes("<INSERT URL BYPASS STRING HERE>"))
  {
    // Forward request to origin, get response.
    let response = await fetch(request)

    // Copy Response object so that we can edit headers.
    response = new Response(response.body, response)
    
    // set a cookie for the session
    response.headers.set("Set-Cookie", "cf:maintenance-access=bypass");
    
    // Return on to client.
    return response
  }

  // Allow users through if they have the bypass cookie
  // Check for cookie.
  let cookies = request.headers.get('Cookie') || ""
  if (cookies.includes("cf:maintenance-access=bypass")) {
    // User has been here before. Just pass request through.
    return fetch(request)
  }

  //Return maint page if you're not calling from a trusted IP
  if (request.headers.get("cf-connecting-ip") !== "<ONE IP ADDRESS TO BYPASS AUTOMATICALLY")
  { 
    // Return modified response.
    return new Response(maintPage, {
      headers: modifiedHeaders
    })
  }
   //Allow users from trusted into site
  else
  {
    //Fire all other requests directly to our WebServers
    return fetch(request)
  }
}
 
let maintPage = `
 
<!doctype html>
<title>We're Under Maintenance</title>
<link rel="icon" href="https://cdn.andrewhenke.com/favicon.ico"/>
<style>
  body { 
        text-align: center; 
        padding: 150px; 
        //Set the background image or color here. Image can be either base64 encoded or fetched dynamically from a URL, such as my current configuration. 
        background: url('https://cdn.andrewhenke.com/logo-bright.png');
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
      }
 
    .content {
        background-color: rgba(255, 255, 255, 0.75); 
        background-size: 100%;      
        color: inherit;
        padding-top: 1px;
        padding-bottom: 10px;
        padding-left: 100px;
        padding-right: 100px;
        border-radius: 15px;        
    }
 
  h1 { font-size: 40pt;}
  body { font: 20px Helvetica, sans-serif; color: #333; }
  article { display: block; text-align: left; width: 75%; margin: 0 auto; }
  a:hover { color: #333; text-decoration: none; }  
 
 
</style>
 
<article>
 
        <div class="background">
            <div class="content">
        <h1>We&rsquo;ll be back soon!</h1>        
            <p>We're very sorry for the inconvenience, we&rsquo;re currently performing maintenance. Please check back soon...</p>
            <h5>&mdash; <br>Andrew Henke | Complete Technical Solutions</br></h5>
        </div>
        
    </div>
 
</article>`;

I hope this might help!

2 Likes

Great knowledge, @XxLilBoPeepsxX . Thanks for sharing!

2 Likes

My pleasure, I’m glad to be able to help!