0

I'm currently working on a TWA / Custom tabs application. Seeing as the user needs to load a website, I want to implement an offline page incase the user isn't connected to the internet.

When using a webview, I can just load an html file, with custom tabs it seems to be more difficult.

What I'm currently doing: Once the app is launched, I do a check to see if the user is connected to the internet, if that fails I would like to display my offline page and give them the option to retry, otherwise start the custom tabs intent.

Is there an easy way to load/inject my offline html page into the custom tab, or is there another way to load the html file into view?

Jan Meyer
  • 39
  • 1
  • 3

1 Answers1

0

The best way to implement an offline page for your web application is to use a Service Worker.

An advantage of this approach is that this offline page will also work for users using standalone browsers. And, by adding a Web Manifest, your application will become a Progressive Web App and will be installable from the browsers.

Service Workers can be a complex subject, so I'd recommend using WorkBox to get started with it. Here's a recipe for a simple offline page.

There's one caveat with this approach - the Service Worker is installed when the application is used for the first time. From that moment onwards, it will show the offline page if the user opens the app while offline. But, if the user is offline the first time the application is opened, they may still see the offline dinosaur. There's an open issue to improve this at https://crbug.com/816798.

andreban
  • 4,621
  • 1
  • 20
  • 49
  • I seem to have not mentioned it in the original post. I am using a pwa. My offline page would show if the user downloads the app and opens it at a later stage while having no internet connection before the actual page is downloaded the first time. – Jan Meyer Feb 24 '21 at 11:05
  • Got it. Please, do star the bug to help prioritise this! https://crbug.com/816798 – andreban Feb 24 '21 at 18:51