PWA和SSG的区别及使用

最新推荐文章于 2024-07-12 14:29:22 发布

猿耳盗铃

最新推荐文章于 2024-07-12 14:29:22 发布

阅读量209

点赞数

分类专栏：性能文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_37609787/article/details/130532289

版权

性能专栏收录该内容

2 篇文章 0 订阅

订阅专栏

PWA（Progressive Web App）和 SSG（Static Site Generator）都属于现代 Web 开发技术，但两者有着不同的应用场景和解决方案。

PWA

PWA 是一种渐进式 Web 应用程序，它借助 service workers 技术实现应用离线访问、推送通知等特性，同时能够具备类似原生应用的用户体验。PWA 可以在安装后离线使用，确保加载速度更快且用户交互更加顺畅。PWA 因为其能够缓存一些静态文件及所需数据在本地，实现了无网络时仍可访问网页的功能。

SSG

而 SSG 则是一种通过事先在构建过程中生成 HTML、CSS、JS 等静态文件，并在服务器上进行分发，使得 Web 页面呈现更快、更易于缓存等优点。SSG 最常见的应用场景是构建博客、文档站点、电子商务或展示型网站等不需要频繁更新的站点。这种技术可以在网站发布前，预先将所有所需内容处理完成并打包，通过服务端进行部署。

总结

简单来说：

PWA 适合需要动态数据的应用。PWA 实现了浏览器本地缓存，即使没有网络也可以看到最近一次的页面信息。因此对于需要频繁请求的数据可以减少网络请求量，同时也实现了离线访问应用。

SSG 适合内容不经常变化，但流量和SEO排名又非常重要的网站。因为多数情况下，SSG 不必考虑频繁更新内容而面临的使用负担。由于它会生成静态文件，所以对于相似的请求能够快速响应，因此可以显著提高页面性能及服务的质量，同时也带来更好的 SEO 效果。

当然在实际开发中，PWA 和 SSG 可以结合使用，使得 Web 应用既具备离线访问功能，又能够实现爬虫抓取和搜索引擎优化等目标。

PWA的使用

基于 Vue 的 PWA 解决方案主要使用 service worker 技术实现离线缓存和应用程序更新等功能，提供了一种更高效、更优雅的网络应用体验。以下是基于 Vue 的 PWA 解决方案使用的流程：

1. 安装 pwa 插件

通过 npm 安装 @vue/cli-plugin-pwa 插件，该插件提供了可用于构建 PWA 的配置和生成适合生产环境部署的应用代码。

npm install -D @vue/cli-plugin-pwa

2.创建 PWA 项目

使用 Vue CLI 工具创建持久化 Web 应用程序（PWA）应用程序模板。

vue create my-pwa-app

在交互式命令行中选择默认选项或自己需要的特性进行配置即可。

3.配置 pwa 插件

进入项目的根目录并打开 vue.config.js 文件，在配置对象中添加 pwa 相关配置。

module.exports = {
  pwa: {
    name: 'my-pwa-app',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
        swSrc: 'src/sw.js'
    }
  }
};

name：指定应用名称。

themeColor：指定应用主题色。

msTileColor：指定平铺磁贴的颜色。

appleMobileWebAppCapable：指定 Safari 是否应该在启动时使用完整的屏幕。

appleMobileWebAppStatusBarStyle：指定状态栏的样式。

workboxPluginMode：指定 Workbox 插入服务工作者代码的模式。

workboxOptions：Workbox 选项对象，其中包含 swSrc 属性，指定服务工作者代码位置。

4.注册 service worker

创建一个新的 sw.js 文件，并在 main.js 文件中注册您的服务工作者。

javascript
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      console.log('Service worker registered with scope: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}