PWA 遇坑记（一）

前言

PWA (Progressive Web Application) 是一种新型的 web 应用模式，可以实现像原生应用一样的体验。前端开发人员可以利用 service worker 等技术来使网站具备离线访问、推送通知等特性。然而，在实际开发过程中我们也会遇到各种坑点，本文将一一探究。

缓存策略

前端缓存

前端缓存需要谨慎使用，不当的缓存策略可能导致缓存“过度”，使用户看到的是旧页面而不是更新后的内容。为了避免这种情况，我们可以参考以下几种策略：

  • 立即缓存：可以在 service worker 安装阶段就将资源缓存，这样用户就可以立即访问到更新后的页面。
-------------------------------- ----- -- -
  ----------------
    -----------------------
      ----------- -- -----------------------------
      -------- -- -------------------
  --
---
  • 懒惰缓存：该策略可以将一些不经常访问的资源延迟缓存，但这样可能会增加后续的请求次数。
------------------------------ ----- -- -
  -- ----------------------------------- -- --------------------------------- -- ---------------------------------- -
    ------------------
      ---------------------------
        -------------- -- -
          -- ---------- -
            ------ ---------
          - ---- -
            ------ ------------------------------------ -- -
              ------ ---------------------------------------- -- -
                ------------------------ ------------------
                ------ ---------
              ---
            ---
          -
        --
    --
  -
---

后端缓存

后端缓存也是实现 PWA 离线缓存的一种方式。我们可以使用例如 LocalStorage、IndexedDB 等数据库系统，将网站上最新的数据存储在本地，这样即使用户处于离线状态，也可以查看之前的数据。

离线页面（Offline page）

离线页面是指特定页面，在用户离线的情况下，可以以特定方式进行缓存的页面。离线页面是 Progressive Web App 中必不可少的一环。

PWA 使用离线页面的方法是在 service worker 安装阶段进行缓存：

-------------------------------- --------------- -
  ---------------- -- --------------------------------------- ------
    ----------------------------------------------- - -- ------------
      ------ --------------
        --------------- -- --------------
        -------------------------
        --------------------
        ----------------------
      ---
    --
  --
---

当用户离线时，通过 service worker 来通知离线页面，告诉用户当前网站不可用。

------------------------------ --------------- -
  ------------------
    --------------------------------------------------- - -- -----------------
      ------ -------- -- -------------------------------------------- - -- ------------
        ------
          --------------------
          --------------------- -
            ------------------------ ------------------
          --
          -------------------- -
            ----------------- -- -----
          ---
        ------ ---------
      ---
    ------------------- -
      ------ -----------------------------
    --
  --
---

安装 PWA

PWA 的安装分为两个步骤，一是什么时刻提示用户安装，二是如何实现安装功能。

我们可以在 service worker 的安装过程中添加一个安装按钮，用户可以点击该按钮进行安装。

-------------------------------- --------------- -
  ----------------
    ----------------------------------------------- -
      ------ --------------
        ----------------
        -------------------------
        --------------------
        ----------------------
      ---
    ----------------------------
  --

  --------------------------------- --------------- -
    --------------------------------------
  ---
---

------------------------------ --------------- -
  ------------------
    --------------------------------------------------- -
      ------ -------- -- -------------------------------------------- -
        ----------------------------------------------- -
          ------------------------ ------------------
        ---
        ------ ---------
      ---
    ------------------- -
      ------ -----------------------------
    --
  --
---

-------------------------------------------- --------------- -
  -----------------------
  --- --- - ---------------------------------
  ------------- - --- -----
  ----------------------------- ---------- -
    ---------------
  ---
  -------------------------------
---

总结

PWA 的开发虽然坑点较多，但凭借其离线缓存、推送通知等特性，已经成为现代 web 应用开发的不二选择。在实际开发过程中，我们需要注意前端缓存、后端缓存和离线页面的缓存策略，并且实现 PWA 的安装功能，让用户更加方便地使用我们的 Web 应用程序。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64df26b6f6b2d6eab3a5341e

阅读全文

