简介
Web 应用程序往往需要联网才能访问数据。但是，在某些情况下，我们需要开发一个离线应用程序，可以在没有网络连接的情况下访问本地存储的数据。在这种情况下，我们可以使用 Custom Elements 和 IndexedDB 技术来实现。
Custom Elements 是 Web Component 标准的一部分，它允许我们创建自定义的 HTML 元素。IndexedDB 是一个浏览器内置的 NoSQL 数据库，它可以储存复杂的 JavaScript 对象。在本文中，我们将结合使用这两种技术来创建一个离线的应用程序。
实现
1. 创建 Custom Element
我们先创建一个自定义元素，命名为 off-line-app，在这个元素里面我们将使用 IndexedDB 对象存储数据。
-- -------------------- ---- ------- ---- ----------------- --- ---------- ----- --------------- --------- --------- --------------------- ---- ------------------- ------ ----------- -------- ----- ---------- ------- ----------- - ------------- - -------- ----- -------- - ------------------------------------------------- ----- ----- - --------------------------------- ------------------------ ------------------------------ ----------------------------- - ----- ------------------ - -- --------------------- --- --------- - ----- ---- - ------------------------------------- -- ------ - ----- -------------------- - - - ----- -------------- - ----- -- - ----- --------------------------- --- ----- ----- - ------------------------------------ ----------------------------------------------- ----- -------------- ----- ---------------- - - -------------------------------------------- ------------ ---------展开代码
在这个元素的模板中，我们创建了一个文本框和一个保存按钮。当用户单击保存按钮时，将使用 IndexedDB 存储文本框中的内容。
在类的构造函数中，我们首先获取模板，然后使用 content.cloneNode() 克隆并添加到自定义元素中。我们还将 click 事件监听器添加到自定义元素中，以便在用户单击保存按钮时保存数据。
saveData() 方法创建一个名为 off-line-app-db 的 IndexedDB 数据库，并创建一个名为 off-line-app-store 的对象存储，用于存储用户保存的数据。
2. 在页面中使用 Custom Element
在页面中，我们可以像使用其他 HTML 元素一样使用 off-line-app 元素。我们在一个示例页面中添加这个元素，然后保存一些数据。
-- -------------------- ---- ------- ---- ---------- --- --------- ----- ------ ------ ----- ---------------- --------------------- ------- ------------------------------------------------------------------- ------- --------------------------------- ------- ------ ----------------------------- -------- ----- ---- - ------------------------------ ----- ---------- - --------------------------------------- ------------------------------------------ - ----- -------------------------- --------- ------- -------展开代码
3. 添加 Service Worker
离线应用程序需要一个 Service Worker，它可以无缝地将应用程序从在线模式转换到离线模式，并在没有网络连接的情况下缓存资源。
-- -------------------- ---- ------- -- ----------------- ----- ---------- - --------------------- ----- ----------- - - -------------- --------------------- ----------------------------------------------------- -- -------------------------------- ------- -- - ---------------- ----------------------- ------------- -- -------------------------- -- --- ------------------------------ ------- -- - ------------------ --------------------------- -------------- -- -------- -- --------------------- -- --- --------------------------------- ------- -- - ---------------- ------------- --------------- -- ----------------------------- -- - -- ---- --- ----------- ------ ------------------- ---- -- ---展开代码
我们将 Service Worker 的文件命名为 service-worker.js，放置在我们应用程序的根目录中。
在 Service Worker 中，我们首先定义一个 CACHE_NAME，并将需要缓存的资源添加到缓存中。然后我们添加 fetch 事件监听器，以便在请求未匹配到缓存时从网络中获取资源。最后，我们在 activate 事件监听器中删除旧版本的缓存。
4. 注册 Service Worker
为了启用 Service Worker，我们需要在应用程序中注册它。
-- -------------------- ---- ------- -- ---------- ---- --- --- -------- -- ---------------- -- ---------- - ------------------------------- -- -- - ------------------------------------------------------- --- - ---------展开代码
我们将上述代码添加到我们的 HTML 文件中。如果浏览器支持 Service Worker，则在页面加载完成后将注册 service-worker.js 文件。
现在，使用上述实现方法，我们已经创建了一个离线应用程序，可以在没有网络连接的情况下使用存储在 IndexedDB 中的数据。在开发实现离线应用程序时，我们可以将上述实现方法作为参考，并根据实际需求改动代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c25429314edc2684b7a0dd
