用Svelte建立一个PWA
与本地应用程序类似，渐进式网络应用程序（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;
Hello {name}!
Visit the Svelte tutorial to learn how to build Svelte apps.
```
.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.
- 在C 中把字符串转换为整数的两种简单方法
- 如何在Flutter中实现任何UI
- Gatsby v4的新内容
- 创建一个Puppeteer微服务以部署到Google Cloud Functions
- 在Blazor中测试。一个完整的教程
- 在React中使用Plotly来构建动态图表
- 分页、加载更多按钮和无限滚动的指南
- 用新的Firebase v9.x Web SDK重构一个React应用
- 在使用地理定位API时，你需要知道什么？
- 在PostgreSQL v14中，JSON有什么新功能？
- 使用React的函数式编程的基础知识
- 使用Dart FFI访问Flutter中的本地库
- 使用视频播放器插件在Flutter中处理视频
- 改进过度约束的Rust库API
- 用Svelte建立一个PWA
- 用Flask和D3.js构建交互式图表
- 在Go中使用JSON。带例子的指南
- 一篇文章入门Unix中的AWK命令！
- C 哈希
- Dotfiles - 什么是Dotfile以及如何在Mac和Linux中创建它