渐进式 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')
});
项目结构
怎么跑？
- 安装 Node.js
- 启动 cmd/terminal 并导航到应用程序目录并执行“npm i express”，然后执行“node server.js”
- 启动浏览器并访问“localhost:7777”
- 安装应用程序（如果是 Chrome，请单击 URL 栏上的安装按钮）
上述 PWA 示例的来源请见此处
下图中的公司已经开始提供 PWA！
很高兴知道
- 传统 Web 应用 vs 单页应用 (SPA)
- 服务器端渲染 vs 客户端渲染 vs Rehydration vs 预渲染
- PWA 的 App Shell 架构
- 急切、延迟和预加载、骨架加载
- Lighthouse - 网页审计工具
- PWAbuilder - 快速轻松地将您的网站变成应用程序！
- Workbox（用于生成服务工作者的库和工具的集合）。
请查看我的awesome-web-tech github repo 以获取更多资源。
感谢您阅读我的第一篇文章🙏
参考
MDN、MSDN、Google 开发者、web.dev、维基百科
文章来源：https://dev.to/sudhakar3697/intro-to-progressive-web-apps-34oo