网页做成app（即将一个网页封装成一个独立的手机应用程序）是一项非常有用的技能。许多网站拥有大量的用户，在移动端上为他们提供更好的用户体验，便捷的访问方式和更好的性能将大大提高他们的用户满意度。本文将介绍怎样将一个网页转换为手机应用程序。
1. 什么是pwa
渐进式web应用程序（pwa）是一种新兴的移动网络应用程序。它具有原生应用程序的某些功能，例如运行在桌面上、离线可用、推送通知、加快加载速度并为用户提供安装选项等等。pwa是基于web技术栈构建的，因此我们无需安装第三方应用程序来访问它。多数操作系统支持pwa。pwa的实现有很多的框架和库，比如google官方的pwa框架——workbox，通过使用这些框架能极大地增加pwa开发的效率。
2. 使用webview来封装网页
webview是一种用于在android应用程序中显示web页面的类（ios平台也有类似的机制），我们可以通过webview将网页封装成一个应用程序。
以下是实现的步骤：
第一步: 创建一个android项目，命名为webviewapp；
第二步: 在androidmanifest.xml文件中添加internet权限（因为webview需要使用网络来加载网页）：
```
```
第三步: 在mainactivity中的oncreate方法中，通过webview加载网页：
```
public class mainactivity extends appcompatactivity {
private webview webview;
@override
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.activity_main);
webview = findviewbyid(r.id.webview);
websettings websettings = webview.getsettings();
websettings.setjavascriptenabled(true);
webview.setwebviewclient(new webviewclient());
webview.load;
}
}
```
这里我们加载了百度的网页。我们还可以在webview中实现其它的功能，例如设置缓存、启用javascript，并且webchromeclient提供了对弹窗和其他ui的访问控制。
第四步: 添加webview到布局文件中：
```
android:id="@ id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
```
添加完成后，启动应用程序，你会发现webview已经加载了百度的网页。
第五步: 将应用程序打包并部署到设备上。我们可以通过android studio的打包签名工具来生成apk文件。然后通过adb命令将它安装到设备上。
以上步骤就是将一个网页通过webview封装为一个独立的android应用程序的完整流程。不过，webview一般不会支持原生应用程序的某些功能，比如离线存储和推送消息等。而pwa则可以解决这些限制。
3. 使用pwa技术封装网页
pwa是基于web技术实现的，它使用serviceworker抽象出了各种本地应用程序的功能，例如离线存储、推送通知等。下面是将网页封装成一个pwa的步骤。
第一步: 创建一个包含manifest.json文件和icon的web应用程序
manifest.json文件提供了有关pwa应用程序的元数据和其它信息，例如应用程序名称、图标、起始页面等信息，我们可以在manifest.json文件中进行设置。例如：
```
{
"name": "awesome app",
"short_name": "app",
"icons": [
{
"src": "/images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/images/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/?utm_source=homescreen",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
```
可以看到，我们设置了应用程序名称、图标、起始页面、显示方式、主题颜色和背景颜色等信息。
第二步: 将网页pwa化
我们需要将网页转换成pwa。现代浏览器中都支持pwa，例如chrome浏览器，我们可以通过lighthouse来检查网站是否已经转化，lighthouse是一个chrome插件，它可以评估一个网站是否符合pwa要求，并提供优化建议。
第三步: 部署到服务器上
我们可以将pwa应用程序部署到一个web服务器上，这样用户就可以在其设备上通过浏览器访问应用程序了。
第四步: 使用web应用程序的链接将它添加到设备主屏幕上
现代浏览器支持将web应用程序添加到设备主屏幕上以形成原生应用程序的感觉。当用户通过浏览器访问应用程序，并点击“添加到主屏幕”按钮时，会将应用程序添加到设备主屏幕上。
本文介绍了将网页转换为手机应用程序的两种方法——使用webview和pwa技术。webview非常适合简单的网页，而pwa技术则适用于复杂的应用程序。无论你采用哪种方法，你都可以通过将网页封装为应用程序，为你的访问者提供更好的用户体验。
