用Svelte建立一个PWA

语言: CN / TW / HK

与本地应用程序类似,渐进式网络应用程序(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为一个基本的应用程序提供了支架,其结构如下。

Scaffolded Svelte App Structure

我们将主要处理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"); }); }) ); });

```

在上面的代码块中,我们注册由服务工作者处理的事件,包括installfetch 事件。为了处理项目的离线使用,我们将缓存导航中使用的文件并记录我们缓存的内容。使用PWA,你可以只缓存需要的东西,改善你的用户体验。

接下来,我们将创建一个offline.html 文件,它将被缓存到导航中。在public 目录中添加以下代码。

Svelte Cache Public Directory

现在,让我们在public 目录中创建一个manifest.json 文件。

Svelte Manifest JSON

你可以使用icons 条目来为不同的设备设置安装图标,然而,为了简单起见,我把它留空了。

现在,当Svelte构建你的应用程序时,它将读取这些文件并创建一个正在运行的服务工作者,在检测到离线活动时缓存一个导航资源。运行npm run dev ,就可以用服务工作者启动你的应用程序。如果你在Chrome浏览器中打开DevTools,你会看到服务工作者开始运行。

Svelte App Run Service Worker

要看到服务工作者的运行,你也可以进入network 标签,将你的会话移到离线状态。

Svelte Service Worker Offline

Svelte Final Service Worker

在SvelteKit中建立一个PWA

现在,让我们使用SvelteKit创建一个PWA。在这个例子中,我们将创建一个 "你好,世界!"的应用程序。在你的终端中运行下面的代码。

``` npm init svelte@next sveltekit-pwa

```

CLI会问你是想创建一个演示应用程序还是一个骨架项目。选择演示程序

Svelte Sapper CLI Demo App

CLI还将询问你是否愿意使用TypeScript、Prettier或ESLint。添加下面的配置。

Svelte Sapper TypeScript Prettier Eslint Configuration

现在,进入你的SvelteKit项目目录,用以下代码安装所需的依赖项。

``` cd sveltekit-pwa npm install

```

为了运行你的项目,添加下面的代码。

``` npm run dev -- --open

```

New SvelteKit App Homepage

现在我们的项目已经创建,我们可以使用创建基本的Svelte PWA所遵循的相同步骤使其成为一个PWA。在static 目录中创建一个manifest.json 文件。

SvelteKit PWA Manifest Json

接下来,修改src 目录下的app.html 文件,加入对manifest.json 文件的引用。

Reference Manifest Json File

最后,在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的完成,我们可以将它连接到互联网上,并看到它正在运行。

SvelteKit PWA Internet Connection

在没有互联网连接的情况下,我们的应用程序将看起来像下面的图片。

SvelteKit PWA Without Internet

尽管有明显的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 Template

看一下生成的代码,你会发现该项目已经包括一个服务工作者和一个清单文件。

Svelte Sapper Service Worker Manifest File

通过这个过程,你基本上可以像使用Svelte那样开发一个Sapper应用程序。

总结

在这篇文章中,我们探讨了构建PWA的好处,并研究了如何使用服务工作者和Web清单构建PWA。然后,我们探讨了使用Svelte、SvelteKit和Sapper构建PWA的三种方法。

由于本地应用程序的普及,PWA的使用可能会继续增长。值得庆幸的是,当你使用像Svelte这样的现代框架时,构建一个PWA是相当简单的。我希望你喜欢这个教程!

The postBuilding a PWA with Svelteappeared first onLogRocket Blog.