在 PWA（Progressive Web App）开发中，404 页面是一个常见的问题。当用户在访问一个不存在的 URL 时，服务器会返回一个 404 错误码，这时候我们需要为用户提供一个友好的 404 页面，而不是让用户看到一个空白的页面或者浏览器默认的错误页面。
本文将介绍 PWA 开发中处理 404 页面的方法，并提供示例代码。
为什么需要处理 404 页面
在传统网站开发中，404 页面是一个非常重要的页面，因为它能够帮助用户找到他们想要的页面，提高用户体验。但在 PWA 开发中，404 页面更加重要，因为 PWA 的核心思想是提供一个类似于原生应用的体验，用户在访问 PWA 时，很可能会使用离线模式，此时如果访问了一个不存在的 URL，就需要提供一个离线的 404 页面，让用户知道他们的请求没有成功，而不是让用户看到一个错误页面或者空白页面。
如何处理 404 页面
在 PWA 开发中，我们可以使用 Service Worker 来处理 404 页面。Service Worker 是一个运行在浏览器后台的 JavaScript 脚本，可以拦截网络请求并做出响应。我们可以在 Service Worker 中拦截 404 请求，并返回一个自定义的 404 页面。
以下是一个简单的 Service Worker 示例代码：
-- -------------------- ---- -------
------------------------------ --------------- -
------------------
-------------------------------------------- -
-- ---------------- --- ---- -
------ -------------------
-
------ ---------
------------------- -
------ --- --------------- --------- ---- ---------
--
--
---在这个示例中，我们使用 fetch API 来发送网络请求，如果返回的状态码为 404，就返回一个自定义的 404 页面。如果请求失败，就返回一个错误信息。
我们还需要在 PWA 的入口文件（通常是 index.html）中注册 Service Worker：
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
console.log('Service Worker registered with scope:', registration.scope);
}).catch(function(error) {
console.log('Service Worker registration failed:', error);
});
}在这个示例中，我们使用 navigator.serviceWorker.register 方法来注册 Service Worker，并指定 Service Worker 的文件路径。
总结
在 PWA 开发中，处理 404 页面是一个重要的问题。使用 Service Worker 可以很方便地处理 404 页面，并提供一个友好的用户体验。在实际开发中，我们还可以根据不同的状态码返回不同的页面，以提高用户体验。
示例代码：https://github.com/example/pwa-404
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f02e512b3ccec22f94fb32