Fenix: [Meta] Offline access to open tab content

[vesta0]

Why/User Benefit/User Problem

As a user, I want to be able to retrieve my open tabs when I don't have a network connection so I can continue consuming content without interruption.

Feature Brief

Acceptance Criteria (how do I know when I’m done?)

• [x] (MUST) If I already have Fenix open (haven't quit or killed the app) and turn on airplane mode, I can tap on an open tab and still see the website content of my open tabs when offline. (This does NOT need to work w/ refresh or navigating to new pages and back)
• [x] If I open another app or lock the screen, and come back to Fenix (which I have not quit or killed), I can tap on an open tab and still see the website content of my open tabs when offline.
• [x] I can avoid network error pages when the network is offline.

[buttercookie42]

Acceptance Criteria (how do I know when I’m done?)

From some experiences we've had with Fennec (and possibly the major reason this was never enabled on release):

• When I do have a network connection, I don't want pages loading in offline mode because the browser erroneously believes it doesn't have a network connection

[vesta0]

@cpeterso can we access the cache for open tabs today without needing to reload?

[cpeterso]

@cpeterso can we access the cache for open tabs today without needing to reload?

GV would need to do a some work to support this, but not a lot. Fennec and desktop Firefox have "offline mode" where they only load content available in the browser cache instead of the network. You can test in desktop Firefox using File menu > Work Offline.

But I don't know how well it works. If the browser cache is small, the user might load cached pages that don't look right because some important JS or CSS file was kicked out of the cache.

Here is the GV bug to add an offline mode API:

https://bugzilla.mozilla.org/show_bug.cgi?id=1533271

[liuche]

From backlog grooming discussion:
A lot of websites request the browser does NOT cache web content (Fennec does this). We will respect that request.

[vesta0]

@liuche @cpeterso I just tested this again and it seems like it actually works now in Firefox Preview. It was definitely not working a month ago. Did we make any changes in GeckoView in the past month, such as in the way we cache sites or badging sites that have a ServiceWorker and work offline?

[cpeterso]

@liuche @cpeterso I just tested this again and it seems like it actually works now in Firefox Preview. It was definitely not working a month ago. Did we make any changes in GeckoView in the past month, such as in the way we cache sites or badging sites that have a ServiceWorker and work offline?

What are sites and steps you are using to test? AFAIK, no Gecko or GV changes related to offline browsing. Maybe you are testing a site with a ServiceWorker that handles offline mode itself (instead of Gecko forcing all requests to be served only from the browser cache)?

[adamopenweb]

At a conference last week, someone brought up to me that Firefox mobile requires a refresh upon re-opening the app from sleep. Some use cases are:

1. Loading a concert ticket while in line, getting to the front of the line, open your phone and the browser tries to refresh the page. Connection isn't always good and you lose the barcode. Forces users to take screenshots of the page.
2. Same as above but for airplane tickets

[madb1lly]

What @adamopenweb describes is one of my main use cases for this - and this is a case where if I lost the page it's a huge inconvenience and in some cases could cost me money (e.g. having to buy another train ticket). The other use case is to be able to read a page offline, which is a fairly common practice (and not all pages play nicely with either reading mode or with Pocket unfortunately).

[vesta0]

We discussed this feature in a meeting with QA, ENG, UX.

QA please test this and let us know what cases/scenarios this currently works.

[abodea]

Hi @vesta0 please see my findings below:
For the start I picked the first 10 websites from Top 100 Most Visited Websites by Search Traffic in 2019.

I have more scenarios that I tried:

1. Turning the Internet connection OFF or Turning the Airplane Mode ON

• Launch Firefox Preview and open the top 10 websites(youtube, en.wikipedia, facebook, twitter, amazon, imdb, reddit, pinterest, ebay, tripadvisor).
• Access every website mentioned above.
• Turn off the Internet connection or Turn the Airplane Mode ON.
• Without restarting Fenix, open each mentioned website.
• Restart Fenix and try to access the 10 sites mentioned above.

| Site | Internet OFF| Airplane ON|Net OFF(rr Fenix)| AirplaneON(rr Fenix)|
|:----:|:----------:|:-------:|:------:|:-------:|
| youtube |Site opened✅|Site opened✅ | Not opened ❌ | Not opened ❌ |
| wikipedia | Site opened✅| Site opened✅ | Not opened ❌ | Not opened ❌ |
| facebook | Site opened✅| Site opened✅ | Not opened ❌ | Not opened ❌ |
| twitter | Site opened✅ | Site opened✅ | Site opened✅ | Site opened✅ |
| amazon | Site opened✅ | Site opened✅ | Not opened ❌ | Not opened ❌ |
| imdb | Site opened✅ | Site opened✅| Not opened ❌ | Not opened ❌ |
| reddit | Site opened✅ | Site opened✅ | Not opened ❌ | Not opened ❌ |
| pinterest | Site opened✅ | Site opened✅ | Not opened ❌ | Not opened ❌ |
| ebay | Site opened✅ | Site opened✅ | Not opened ❌ | Not opened ❌ |
| tripadvisor | Site opened✅ | Site opened✅ | Not opened ❌ | Not opened ❌ |

• Note that the rr stands for restart(mentioned it above in the table so I have space to add everything).
• Twitter site was opened but on the twitter homepage there was a message: `Looks like you lost your connection. Please check it and try again.

2. Multitask to other app, turning the Internet connection OFF or Turning the Airplane Mode ON and then get back to Fenix

• Launch Firefox Preview and open the top 10 websites(youtube, en.wikipedia, facebook, twitter, amazon, imdb, reddit, pinterest, ebay, tripadvisor).
• Access every website mentioned above.
• Multitask to other app
• Turn off the Internet connection or Turn the Airplane Mode ON.
• Multitask back to Fenix and try to access the 10 websites mentioned above.

| Site | Multitask to other app, turn Internet OFF, return to Fenix | Multitask to other app, turn Airplane ON, return to Fenix|
|:----:|:----------:|:-------:|
| youtube |Site opened ✅|Site opened ✅ |
| wikipedia |Site opened ✅|Site opened✅ |
| facebook |Site opened ✅|Site opened✅ |
| twitter | Site opened✅ | Site opened✅
| amazon | Site opened✅ | Not opened ❌ |
| imdb | Site opened✅ | Site opened✅|
| reddit | Site opened✅ | Not opened ❌ |
| pinterest | Site opened✅ | Site opened✅ |
| ebay | Site opened✅ | Site opened✅ |
| tripadvisor | Site opened✅ | Site opened✅ |

• Note that this scenarios didn't included a Fenix restart.

3. Turning the Internet connection OFF or Turning the Airplane Mode ON after turning in about:config toggle "browser.tabs.useCache" to true

• Launch Firefox Preview and open the top 10 websites(youtube, en.wikipedia, facebook, twitter, amazon, imdb, reddit, pinterest, ebay, tripadvisor).
• Open about:config
• Search for browser.tabs.useCache and toggle it to true default state is false.
• Turn off the Internet connection or Turn the Airplane Mode ON.
• Restart Fenix

| Site |Internet OFF, restart Fenix(browser.tabs.useCache is true) | Airplane ON, restart Fenix(browser.tabs.useCache is true)|
|:----:|:----------:|:-------:|
| youtube |Not opened ❌|Not opened ❌ |
| wikipedia |Not opened ❌|Not opened ❌ |
| facebook |Not opened ❌|Not opened ❌ |
| twitter |Site opened✅ | Site opened✅ |
| amazon | Not opened ❌ | Not opened ❌ |
| imdb | Not opened ❌ | Not opened ❌|
| reddit | Not opened ❌ | Not opened ❌ |
| pinterest | Not opened ❌ | Not opened ❌ |
| ebay | Not opened ❌ | Not opened ❌ |
| tripadvisor |Not opened ❌ | Not opened ❌ |

• Twitter site was opened but on the twitter homepage there was a message: `Looks like you lost your connection. Please check it and try again.

Also, I tried with https://www.mozilla.org/en-US/ and the page was loaded even after I restarted Fenix with the Internet Connection Off.

Note that in Google Chrome, after restarting the app, the URL bar state changes to Offline and the page is loaded even after a restart or refreshing the page.
I will remove the qa:needed until further notice

[vesta0]

Thanks so much @abodea for the thorough testing!

@liuche @lime124 @kbrosnan based on the test results above, I consider the acceptance criteria met for this particular user case required for feature maturity. I have opened another issue to track the remaining use case for future: #6478