PWA 是什么？

前言

在打开网站时你是否曾经感到加载速度较慢、卡顿多发、不能离线访问等等情况？为了解决这些问题，Google提出了一种新技术 —— PWA (Progressive Web App)。

PWA 是一种应用程序，它可以像本地应用程序一样进行选择、安装和操作，但在浏览器中运行。也许 PWA 还没成为行业标准，但它却已经在许多地方得到了广泛的采用。

为什么要学习 PWA？

在现代 Web 开发中，PWA 给 Web 应用带来了很多便利。它可以改善 Web 应用的用户体验，并且 相比普通的 Web 应用，还有以下优点：

  • 集成了应用弹出框及桌面提示，更类似于原生应用；
  • 加载速度快，可以提供类似于单页面应用程序的效果；
  • 工作离线或网络连接不佳的情况：使用 Service Workers 可以对离线时的数据进行缓存处理；
  • 全端、跨平台，比如在 Windows、macOS、Linux 等系统上都能使用；
  • 无需运行特定的操作系统或应用程序。

如此多的优点来得益于PWA的特定构建方法。接下来，我们将介绍 PWA 的前置知识以及从头开始构建 PWA 的过程。

前置知识

  • HTML、CSS、JavaScript的基础知识
  • Web APIs
  • Promise

开始构建

  1. 建立基本文件

创建 index.html、index.js 和 sw.js 文件。

index.html 文件中需要做到：

  • 添加 meta 标签，指定 icon 等主题信息，以便将 Web 应用程序安装到用户的主屏幕上；
  • 加载 index.js 文件；
  • 从cdn 载入 runtime.js 文件：
--------- -----
------
  ------
    ----- --------------- --
    -----
      ---------------
      ---------------------------- ---------------- ---------------- ----------------
    --
    ----- ------------------ ----------------- --
    ------------------
    ----- -------------- --------------------- --
    ----- ---------- ------------------- --
    ----- ---------------------- ---------------------------- --
  -------
  ------
    ------------ --- ---
    ---- ----------------
    ------- --------------------------------------------------------------------------------
    ------- ----------------------------------------------------------------------------------------
    ------- -------------------------------------------------------------------------------------------
    ------- --------------------------------------------------------------------------------
    ------- -------------------------------------------------------------------
    ------- --------------------------------------------------------------------
    ------- -------------------------
  -------
-------

我们在 <link> 标签中加入了 manifest 属性，将之前谷歌定义的 manifest 链接到 HTML 页面中。 在 index.js 文件中，需要做到：

  • 确保我们处于支持 Service Worker 的环境中；
  • 注册 Service Worker；
  • 运行 Router 和 React Web 应用。
-- ---------------- -- ---------- -
  ------------------------------- -------- -- -
    ------------------------------------------------
      -------- -------------- -
        -- ------- ------ ----
        ------------
          -------- ------ ------------ ---------- ---- ------ --
          ------------------
        -
      --
      -------- ----- -
        -- ------- ------ ----
        -------------------- ------ ------------ ------- -- ----
      -
    -
  --
-
  1. 创建 Service Worker

我们已经实现了文件的注册，接下来让我们创建我们的 Service Worker，编写逻辑来缓存数据以供离线使用。

  • 创建一个 sw.js 文件；
  • 捕获 install 事件并添加缓存逻辑；
  • 捕获 fetch 事件并为请求添加缓存逻辑。
-- ----------------------- ---- --------- ------------
----- ---------- - --------------

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

------------------------------ -------- ------- -
  --------------------- ------- ------- ------ ------- ------------------
  ------------------
    ----------------------------------------- ---------- -
      -- ---------- -
        --------------------- ------- -------- -------- ---- ------ -- ------------------
        ------ --------
      - ---- -
        --------------------- ------- -------- -------- ---- -------- -- ------------------
        ------ --------------------
      -
    --
  -
--
  1. 配置清单文件

清单文件的作用是向浏览器传递我们 Web 应用程序的基本信息，如名称、版本、主题颜色以及其他可供安装时使用的信息。

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

结论

已完成 PWA 的初步构建。这只是 PWA 技术的冰山一角，PWA 技术的难点是如何做到让 Service Worker 完美实现离线缓存，以及如何减小缓存并支持更新等问题。希望本文对你了解 PWA 有所帮助。

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

阅读全文