猜你喜欢

  • Sequelize 如何实现数据库备份和恢复？

    简介 Sequelize 是一个基于 Node.js 的 ORM（Object-Relational Mapping）框架，用于操作关系型数据库。在实际项目开发中，数据库备份和恢复是一项非常重要的工作...

    1 年前
  • 如何使用 JWT 实现 RESTful API 的身份认证

    什么是 JWT？ JWT（JSON Web Token）是一种轻量级的认证和授权机制，由 JSON 数据构成，使用签名来保证传输过程中的安全性。JWT 包含一个头部、一个载荷和一个签名。

    1 年前
  • ES9 的新特性：Array.prototype.includes()

    ES9 是 ECMAScript 2018 的简称，它是 JavaScript 语言最新版本中的一部分。ES9 在语言方面新增了很多的特性和语法，其中 Array.prototype.includes...

    1 年前
  • 如何使用 Next.js + Firebase 构建 Web 应用

    本文将介绍如何使用 Next.js 和 Firebase 快速构建基于 React 的 Web 应用，并且将重点放在如何结合 Next.js 和 Firebase 的使用，以及如何进行优化与缓存方案。

    1 年前
  • Chai.js 和 Karma：在 Web 应用程序中进行测试

    Chai.js 和 Karma：在 Web 应用程序中进行测试 在现代 Web 开发中，测试已经成为了必要的一步。测试不仅能够帮助开发者保证代码的质量，还能够帮助开发者尽早发现潜在的问题，并促进团队合...

    1 年前
  • Socket.io 实现长轮询的原理及使用方法

    前言 在前端开发中，我们常常需要实时更新页面数据。而在 Web 开发早期，很多人采用轮询的方式去实现这个功能。轮询就是每隔一段时间向服务器发送请求，看看有没有新数据。

    1 年前
  • ES6 中的 Generator 函数在异步编程中的应用

    作为一名前端开发者，我们对于异步编程并不陌生。在开发过程中，我们通常使用回调函数、Promise、Async/Await 等方式来处理异步调用和数据流控制。然而，ES6 引入的 Generator 函...

    1 年前
  • RESTful API 使用过程中的最佳实践

    RESTful API 是一种标准的 Web API 设计风格，它基于 HTTP 协议和 Web 的架构原则，并且非常适合用于前端和后端之间的数据通信。在本文中，我们将介绍 RESTful API 使...

    1 年前
  • 如何利用 Next.js 实现服务端渲染和客户端渲染之间的转换？

    在现代 Web 应用中，服务端渲染和客户端渲染都是非常重要的技术手段。服务端渲染可以使得页面在首次请求时就能够快速呈现，从而提升用户体验和 SEO；而客户端渲染则可以提供更加丰富和交互性的用户界面，从...

    1 年前
  • 如何在您的 React 项目中使用 ESLint

    在现代前端开发中，JavaScript 开源工具非常丰富，ESLint 就是其中之一。ESLint 可以帮助开发者确保他们的代码符合最佳实践，减少了代码错误和技术债务，提高代码可维护性和开发效率。

    1 年前
  • 用 Sass 实现网页背景虚化效果

    在现代网页设计中，背景的虚化效果被广泛应用。这种效果可以让页面的主要内容更加突出，增强用户对页面的注意力。而通过 Sass 的变量、函数等特性，我们可以很方便地实现这种效果，并且让代码更加易于管理和扩...

    1 年前
  • Hapi 实战：如何使用 Hapi-Jsonwebtoken 插件生成 JWT Token

    什么是 JWT Token？ JWT Token（Json Web Token）是一种基于JSON的开放标准，用于在不同系统中以安全的方式传输信息。JWT 由三部分组成（使用点.分隔）： Heade...

    1 年前
  • 微信小程序 Webpack 打包实战总结

    前言 自从微信宣布支持小程序使用第三方框架以及扩展组件功能之后，越来越多的开发者开始思考如何将其他前端技术应用到小程序中。而其中最被广泛使用的就是 Webpack 打包工具。

    1 年前
  • Node.js 中的文件 I/O 技术详解

    什么是文件 I/O 文件 I/O 是指通过输入输出流读写文件的操作。在 Node.js 中，读写文件是常见的任务。可以使用 Node.js 提供的 fs 模块进行文件 I/O 操作。

    1 年前
  • 响应式设计中如何解决移动端虚线边框问题

    在响应式设计中，我们经常需要为移动端设备适配样式。然而，移动端设备在聚焦输入框时会出现虚线边框，这对设计和用户体验都是一种挑战。如何去除这种虚线边框并保证用户体验是一件比较困难的事情。

    1 年前
  • Vue.js 2.0+Vuex 实现登录认证流程

    Vue.js 是一个流行的前端框架，它的灵活性和易用性让开发者能够快速构建出优秀的单页面应用程序。然而，在实现需要用户登录的应用程序时，我们需要考虑如何进行用户的身份认证和授权，以及如何在应用程序中管...

    1 年前
  • 解决 Kubernetes 中 Pod 崩溃的常见问题和解决方法

    在 Kubernetes 环境下，Pod 是最小的可部署对象。Pod 由一个或多个容器组成，它们共享相同的网络和存储空间。由于某些原因，Pod 可能会崩溃，这会影响到整个应用的稳定性。

    1 年前
  • TypeScript 2.0 中的新特性是什么？

    介绍 TypeScript 是一种由微软开发的强类型的 JavaScript 超集语言，它扩展了 JavaScript，使开发者能够使用强类型和类等面向对象的特性。

    1 年前
  • 如何使用 Babel 将 ES6 转成兼容更广泛的 ES5

    在前端开发领域，我们经常会听到“ES6”这个词汇。所谓 ES6，是指 ECMAScript 6，也就是 JavaScript 的第六个版本。ES6 的出现，使得 JavaScript 语言在语法、模板...

    1 年前
  • CSS Grid 布局之 grid-auto-rows 详解

    CSS Grid 布局是一种用于网页布局的新方法，它可以让我们更灵活的控制网页中各个元素的位置和大小。其中，grid-auto-rows 属性是用来定义在 CSS 网格中自动创建的行的大小的。

    1 年前

相关推荐

    暂无文章