PWA(Progressive Web Apps),是一种可以提供类似原生应用体验的网页应用。简单的理解就是,可以让网页像原生应用那样在用户的设备上安装,并且能够实现离线工作、推送通知等功能,不知道你注意过没有,你偶尔会在chrome浏览器中可以看到一个这样的标志:
这就意味着这个web站点是支持了PWA的。那么为什么有越来越多的网站支持了这个特性呢?
1、我想主要是因为,PWA可以通过Service Workers,在没有网络的情况下运行,提高用户体验。
2、另外可以很方便的添加到主屏幕,类似于你装了一个App一样,这样等同于霸占了用户的屏幕,不需要用户去记住你的域名了,点击一下图标,而且前面也提到了,即便在网络不佳的情况下,都可以秒速加载,因为那些html,css,js等资源都打包好了在本地。
因此,使用PWA对用户体验的提升是显而易见的,所以,今天的主题是怎么样轻而易举做一个PWA应用。
学习本文,你将了解
其实PWA的实现原理主要依赖于几个现代Web技术:
PWA 应用的一个大致的交互流程,可以使用下图来配合理解:
为什么又是Next.js,你可能会问你能不能来点别的,我想说的是,Next.js作为一个前后端通杀的框架,的确非常适合作为本文的教学,因为本文是要实现一个 hack news top news列表,自然而然是需要拿到 hack news 的列表的,为了防止跨域等等一些不确定性,通常是需要一个后端server提供接口的,为了演示一个PWA,去做一个全栈项目似乎又有点偏离主题,总之,正因为Next.js有如下好处:
我们才选择了使用 Next.js来做这个演示。
在命令行中运行以下命令来创建一个新的Next.js项目:
npx create-next-app hackernews-pwa
cd hackernews-pwa
为了使你的Next.js应用成为PWA,你需要安装一些额外的依赖,
npm install next-pwa
在你的Next.js项目中,使用上next-pwa
插件,我们只修要将下面的代码贴入到里面即可。
/** @type {import('next').NextConfig} */
const withPWA = require('next-pwa')({
dest: 'public'
})
const nextConfig = {}
module.exports = withPWA(nextConfig);
如下图所示,如果你将以后的项目转化为PWA支持的项目,这里同样适合你学习。
继续,我们创建一个public/manifest.json
文件,这是PWA的应用清单,它定义了应用的名称、图标等:
{
"short_name": "HackerNews",
"name": "Hacker News PWA",
"icons": [
{
"src": "/icons/icon-192x192.png",// 注意这里命名一致
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/icons/icon-512x512.png",// 保持一致
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/",
"background_color": "#ffffff",
"display": "standalone",
"scope": "/",
"theme_color": "#000000"
}
有了这个manifest.json文件之后,你需要在html上做点手脚,编辑 layout.tsx文件,告知manifest.json文件所在:
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
++ <link rel="manifest" href="/manifest.json" />
<body className={inter.className}>{children}</body>
</html>
);
}
还有,确保你有相应的图标文件在public/icons
目录下,不然,到了你安装应用的时候,可能会导致失败,或者说应用没有图标。
如果你是基于其他的项目,比如纯净的手写 html+css,那么,你可能需要生成的Service Worker。但是现在你使用的Next.js,不需要手动去做,因为我们在next.config.js里面已经配置了PWA插件, next-pwa
插件会自动为你生成Service Worker,所以你不需要手动添加,如图。
接下来,就运行下我们的应用,npm run dev
,打开浏览器并访问http://localhost:3000
。打开浏览器,我们并没有发现chrome上那个安装应用的图标,这是因为,Next.js开发模式下,为了热更新等一些特性,不支持,如图所示,主要是因为,Next.js在开发模式cache和precache被禁用了
。
因此,为了测试PWA功能,你需要在生产模式下运行你的应用,因此你需要 npm run build
。
npm run build && npm start
此时,我们在打开 localhost:3000,不出意外的话,我们就可以看到chrome 地址栏安装应用的图标了,我们可以点击安装试试看,这里因为没有写任何 css,所以,界面看起来不那么 ok,但是这个不是本文的重点。
点击安装,我们发现,应用成功被安装了。
如果你正在做一个web 应用,不妨考虑一下,是否进一步优化,将其做成一个可以打包成 PWA 的应用,这样,用户可以将你的 web 应用安装到桌面上,这将会有一些显而易见的好处。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。