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

Troubleshooting
3

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.

image
image1920×1020 165 KB

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