我要评论
前言
事情起因是这样的，有个客户解密了一个js，然后又看不懂里边的一些逻辑，想知道它是如何自动拉起谷歌浏览器和如何保存应用到书签的，以及如何下载应用的。继而诞生了这篇文章，讲解一下他的基本原理。
渐进式web应用（progressive web app，pwa）是一种结合了网页和原生移动应用（native app）优点的新型应用开发模式。pwa的目标是提供类似于原生应用的用户体验，同时又具备网页应用的可访问性、可发现性和易分享性等特点。以下是pwa的一些重要特性和优势：
- 渐进增强: pwa采用渐进增强（progressive enhancement）的理念，意味着无论用户使用的设备和浏览器性能如何，都能够基本访问和使用应用，然后根据设备和浏览器的支持程度逐步提供更丰富的功能和体验。
- 可离线访问: pwa具备离线访问的能力，通过使用service worker技术，可以在用户离线时缓存应用所需的资源，使得用户即使在没有网络连接的情况下也能够继续使用应用。
- 原生应用体验: pwa可以提供与原生应用类似的体验，包括快速加载、平滑的动画和转场效果、在主屏幕上的图标等。通过web app manifest可以定义应用的图标、名称、主题色等信息，使得pwa在主屏幕上可以像原生应用一样被用户访问。
- 自动更新: 与网页相比，pwa更容易进行更新，用户无需手动进行更新操作，当应用有新版本时，浏览器会自动下载并更新service worker中的缓存，使得用户总是能够获得最新的版本。
- 跨平台兼容: pwa可以在各种设备上运行，无论是桌面还是移动设备，无论是ios还是android平台，都可以通过浏览器访问pwa。
- 优化的性能: pwa借助了现代web技术，如http/2、webassembly、webgl等，可以提供更快的加载速度和更流畅的用户体验。
- 可发现性和易分享性: pwa与传统网页一样易于被搜索引擎检索，同时还可以通过url进行分享，用户可以通过简单的链接分享给他人，无需下载安装即可访问。
pwa的基本组成部分
- app shell: 包含应用的基本结构，如导航、布局等，通常是通过html和css实现的。
- service worker: 负责管理缓存和处理网络请求，以实现离线访问和其他高级功能。
- web app manifest: 提供关于应用的元数据，如名称、图标、主题色等，使得pwa可以在主屏幕上被添加为原生应用的快捷方式。
- app content: 应用的实际内容，通常是动态生成的，可以是html、javascript等。
接下来，让我们来看一个简单的pwa示例代码：
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>my pwa example</title>
<link rel="manifest" href="/manifest.json" rel="external nofollow" >
<style>
/* css styles for app shell */
</style>
</head>
<body>
<!-- app shell -->
<header>
<h1>welcome to my pwa</h1>
</header>
<nav>
<ul>
<li><a href="/" rel="external nofollow" >home</a></li>
<li><a href="/about" rel="external nofollow" >about</a></li>
</ul>
</nav>
<main>
<!-- app content -->
<p>this is the main content of the app.</p>
</main>
<!-- service worker registration -->
<script>
if ('serviceworker' in navigator) {
window.addeventlistener('load', function() {
navigator.serviceworker.register('/service-worker.js')
.then(function(registration) {
console.log('service worker registered with scope:', registration.scope);
}, function(err) {
console.log('service worker registration failed:', err);
});
});
}
</script>
</body>
</html>留给看客的话
看不懂可问jsjiami官网客服了解详情。
到此这篇关于js加密解密之保存到桌面书签的文章就介绍到这了,更多相关js保存到书签内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论