Offline Angular PWA fails on iPhone after a short period

🐞 bug report

Affected Package

The issue is caused by package:

"@angular/pwa": "^0.11.3"
"@angular/service-worker": "~7.1.0"

Description

Currently the Angular PWA package seems to work great, especially with the CLI, very simple and easy to use.

However I have noticed a very odd bug. When I do “Add to Home Screen” on my iPhone, and begin to test the offline functionality, the application will work for up to a few hours, at which point the app will seize to load and simply display a blank page or display, “Safari cannot open the page because your iPhone is not connected to the internet”. If I turn off the web server at this point and turn on iPhone networking, then the PWA will display the blank page.

At first I assumed this was a current limitation of using an iPhone with PWAs, however, I tested 2 other (non-angular) PWAs and they work offline permanently on iPhone: The Cube and Dinosaur Game

I tested this on 2 iPhones running IOS 12.1 and 12.1.1, and they both lost the ability to load the PWA at the exact same time (about an hour). It seems like some sort of cache time limit gets hit where it then requires a network refresh.

🔬 Minimal Reproduction

ng new pwatest
cd pwatest
ng add @angular/pwa -s
ng build --prod
http-server dist\pwatest

• verify loading works offline in chrome network tab
• navigate to site through iphone safari browser and “Add to Home Screen”
• verify PWA loads from home screen icon
• disable all network connections on iPhone
• wait unknown amount of time for PWA to fail to reload and then not function again until network connection re-established

Couldn’t figure out how to get stackblitz working with angular service workers

🌍 Your Environment

Angular Version:

Angular CLI: 7.1.3
Node: 11.3.0
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.11.3
@angular-devkit/core         7.1.3
@angular-devkit/schematics   7.1.3
@schematics/angular          7.1.3
@schematics/update           0.11.3
rxjs                         6.3.3
typescript                   3.1.6

[gkalpak]

Thx for following up on this. From a quick look, the reaosn it doesn’t work on GitHub is that it serves 404.html with a 404 status code (which looks like a failed response to the SW and thus won’t be cached). It is a long-standing issue: isaacs/github#408

Closing, since everything seems to be working as expected as far as Angular’s SW is concerned.

[gkalpak]

Note that ServiceWorkers require a secure connection. So, if you don’t use HTTPS, the SW will not be registered. One exception is localhost, which is considered a secure origin for development purposes. So, make sure you are serving over HTTPS or on localhost when using a local server.