利用 PWA 与 Material Design 打造出色的 Web App
近年来，随着移动互联网的发展，Web App 逐渐成为了一种热门的开发方式，而 PWA（Progressive Web App）被誉为是 Web App 的未来之路。搭配 Material Design，可以让我们的 Web App 更加出色。在本文中，我们将探讨如何使用 PWA 与 Material Design 打造出色的 Web App。
一、PWA 的基本概念
PWA 是 Google 推出的新一代展示方式。它采用了现代 Web 技术，为用户提供了更优秀的 Web 体验。PWA 的主要特点包括：
1、可靠性： PWA 采用了 Service Worker 技术来缓存数据和代码，同时存储在用户设备本地。这保证了用户在无网络状态下也可以继续访问 Web APP。如果用户恢复网络，并且网站内容没发生变化，那么 Service Worker 能够负责将缓存的数据同步到服务器端。
2、渐进式：PWA 采用在基于 Web 的应用程序中渐进式增强功能的理念。配合应用清单文件来实现应用添加到主屏幕上，以及网页里的分享、离线等功能，让用户使用起来像 native App 一样的效果。
3、可发现性： PWA 可以通过 Manifest.json 的文件来声明自己是一个 PWA 并且提供其他元数据信息，如应用名称、图标、主题颜色、简介等。这些信息帮助搜索引擎和操作系统发现、引导和快速识别应用。
二、Material Design 的基本概念
Material Design 是 Google 在近年来提出的设计理念，是由虚拟与现实世界融合的一种新的设计语言。Material Design 原本是 Android 设计的基础，它非常注重构建纸质图标、独特的阴影效果和背景透明处理效果。它的设计哲学是所有应用程序都要符合以上要求，让用户以一种连贯的方式运用应用程序。
使用 Material Design 的优点主要在于它的界面设计更加现代化、可视化效果更加出色，在视觉上，它非常符合现代社会人们预期的视觉风格，因此受到了广泛的欢迎。
三、如何使用 PWA 与 Material Design 打造出色的 Web App
接下来我们将介绍如何利用 PWA 与 Material Design 来打造出色的 Web App。这里我们将以一个在线音频播放器为例进行说明。
1、数据与页面分离
为了更好的柔性化开发，我们需要将数据与页面分离开来，以达到更好的扩展性、维护性。
对于数据，我们需要使用一个库来提供 API。我们可以使用 axios 的库来实现，通过 API 调用获取服务器端数据。
对于页面，我们可以使用 Vue.js 工具代替传统的 jQuery 来实现。Vue.js 通过组件化实现项目的开发。
2、PWA 开发
在 PWA 开发中，我们需要添加 Service Worker 来缓存数据和代码。
- 注册 Service Worker
Service Worker 必须遵循以下规则才能成功创建：
1.该文件必须在跟文件层级写入，并且只在 HTTPS 环境下生效。
2.该文件必须设置通过同源限制和 CORS 限制来采取了安全措施。
下面是 Service Worker 的基本代码：
if (navigator.serviceWorker) { navigator.serviceWorker.register('/sw.js', { scope: '/' }) .then(registration => { console.log('注册成功：scope= ' + registration.scope); }).catch(error => { console.log('注册失败：', err); }); }
- 缓存数据
缓存通过 API 来实现，我们可以使用 sw-precache 库来实现。
sw-precache 主要用于构建 ServiceWorker 缓存的文件列表以及 ServiceWorker 缓存文件的规则，还能提供一些合理的缓存策略。
下面是 sw-precache 的基本代码：
gulp.task('generate-service-worker', function(callback) { var filepath = path.join(rootDir, 'service-worker.js'); var pathEndsWithSlash = global.BASE_HREF.endsWith('/'); var baseHref = pathEndsWithSlash ? global.BASE_HREF : global.BASE_HREF + '/';
var config = { cacheId: global.CACHE_ID, directoryIndex: '/', staticFileGlobs: [ baseHref + 'bower_components//*.{js,html,css}', baseHref + 'assets//.{png,jpg,gif}', baseHref + 'elements/**/.{js,html,css}', baseHref + 'scripts//*.{js,html,css}', baseHref + 'styles//.{js,html,css}', baseHref + 'views/**/.html', baseHref + 'manifest.json', baseHref + 'index.html' ], stripPrefix: [baseHref, baseHref.substr(0, -1)], navigateFallback: baseHref + 'index.html', navigateFallbackWhitelist: [/^(?!..json$|/api/).$/], cacheIframe: true, dynamicUrlToDependencies: { '/': [ 'index.html', 'elements/landing-page-behavior.js', 'bower_components/marked/marked.min.js' ], '/travel': [ 'views/travel/travel.html', 'elements/travel-footer.html', 'elements/travel-header.html', 'elements/travel-list.html', 'scripts/travel/travel.js' ], '/foods': [ 'views/foods/foods.html', 'elements/foods-footer.html', 'elements/foods-header.html', 'scripts/foods/foods.js' ], }, skipSw: false, swFile: filepath, runtimeCaching: [{ urlPattern: /^https://fonts.gstatic.com//i, handler: 'fastest', options: { cache: { name: 'google-fonts', }, }, }, { urlPattern: /^http(s)?//api.vimeo.com//i, handler: 'fastest', options: { cache: { maxAgeSeconds: 60 * 30, name: 'vimeo', }, }, }], verbose: true, };
swPrecache.write(filepath, config, function() { swPrecache.write(path.join(rootDir, 'sw-toolbox.js'), { staticFileGlobs: [filepath], verbose: true }, callback); }); });
3、Material Design 开发
为了让页面更符合 Material Design 理念的实现，我们需要引入 Material Design 的 CSS 文件。
以下是在 HTML 文件中引入 Material Design CSS 的代码：
<link /> <link />我们还可以使用 Materialize CSS 库来实现一些 Material Design 风格的组件。
四、最终代码
下面提供音频播放器的全部代码：
注：源代码由于篇幅较长，写在博客园 https://www.cnblogs.com/qqjay/p/8661546.html 上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b9ac2a306f20b3a681f7c4
