云式博客

获取带累进Web应用的更好反应

by Mike Elsmore 2017年5月15日

二分三数列

自脸书发布以来的四年中,网络应用前端成分技术帮助全移动栈环接React反作用量.组件极佳,但学习曲线繁复归根结底,有回报高可复用代码和更好的用户经验

帮助人们回想应用图像视频管理服务云化提供全构集反应组件可快速配置并插入应用应用系统已经安装出媒体资产的管理操作并用CDN传送这些资产,你已经有了React应用系统向终端用户发送内容现在,你可能想提高性能提高终端用户经验要实现这一点,你将想遵循 React进化Web应用原理

进步Web应用多源可学习更多知识,包括一篇文章,我们最近写到何必关心.可你如何将它引入已经复杂并存的React应用逐步展示

应用应用使用云因子反射组件似似似似似似然https://github.com/ukmadlz/cloudinary-pwa-react/releases/tag/basic-media-app.所以,你需要采取什么步骤使它变异WebApp

步骤1:安全

应用安全吗将应用转换为累进WebApp所需要所有特征都只能从HTTPS上传连接使用if you are not already使用像CloudFrare这样的服务查找指南,以便在应用前快速实现 HTTPS缓存开发时,局部主机和127.0.0.1被认为是安全可信端点,这样你就可以开发而不用本地证书

应用可发现吗编织Weba进化Webaweb清单.JSON文件描述应用程序和资产,方便不同设备使用serve应用droid帮助应用名称、描述、spite页面、chrome外壳打包器和家用屏幕图标

最基本网表看起来像

	{
	"name": "Donate App",
	"description": "This app helps you donate to worthy causes.",
	"icons": [{
	"src": "images/icon.png",
	"sizes": "192x192"
	}]
	}

向浏览器传递首选图标,类似于favicon工作方式,并提供应用本身的名称和简单描述信息使用方式各异,从帮助内部历史搜索到为最近访问的片段提供更丰富信息但它都设计使应用更容易发现,或在大多数情况下快速重新发现多点高级文件仿佛我们使用演示应用向上跨出一步帮助浏览器解释a

文件描述可发现应用基础知识,并描述元数据使浏览器更容易显示内容并正确行为近邻应用要让浏览器可见此表,您需要向浏览器添加以下标签页面中 :

	<!-- Make this a PWA -->
	<link rel="manifest" href="/manifest.webapp">

	<!-- Display -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="theme-color" content="COLOR">

view raw head-tags.html hosted with ❤ by GitHub

元标签告诉浏览器(1) 在哪里查找清单,(2) 设置显示器和(3) 应用主题颜色并正确显示移动设备

App脱机工作吗?下个最重要的部分就是确保它脱机工作(否则定义上它不是进化WebApp)。方法就是注册服务员工运行背景处理信息从缓存和互联网并非所有受欢迎浏览器都符合服务员规范,因此需要点特征检测

	// Add Service Worker
	if ('serviceWorker' in navigator) {
	navigator.serviceWorker.register('./sw.js', { scope: './' }).then(function(reg) {

	if (reg.installing) {
	console.log('Service worker installing');
	} else if (reg.waiting) {
	console.log('Service worker installed');
	} else if (reg.active) {
	console.log('Service worker active');
	}

	}).catch(function(error) {
	// registration failed
	console.log('Registration failed with ' + error);
	});
	}

代码片段检验服务工是导航对象的一部分, 只有当它可用时它才试图注册位于新对象swjs并给它空间相对./.成功创建新实例swjs并执行事件代码服务员完全服务工本应用可查找来.文件由三大事件触发 :

	var cacheNameStatic = 'cloudinary-pwa-react-v1';

	var currentCacheNames = [ cacheNameStatic ];

	var cachedUrls = [
	// 3rd party CDN
	'https://unpkg.com/babel-core@5.8.38/browser.min.js',
	'https://unpkg.com/lodash@4.17.4/lodash.js',
	'https://unpkg.com/react@15.3.1/dist/react.min.js',
	'https://unpkg.com/react-dom@15.3.1/dist/react-dom.min.js',
	'https://unpkg.com/react-router-dom/umd/react-router-dom.min.js',
	'https://unpkg.com/cloudinary-core@2.3.0/cloudinary-core.js',
	'https://unpkg.com/cloudinary-react@1.0.3/dist/cloudinary-react.js',
	'https://unpkg.com/axios/dist/axios.min.js',
	'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css',
	// Local assets
	'/style.css',
	// Fake API
	'/images.json'
	];

	// A new ServiceWorker has been registered
	self.addEventListener("install", function (event) {
	event.waitUntil(
	caches.delete(cacheNameStatic).then(function() {
	return caches.open(cacheNameStatic);
	}).then(function (cache) {
	return cache.addAll(cachedUrls);
	}).catch(function(e) {
	})
	);
	});

	// A new ServiceWorker is now active
	self.addEventListener("activate", function (event) {
	event.waitUntil(
	caches.keys()
	.then(function (cacheNames) {
	return Promise.all(
	cacheNames.map(function (cacheName) {
	if (currentCacheNames.indexOf(cacheName) === -1) {
	return caches.delete(cacheName);
	}
	})
	);
	})
	);
	});

	self.addEventListener("fetch", function (event) {
	event.respondWith(
	caches.open(cacheNameStatic).then(function(cache) {
	return cache.match(event.request).then(function(response) {
	var fetchPromise = fetch(event.request).then(function(networkResponse) {
	cache.put(event.request, networkResponse.clone());
	return networkResponse;
	})
	return response \|\| fetchPromise;
	})
	})
	);
	});