与本地应用程序类似,渐进式网络应用程序(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.