Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add service worker for offline caching #9

Merged
merged 2 commits into from
May 12, 2022
Merged

Add service worker for offline caching #9

merged 2 commits into from
May 12, 2022

Conversation

Gudahtt
Copy link
Member

@Gudahtt Gudahtt commented May 12, 2022

A service worker has been added that caches the phishing warning page. This ensures that it remains functional if GitHub pages goes offline.

The service worker precaches all CSS, HTML, SVG, and JavaScript files. These are the files required for the site to function properly. The fonts and the .ico favicon used by older browsers are omitted to reduce the cache size.

I did attempt to add a runtime cache for the fonts, but I could never get it to work correctly so I abandoned the effort. It's not critical, the fallback web font looks fine.

@Gudahtt Gudahtt force-pushed the add-service-worker branch 2 times, most recently from 8c64764 to f7177e5 Compare May 12, 2022 14:58
A service worker has been added that caches the phishing warning page.
This ensures that it remains functional if GitHub pages goes offline.

The service worker precaches all CSS, HTML, SVG, and JavaScript files.
These are the files required for the site to function properly. The
fonts and the `.ico` favicon used by older browsers are omitted to
reduce the cache size.

I did attempt to add a runtime cache for the fonts, but I could never
get it to work correctly so I abandoned the effort. It's not critical,
the fallback web font looks fine.
@Gudahtt Gudahtt force-pushed the add-service-worker branch from f7177e5 to 3fe93ef Compare May 12, 2022 15:02
@Gudahtt Gudahtt marked this pull request as ready for review May 12, 2022 15:04
@Gudahtt Gudahtt requested a review from a team as a code owner May 12, 2022 15:04
build/index.js Outdated Show resolved Hide resolved
danjm
danjm previously approved these changes May 12, 2022
Copy link
Contributor

@danjm danjm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@Gudahtt
Copy link
Member Author

Gudahtt commented May 12, 2022

Thanks Dan! Sorry I marked this as ready for review prematurely, I meant to add more docs and QA instructions. I'll do that now

@Gudahtt
Copy link
Member Author

Gudahtt commented May 12, 2022

To QA offline support, I used these steps:

  • yarn setup
  • yarn build
  • npx static-server ./dist
  • Navigate to the page and open dev tools
  • Disable network requests (by selecting "Offline" in the throttling menu on the Chrome dev tools network tab, or by adding a * entry to the request blocking list on Firefox) and hard-reload the page.

Previously, the page load would fail after disabling network requests. After this PR, the page should render correctly after a second or so, after the browser lets the network request timeout. It does initially display a "failed to load" page until that second elapses.

To test that the service worker updates correctly and doesn't keep stale assets around:

  • yarn setup
  • yarn build
  • npx static-server ./dist
  • Navigate to the page
  • Double-check that the assets are cached by looking in dev tools (It's under the Application tab on Chrome, under "Cache storage").
  • Stop the server
  • Modify a static asset (e.g. change the text in the HTML file)
  • yarn build
  • npx static-server ./dist
  • Hard-reload the page

It should load the updated asset correctly.

@Gudahtt Gudahtt merged commit 112f0e7 into main May 12, 2022
@Gudahtt Gudahtt deleted the add-service-worker branch May 12, 2022 17:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants