【第1097期】构建离线web应用之一

正文

请到「今天看啥」查看全文

优化

我的想法是，如果 PWA（或者 service workers）技术成熟并且被大规模应用的话，为什么不节省掉：

• 前往应用商店

• 下载并不常用的 app 呢？

当我们接下来谈到 Web Manifest 时，你就意识到只要给你的 web 应用新增一个桌面 icon，web 应用就可以通过点击这个 icon 实现启动了。

一些公司已经在 PWA 方面做的比较好了，你可以在这个网址上面找到这些公司：pwa.rocks

开发准备

我们已经介绍了足够多的理论知识了。这是一个手把手的教程，来吧，让我们动起手来。首先，按照下面的结构来创建一个新的项目：

|--pwa-demo
|----css
|----fonts
|----images
|----js
|----index.html
|----service-worker.js

下载 Materialize 这个 UI 库，用里面 CSS、Fonts、js 文件分别替换项目里面的文件夹。

打开 index.html 文件，引入一些资源：

  
    

      
      "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      
      "text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
      "text/css" rel="stylesheet" href="css/app.css">

      
      "viewport" content="width=device-width, initial-scale=1.0"/>
    

    

      Body coming soon

      
      
      
      
    
  

我们已经引入了下载好的文件，还需要自己在相应的目录创建一下 app.css 以及 app.js 这两个文件。

注册 Service Worker

越早在浏览器注册，Service Worker 就能越早的开始工作。最佳的做法是在应用的入口。在这个项目中，我们可以在 app.js 注册一个新的 worker：

(function(){
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
     .register('/service-worker.js')
     .then(function()

请到「今天看啥」查看全文