示例代码和环境配置

下载示例代码

你可以下载本 progressive web app 引导指南需要的所有代码。

将下载好的zip文件进行解压缩。这将会解压缩一个名为(your-first-pwapp-master)的根文件夹。这文件夹包含了这指南你所需要的资源。

名为 step-NN 的文件夹则包含了这指南每个步骤的完整的代码。你可以把他当成参考。

安装及校验网络服务器

你可以选择其他的网络服务器，但在这个指南我们将会使用Web Server for Chrome。如果你还没有安装，你可以到 Chrome 网上应用店下载。

安装完毕后，从书签栏中选择Apps的快捷方式:

 

接下来点击Web Server的图标

 

你将会看到以下的窗口，这让你配置你的本地网络服务器:

 

点击 choose folder 的按钮，然后选择名为 work 的文件夹。这会把目录和文件都以HTTP的方式展示出来。URL地址可以在窗口里的 Web Server URL(s) 找到。

在选项中，选择"Automatically show index.html" 的选择框:

 

然后在 "Web Server: STARTED" 的按钮拉去左边，在拉去右边，以将本地网络服务器关闭并重启。

 

现在你可以使用游览器来访问那个文件夹(点击窗口内的Web Server URL下的链接即可)。你将会看到以下的画面:

 

很明显的，这个应用程序并没有什么功能。现在只有一个加载图标在那里转动，看到这个界面，就说明你的网络服务器可以正常工作。在接下来的步骤，我们将会添加更多东西。