与本地应用程序类似，渐进式网络应用程序（PWA）是在移动设备上运行网络应用程序的一种流行解决方案。有了PWA，用户可以像移动应用一样轻松熟悉地体验网络应用；同样地，公司能够直接在互联网上托管应用，而不是在不同的移动应用商店。
在本教程中，我们将用Svelte创建我们自己的PWA，这是一个基于命令式与声明式应用的现代框架。对于像React这样的传统框架，你必须单独构建你的应用程序的所有部分；然而，Svelte只需少量的代码就能预先渲染你的应用程序的构建。
首先，我们将通过在Svelte中构建我们自己的PWA来探索其工作原理。然后，我们将看看Sapper和SvelteKit的一些功能，你可以用它们来为你的应用带来PWA功能。我们将参考一个样本项目，该项目可以在GitHub上的我的repo中访问。让我们开始吧!
PWA功能
在建立我们自己的项目之前，让我们仔细看看PWA是如何工作的。以下两个特性与渐进式增强技术一起工作，创造出类似于本地应用程序的体验。
服务工作者作为网络应用的中介或代理，能够使用缓存资源并优雅地处理糟糕的互联网连接。
例如，当互联网连接丢失时，我们可以使用服务工作者来向用户显示一条信息，这样应用程序就不会突然崩溃。同样地，服务工作者可以使我们的应用程序保存本地活动，并在重新获得互联网连接后重新同步。
网络清单使用户能够在特定平台上下载或安装应用程序。用户在浏览器中看到的应用可以脱机运行，也可以在类似于本地实现的状态下运行。尽管清单仍被认为是实验性的，但它们得到了现代浏览器的大力支持。
用Svelte构建PWA
现在我们了解了定义PWA的功能，让我们用Svelte构建我们自己的PWA。本节中的例子是基于GitHub的一个例子。
首先，到你的终端，通过运行下面的代码创建一个新的Svelte项目。
npx degit sveltejs/template svelte-pwa
接下来，我们将安装我们的JavaScript依赖项。导航到你刚刚创建的目录中，运行下面的代码。
cd svelte-pwa
npm install
当我们使用degit 来创建一个新的项目时，Svelte为一个基本的应用程序提供了支架，其结构如下。
我们将主要处理src 目录下的文件。App.svelte 文件是我们项目的入口点，包含以下代码。
<script>
export let name;
</script>
<main>
<h1>Hello {name}!</h1>
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>
<style>
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
}
h1 {
color: #ff3e00;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}
@media (min-width: 640px) {
main {
max-width: none;
}
}
</style>
.svelte 文件有单独的部分用于样式、视图html ，以及任何JavaScript代码<scripts> 。
在你的main.js 文件中添加以下代码，以引导你的应用程序，并告诉捆绑器用你的.svelte App文件构建项目。
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
name: 'world'
}
});
export default app;
要创建一个PWA，首先，我们要在public 目录中的service-worker.js 文件内创建一个服务工作者。
"use strict";
// Cache Name
const CACHE_NAME = "static-cache-v1";
// Cache Files
const FILES_TO_CACHE = ["/offline.html"];
// install
self.addEventListener("install", (evt) => {
console.log("[ServiceWorker] Install");
evt.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
console.log("[ServiceWorker] Pre-caching offline page");
return cache.addAll(FILES_TO_CACHE);
})
);
self.skipWaiting();
});
// Active PWA Cache and clear out anything older
self.addEventListener("activate", (evt) => {
console.log("[ServiceWorker] Activate");
evt.waitUntil(
caches.keys().then((keyList) => {
return Promise.all(
keyList.map((key) => {
if (key !== CACHE_NAME) {
console.log("[ServiceWorker] Removing old cache", key);
return caches.delete(key);
}
})
);
})
);
self.clients.claim();
});
// listen for fetch events in page navigation and return anything that has been cached
self.addEventListener("fetch", (evt) => {
console.log("[ServiceWorker] Fetch", evt.request.url);
// when not a navigation event return
if (evt.request.mode !== "navigate") {
return;
}
evt.respondWith(
fetch(evt.request).catch(() => {
return caches.open(CACHE_NAME).then((cache) => {
return cache.match("offline.html");
});
})
);
});
在上面的代码块中，我们注册由服务工作者处理的事件，包括install 和fetch 事件。为了处理项目的离线使用，我们将缓存导航中使用的文件并记录我们缓存的内容。使用PWA，你可以只缓存需要的东西，改善你的用户体验。
接下来，我们将创建一个offline.html 文件，它将被缓存到导航中。在public 目录中添加以下代码。
现在，让我们在public 目录中创建一个manifest.json 文件。
你可以使用icons 条目来为不同的设备设置安装图标，然而，为了简单起见，我把它留空了。
现在，当Svelte构建你的应用程序时，它将读取这些文件并创建一个正在运行的服务工作者，在检测到离线活动时缓存一个导航资源。运行npm run dev ，就可以用服务工作者启动你的应用程序。如果你在Chrome浏览器中打开DevTools，你会看到服务工作者开始运行。
要看到服务工作者的运行，你也可以进入network 标签，将你的会话移到离线状态。
在SvelteKit中建立一个PWA
现在，让我们使用SvelteKit创建一个PWA。在这个例子中，我们将创建一个 "你好，世界！"的应用程序。在你的终端中运行下面的代码。
npm init svelte@next sveltekit-pwa
CLI会问你是想创建一个演示应用程序还是一个骨架项目。选择演示程序。
CLI还将询问你是否愿意使用TypeScript、Prettier或ESLint。添加下面的配置。
现在，进入你的SvelteKit项目目录，用以下代码安装所需的依赖项。
cd sveltekit-pwa
npm install
为了运行你的项目，添加下面的代码。
npm run dev -- --open
现在我们的项目已经创建，我们可以使用创建基本的Svelte PWA所遵循的相同步骤使其成为一个PWA。在static 目录中创建一个manifest.json 文件。
接下来，修改src 目录下的app.html 文件，加入对manifest.json 文件的引用。
最后，在src 目录中创建一个service-worker.js 文件。
import { build, files, timestamp } from '$service-worker';
const worker = (self as unknown) as any;
const FILES = `cache${timestamp}`;
const to_cache = build.concat(files);
const staticAssets = new Set(to_cache);
// listen for the install events
worker.addEventListener('install', (event) => {
event.waitUntil(
caches
.open(FILES)
.then((cache) => cache.addAll(to_cache))
.then(() => {
worker.skipWaiting();
})
);
});
// listen for the activate events
worker.addEventListener('activate', (event) => {
event.waitUntil(
caches.keys().then(async (keys) => {
// delete old caches
for (const key of keys) {
if (key !== FILES) await caches.delete(key);
}
worker.clients.claim();
})
);
});
// attempt to process HTTP requests and rely on the cache if offline
async function fetchAndCache(request: Request) {
const cache = await caches.open(`offline${timestamp}`);
try {
const response = await fetch(request);
cache.put(request, response.clone());
return response;
} catch (err) {
const response = await cache.match(request);
if (response) return response;
throw err;
}
}
// listen for the fetch events
worker.addEventListener('fetch', (event) => {
if (event.request.method !== 'GET' || event.request.headers.has('range')) return;
const url = new URL(event.request.url);
// only cache files that are local to your application
const isHttp = url.protocol.startsWith('http');
const isDevServerRequest =
url.hostname === self.location.hostname && url.port !== self.location.port;
const isStaticAsset = url.host === self.location.host && staticAssets.has(url.pathname);
const skipBecauseUncached = event.request.cache === 'only-if-cached' && !isStaticAsset;
if (isHttp && !isDevServerRequest && !skipBecauseUncached) {
event.respondWith(
(async () => {
// always serve static files and bundler-generated assets from cache.
// if your application has other URLs with data that will never change,
// set this variable to true for them and they will only be fetched once.
const cachedAsset = isStaticAsset && (await caches.match(event.request));
return cachedAsset || fetchAndCache(event.request);
})()
);
}
});
随着我们的SvelteKit PWA的完成，我们可以将它连接到互联网上，并看到它正在运行。
在没有互联网连接的情况下，我们的应用程序将看起来像下面的图片。
尽管有明显的HTTP错误，但该应用能够优雅地处理与互联网断开连接的问题。
在Sapper中建立一个PWA
正如官方Sapper文档中所说。Sapper的继任者SvelteKit目前已经可以使用。所有的开发工作都将集中在SvelteKit上。Sapper文档包括一个有用的迁移指南。如果你喜欢用Sapper构建你的应用程序，尽管它缺乏支持，请继续阅读。
Sapper允许你像使用Svelte一样开发你的应用程序，但是它有一个额外的好处，就是支持PWA。在你的终端运行以下代码，创建一个Sapper应用程序。
npx degit "sveltejs/sapper-template#rollup" sapper-pwa
通过运行下面的代码安装所需的依赖性。
cd sapper-pwa
npm install
现在，为了看到你的Sapper应用程序在运行，添加本地运行命令，如下所示。
npm run dev
看一下生成的代码，你会发现该项目已经包括一个服务工作者和一个清单文件。
通过这个过程，你基本上可以像使用Svelte那样开发一个Sapper应用程序。
总结
在这篇文章中，我们探讨了构建PWA的好处，并研究了如何使用服务工作者和Web清单构建PWA。然后，我们探讨了使用Svelte、SvelteKit和Sapper构建PWA的三种方法。
由于本地应用程序的普及，PWA的使用可能会继续增长。值得庆幸的是，当你使用像Svelte这样的现代框架时，构建一个PWA是相当简单的。我希望你喜欢这个教程!
The postBuilding a PWA with Svelteappeared first onLogRocket Blog.
