渐进式 Web 应用简介

如何开始 Web 开发？

打个招呼并了解互联网、IP、WWW、浏览器、客户端-服务器架构、HTTP(S)、DNS、搜索引擎、URL、API 的概念。

网页

可以在网络浏览器中显示的文档，以 HTML 语言编写，在网络上使用 URL 唯一标识。

网站/网络应用程序

网站或 Web 应用程序是网页的集合。

Web 服务器

在互联网上托管网站的计算机。

所用技术及其标准

超文本标记语言（HTML）

Web 的最基本组成部分。它定义了 Web 内容的含义和结构。

层叠样式表 (CSS)

样式表语言描述网页的外观/呈现。

JavaScript

一种轻量级、解释型、面向对象、具有一流功能的语言，用于在网页中描述功能/行为。

WebAssembly

TL;DR在 Web 上运行 C/C++/Rust 代码

WebAssembly 是一种可以在现代 Web 浏览器中运行的新型代码——它是一种类似低级汇编的语言，具有紧凑的二进制格式，可以接近本机的性能运行，并为 C/C++ 等语言提供编译目标，以便它们可以在 Web 上运行。

Web API/浏览器 API

非 JavaScript 的一部分，由宿主环境（浏览器）提供。其中最重要的是文档对象模型 (DOM)，用于操作文档。此外，还有 Fetch（与服务器通信）、客户端存储、设备、音频/视频、图形 API、Web Workers API（在独立于主执行线程的后台线程中运行脚本）、WebSocket、服务器发送事件、权限 API 等。

还有第三方 API（例如 Twitter API、Google Maps API 等）。

主流浏览器使用的引擎

浏览器	渲染引擎（将网页的 HTML 和其他资源转换为用户设备上的交互式视觉表示）	JavaScript 引擎（执行 JavaScript 代码）
Chromium、谷歌浏览器、微软 Edge、Opera、Brave	眨	V8
火狐	壁虎	蜘蛛猴
Internet Explorer	三叉戟	脉轮
Microsoft Edge（初始）	EdgeHTML	脉轮
Safari	WebKit	JavaScriptCore（SquirrelFish）

什么是渐进式 Web 应用程序 (PWA)？

Web 应用增强了类似原生应用的功能，例如安装、离线支持和推送通知。Website ++ 😜。

可发现 - 来自网络搜索结果/应用商店（Google Play Store（使用TWA）、Microsoft Store 等）
可安装 - 像应用程序一样，安装提示可以自定义
可重新参与 - 像本机应用程序一样发送推送通知
独立于网络 - 离线或低网络条件下工作
渐进式（跨浏览器兼容性）——使用最新的 Web API，体验会随着设备功能而扩展（或缩小）
安全 - 仅适用于 HTTPS（您可以使用 letsencrypt.org）
响应式设计——适应屏幕尺寸、方向和输入法
可链接 - 通过标准超链接共享和启动
最佳实践 - 提高效率，遵循语义、可访问性（A11y）、国际化（i18n）、本地化（i10n）、新兴 Web API 的使用

为什么选择 PWA？

改善用户体验
易于开发和维护
跨平台和原生体验

让我们尝试一下

以下是 PWA 的两个主要组件。

Service Workers，一种 Web Worker。它本质上是一个独立于浏览器主线程运行的 JavaScript 文件，用于拦截网络请求、缓存或从缓存中获取资源以及发送推送消息。
Web 应用清单（一个 JSON 文件，描述有关 Web 应用的关键信息（例如图标、语言和 URL 入口点））

添加一个“manifest.json”文件，其中包含名称、图标、颜色、显示（用于自定义应用程序的浏览器 UI）属性。

清单.json

{
  "short_name": "test",
  "name": "pwa test",
  "icons": [
    {
      "src": "/icon.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icon.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "background_color": "#3367D6",
  "display": "standalone",
  "theme_color": "#3367D6"
}

“index.html” 导入了 “manifest.json” 文件。Safari 仅部分支持 manifest 配置。它使用元标记来获取属性。

索引.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>pwa test</title>
  <link rel="manifest" href="/manifest.json">
  <!-- Add to home screen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="pwa test">
  <link rel="apple-touch-icon" href="icon.png">
  <meta name="msapplication-TileImage" content="icon.png">
  <meta name="msapplication-TileColor" content="#3367D6">
</head>
<body>
  <h1>Hi Everyone!</h1>
  <script>
    window.addEventListener('load', async () => {
      if ('serviceWorker' in navigator) {
        try {
          const registration = await navigator.serviceWorker.register('/sw.js');
          console.log('ServiceWorker registration successful with scope: ', registration.scope);
                  } catch (err) {
          console.error(err);
        }
      }
    });
  </script>
</body>
</html>

使用“serviceWorker.register()”注册一个 Service Worker。它包含“install”、“activate”和“fetch”事件。接下来我们添加“sw.js”。“sw.js”包含一些事件处理程序，用于处理应用的缓存。

sw.js

const dataCacheName = 'pwa-test-data';
const cacheName = 'pwa-test';
const filesToCache = [
  '/',
  '/index.html',
  '/icon.png',
];

//install the sw
self.addEventListener('install', function (e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function (cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});


self.addEventListener('activate', function (e) {
  console.log('[ServiceWorker] Activate');
  e.waitUntil(
    caches.keys().then(function (keyList) {
      return Promise.all(keyList.map(function (key) {
        if (key !== cacheName && key !== dataCacheName) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
  return self.clients.claim();
});


self.addEventListener('fetch', function (e) {
  console.log('[Service Worker] Fetch', e.request.url);
  e.respondWith(
    caches.match(e.request).then(function (response) {
      return response || fetch(e.request);
    })
  );
});

现在，我们需要一个服务器来托管我们的应用。让我们创建一个简单的 express.js 服务器。添加用于服务公共目录的“server.js”。

服务器.js

const path = require('path');
const express = require('express');

const app = express();

app.use(express.static('public'));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
})

app.listen(7777, function () {
  console.log('Example app listening at http://localhost:7777')
});