Problem
By default, if you open a website or PWA without being connected to the internet, this is what happens:
As much as one may like the Chrome Dinosaur game, the default No Internet page definitely gives away the fact that your PWA is a website under the hood.
Solution
With Progressier, we're going to set up rules that instruct the browser to cache every page of your app. So when you launch the app without Internet, this is what happens instead:
It loads!
Get started
Log in to your Progressier dashboard, click on Caching Strategies in the menu, Click on New strategy, and name it App Pages.
Open the strategy you just created, and then click Add filter
We're going to apply this strategy exclusively to resources with a
TypeofDocument. Click Save.
Now at the top-right corner of the strategy, choose Network First. The best strategy to use depends on how that particular resource gets updated in your app. Stale-While-Revalidate could be a valid option, but Cache First would be a very bad idea because it would prevent the page from being updated altogether.
If you haven't yet, click Save changes at the top of the page.
Testing the feature
Open your app. The service worker will automatically update with your new changes. (It may take up to 30 seconds).
Close the window.
Disconnect from the Internet
Open your app again. Tada! It loads.