猜你喜欢

  • 如何在 Material Design 中使用 Toolbar 实现应用导航与操作

    在 Android 应用中，Toolbar 组件是一种重要的可以被用于实现应用导航与操作的工具。它不仅可以放置应用名称、菜单按钮等等元素，还可以与其他组件进行交互。

    5 天前
  • 如何处理SPA应用中的表单提交问题

    单页面应用（Single Page Application，SPA）是一种流行的Web开发模式，它可以带来良好的用户体验。但是，由于SPA应用中的所有数据都是在前端处理和渲染的，因此在处理表单提交时会...

    5 天前
  • 如何为你的 WordPress 站点构建一个 PWA 应用

    随着移动设备的普及，Web 应用程序的性能和用户体验已经成为了前端开发的重要议题。其中 Progressive Web App （PWA）应用已经成为开发者的热门选择，因为它们具有原生应用程序一样的用...

    5 天前
  • Android 无障碍模式中的滑动选择技巧

    随着移动设备的普及，越来越多的人通过手机或平板电脑进行网络浏览、购物、通讯等活动。但是，像老年人、残障人士等一些人群由于生理或者其他原因，可能会遇到很多网络操作难以完成的困难。

    5 天前
  • 使用 Koa.js 和 ElasticSearch 快速筛选和检索大数据

    大数据时代，如何高效地处理海量数据是每个开发人员需要思考的问题。在前端领域，如何快速筛选和检索大量数据是一个具有挑战性的任务。因此，我们需要一个强大的工具来处理这个问题，而 Koa.js 和 Elas...

    5 天前
  • Fastify 框架中解决跨站点请求伪造问题

    跨站点请求伪造（CSRF）是一种网络攻击方式，它利用用户在浏览器中已登录的身份，强制用户执行恶意请求。在前端开发中，我们经常需要处理 CSRF 攻击，以确保 Web 应用程序的安全性。

    5 天前
  • Vue.js：使用 provide/inject 和 event bus 实现非父子组件通信

    在 Vue.js 中，父子组件之间的通信是相对简单的，但是当我们需要在非父子关系的组件之间进行通信时，就需要一些特殊的技术方法。本文将介绍如何使用 Vue.js 中的 provide/inject 和...

    5 天前
  • Enzyme 和 React 的单元测试指南

    Enzyme 和 React 的单元测试指南 在现代 web 开发中，前端 JavaScript 应用程序已经成为不可或缺的部分，而 React 是一个引领这个趋势的库之一。

    5 天前
  • 解决 SSE 在HTTPS下的服务器验证问题

    在前端应用中，有时需要使用SSE（Server-Sent Events）来实现服务器和客户端之间的实时通信。然而，在使用SSE时，当网站使用HTTPS协议时，可能会出现服务器验证问题，从而导致SSE无...

    5 天前
  • 如何在 Jest 中测试与 Firebase 有关的应用程序？

    介绍 Firebase 是 Google 推出的一整套云服务，提供了实时数据库、身份验证、存储、消息推送等功能，可用于构建后端服务、应用程序和游戏。对于前端开发人员而言，Firebase 不仅可以提供...

    5 天前
  • Babel 转码 ES6 经常遇到的错误

    随着 ES6 的逐步普及，越来越多的前端开发人员开始使用 ES6 进行编程。然而，由于目前大多数浏览器并不完全支持 ES6，因此需要使用 Babel 进行转码。在使用 Babel 进行转码时，我们可能...

    5 天前
  • Headless CMS 如何进行实时数据更新？

    前言 Headless CMS 是一种将内容和数据分离的 CMS，也可以理解为后台系统和前台展示系统分离的一种解决方案。Headless CMS 可以为网站、应用和其他数字平台提供一些独特的解决方案，...

    5 天前
  • 实现数据压缩来提高前端程序性能

    在 Web 前端开发过程中，数据传输和渲染往往是消耗性能的重要环节。为了提高程序的性能，我们可以采用数据压缩的方式来减少数据传输的负担。本文将介绍如何在前端实现数据压缩，并分析其中的原理和效果，并提供...

    5 天前
  • 响应式设计中如何处理多样式表问题

    响应式设计中如何处理多样式表问题 当今互联网的用户已经越来越多地离开了传统的台式机和笔记本电脑，他们更喜欢使用各式各样的移动设备来访问网站。由此，响应式设计（Responsive Web Design...

    5 天前
  • 如何更新你的 Node.js 项目以使用 ES2020 的 Nullish 合并语法

    如何更新你的 Node.js 项目以使用 ES2020 的 Nullish 合并语法 在现代的 JavaScript 开发中，Nullish 合并语法是一个重要的特性，它允许开发人员更好地处理变量值为...

    5 天前
  • 在 Chai.js 中验证 JWT 令牌的实践

    在 Chai.js 中验证 JWT 令牌的实践 随着 Web 应用程序的日益普及，安全问题变得越来越重要。JWT 令牌是一种流行的身份验证方式，但是测试 JWT 令牌的有效性和真实性是一项挑战。

    5 天前
  • 无障碍模式下，如何实现长时间按键的辅助功能

    引言 随着科技的不断发展，人们对于无障碍模式的要求也越来越高。其中一个重要的需求是长时间按键的辅助功能。在无障碍模式下，很多人可能无法长时间按住按钮或鼠标左键。为满足这一需求，我们需要提供一种优雅的解...

    5 天前
  • 使用 Custom Elements 升级 Web 页面体验

    在现代 Web 开发中，我们经常需要借助各种框架和库来构建复杂的应用程序。虽然这样做可以大大提高开发效率和用户体验，但有时我们也需要一些更原生的方案来帮助我们更好、更快地构建 Web 页面和应用程序。

    5 天前
  • 使用 LESS 编写网页动态背景效果

    前言 在现代网页设计中，动态背景效果已经成为一种不可或缺的设计元素，能够吸引用户的眼球，提升网站的可视性。而作为一名前端开发者，我们可以使用 LESS 这个工具轻松实现网页动态背景效果。

    5 天前
  • Vue.js：解决 v-show/v-if 与 Vue.js 动画冲突问题的技巧

    Vue.js 是目前广泛应用于前端开发的 JavaScript 框架，而 v-show 和 v-if 则是在 Vue.js 中常用的指令，用于控制 DOM 元素的显示或隐藏。

    5 天前

相关推荐

    暂无文章