本文へ移動
cccskills
無料GitHub で公開

offline-fallback

Use when adding PWA capabilities, implementing a service worker, or improving the experience for users on unreliable network connections.

インストール方法を見る

含まれるファイル(2)

  • SKILL.md1.9 KB
  • references/rule.md7.5 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Provide an offline fallback page

The browser's default offline error screen ("No internet connection") is confusing and completely outside your brand. A custom offline page maintains the user experience, reinforces trust, and can surface cached content or useful actions — such as enabling users to continue reading a cached article or queuing a form submission for later.

Quick Reference

  • Create a minimal /offline HTML page that works without any network requests
  • Pre-cache the offline page during the service worker install event
  • Intercept failed navigation requests and serve the offline page instead
  • Include helpful guidance so users know what to do while offline

Check

Check whether the site shows a custom offline fallback page when the network is disconnected and a navigation request cannot be fulfilled.

Fix

Create a self-contained /offline page and configure the service worker to pre-cache it and serve it for failed navigation requests.

Explain

Explain how a service worker can intercept failed network requests and return a cached offline fallback page to the user.

Code Review

Review the service worker fetch handler and the offline page markup. Verify the offline page is pre-cached at install time, that it does not depend on external resources, and that the fallback is only served for navigation requests (not sub-resources).


For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/rules/performance/offline-fallback

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

404-page

無料

Use when reviewing templates, rendered HTML, or shared components related to Create a custom 404 error page. Validate the final browser-facing markup, not just the source framework abstraction.

日本語の概要は準備中です。原文の説明を表示しています。

thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

Use when auditing metadata, crawlability, structured data, or indexability related to Create a dedicated About page. Verify the rendered HTML and HTTP response rather than relying only on source files.

日本語の概要は準備中です。原文の説明を表示しています。

thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

Use when reviewing component libraries, page flows, or CI pipelines that need repeatable accessibility checks. Automated testing is strongest at catching structural and attribute-level issues; it does not replace keyboard, screen reader, and manual UX testing.

日本語の概要は準備中です。原文の説明を表示しています。

thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

Use when reviewing sign-in, sign-up, MFA, CAPTCHA, recovery, and re-auth flows. Evaluate the full authentication path, including error handling and backup methods, not just the primary login form.

日本語の概要は準備中です。原文の説明を表示しています。

thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

Use when reviewing templates, rendered HTML, or shared components related to Make notifications accessible. Validate the final browser-facing markup, not just the source framework abstraction.

日本語の概要は準備中です。原文の説明を表示しています。

thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use semantic table markup for screen readers. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

日本語の概要は準備中です。原文の説明を表示しています。

thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

thedaviddias のスキルをすべて見る

このスキルの問題を報告する