PWA 相关面试问题
1. 什么是 PWA?它的核心特性是什么?
回答思路:
- 解释 PWA 的定义。
- 强调 PWA 的核心特性。
示例答案:
PWA(Progressive Web App,渐进式网页应用)是一种通过现代 Web 技术提供类似原生应用体验的网页应用。它的核心特性包括:
- 离线功能:通过 Service Worker 技术,PWA 可以在没有网络的情况下运行。
- 快速加载:通过缓存资源,PWA 可以快速加载,即使在弱网络环境下。
- 可安装:用户可以将 PWA 添加到主屏幕,像原生应用一样使用。
- 响应式设计:PWA 可以适应各种设备(手机、平板、桌面)。
- 推送通知:PWA 支持推送通知功能,增强用户互动。
2. 如何实现 PWA 的离线功能?
回答思路:
- 解释 Service Worker 的作用。
- 描述如何通过 Service Worker 缓存资源。
示例答案:
PWA 的离线功能主要通过 Service Worker 实现。Service Worker 是一个运行在浏览器后台的脚本,它可以拦截网络请求并缓存资源。具体实现步骤如下:
-
注册 Service Worker:
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js') .then(function(registration) { console.log('Service Worker 注册成功'); }) .catch(function(error) { console.log('Service Worker 注册失败:', error); }); }
-
编写 Service Worker:
在service-worker.js
中定义缓存策略。例如:const CACHE_NAME = 'my-pwa-cache-v1'; const urlsToCache = [ '/', '/styles.css', '/script.js', '/icon.png' ]; self.addEventListener('install', function(event) { event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { return cache.addAll(urlsToCache); }) ); }); self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { return response || fetch(event.request); }) ); });
3. Service Worker 的工作原理是什么?
回答思路:
- 解释 Service Worker 的生命周期。
- 描述 Service Worker 如何拦截请求和缓存资源。
示例答案:
Service Worker 是一个独立于网页的脚本,运行在浏览器后台。它的工作原理如下:
- 注册:网页通过
navigator.serviceWorker.register()
注册 Service Worker。 - 安装:Service Worker 安装时,可以预缓存关键资源。
- 激活:安装完成后,Service Worker 进入激活状态,开始控制页面。
- 拦截请求:Service Worker 可以拦截网络请求,并从缓存中返回响应,或者将请求转发到网络。
- 更新:当 Service Worker 文件发生变化时,浏览器会安装新的版本,并在合适的时机激活它。
4. 如何让用户将 PWA 添加到主屏幕?
回答思路:
- 解释 Web App Manifest 的作用。
- 描述如何通过浏览器提示用户安装。
示例答案:
要让用户将 PWA 添加到主屏幕,需要以下步骤:
-
创建 Web App Manifest:
创建一个manifest.json
文件,定义应用的名称、图标、主题颜色等信息。例如:{ "name": "My PWA", "short_name": "PWA", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#000000", "icons": [ { "src": "icon.png", "sizes": "192x192", "type": "image/png" } ] }
-
在 HTML 中引用 Manifest:
<link rel="manifest" href="/manifest.json">
-
触发安装提示:
当 PWA 满足一定条件(如用户多次访问),浏览器会自动提示用户将应用添加到主屏幕。
5. PWA 和原生应用的区别是什么?
回答思路:
- 对比 PWA 和原生应用的优缺点。
- 强调 PWA 的跨平台特性。
示例答案:
PWA 和原生应用的主要区别如下:
-
开发成本:
- PWA:基于 Web 技术(HTML、CSS、JavaScript),开发成本低,跨平台。
- 原生应用:需要为不同平台(iOS、Android)分别开发,成本较高。
-
性能:
- PWA:性能接近原生应用,但在复杂动画和计算密集型任务上可能稍逊一筹。
- 原生应用:性能最优,尤其是在需要大量计算或图形处理的场景。
-
分发和更新:
- PWA:通过 URL 访问,无需应用商店,更新即时生效。
- 原生应用:需要通过应用商店分发,更新需要用户手动下载。
-
功能支持:
- PWA:支持大部分原生功能(如推送通知、摄像头访问),但某些高级功能可能受限。
- 原生应用:支持所有设备功能。
AMP 相关面试问题
1. 什么是 AMP?它的设计目标是什么?
回答思路:
- 解释 AMP 的定义。
- 强调 AMP 的设计目标。
示例答案:
AMP(Accelerated Mobile Pages,加速移动页面)是一个开源框架,旨在通过优化 HTML、CSS 和 JavaScript 的使用,使移动网页加载速度更快。它的设计目标包括:
- 极速加载:AMP 页面通常会在 1 秒内加载完成。
- 简化代码:AMP 使用自定义的 HTML 标签和严格的规则来优化性能。
- 缓存支持:AMP 页面可以通过 Google AMP Cache 分发,进一步提升加载速度。
2. AMP 页面为什么加载速度快?
回答思路:
- 解释 AMP 的限制和优化措施。
示例答案:
AMP 页面加载速度快的原因包括:
- 限制 JavaScript 使用:AMP 禁止使用自定义 JavaScript,只允许使用 AMP 提供的组件。
- 异步加载资源:所有资源(如图片、视频)都是异步加载的,不会阻塞页面渲染。
- 预渲染:通过 Google AMP Cache,AMP 页面可以在用户点击之前预渲染,进一步提升加载速度。
- 简化 CSS:AMP 要求所有 CSS 内联,并且大小不超过 50KB。
3. AMP 页面有哪些限制?
回答思路:
- 列举 AMP 的主要限制。
示例答案:
AMP 页面的主要限制包括:
- 禁止自定义 JavaScript:只能使用 AMP 提供的组件。
- CSS 必须内联:所有 CSS 必须内联在
<style amp-custom>
标签中,且大小不超过 50KB。 - 图片必须使用
<amp-img>
:不能直接使用<img>
标签。 - 表单必须使用
<amp-form>
:不能直接使用<form>
标签。
4. 如何在 React 中开发 AMP 页面?
回答思路:
- 解释如何在 React 中遵循 AMP 的规则。
示例答案:
在 React 中开发 AMP 页面时,需要遵循 AMP 的规则。可以使用 react-amphtml
库来简化开发。示例代码如下:
import React from 'react';
import { Amp, AmpImg } from 'react-amphtml';
function MyAmpPage() {
return (
<Amp>
<h1>Hello, AMP!</h1>
<AmpImg src="image.jpg" width="300" height="200" layout="responsive" />
</Amp>
);
}
export default MyAmpPage;
😊