PWA All In One

PWA All In One

PWA All In One

chrome://apps/

PWA

Progressive Web App

2. 可安装，添加到主屏
3. 离线使用
4. 轻量，快速
5. 基于 Web 技术一套代码多端复用(移动端，桌面端，浏览器)

​

PWABuilder

Quickly and easily turn your website into an app!

​

$ git clone https://github.com/pwa-builder/pwa-starter.git

​

demos

Pinterest

​

2. 安装后，全屏打开独立的窗口

3. 系统应用启动栏可以看到独立的 App Logo

4. 可卸载，可重新在 浏览器中打开

​

fetch(`https://api.darksky.net/forecast/1dda89e902ce89b77ed2412eac3026d8/40.7720232,-73.9732319`)
.then(response => response.json())
.then(json => {
    connsole.log(`json = ${json}`);
    return json || null;
})
.catch(err => console.error(err));

/**
 * Get's the latest forecast data from the network.
 *
 * @param {string} coords Location object to.
 * @return {Object} The weather forecast, if the request fails, return null.
 */
function getForecastFromNetwork(coords) {
  const url = `https://api.darksky.net/forecast/1dda89e902ce89b77ed2412eac3026d8/${coords}`;
  // const url = `/forecast/${coords}`;
  return fetch(url)
    .then((response) => {
      return response.json();
    })
    .then(json => {
      console.log(`network json`, json);
    })
    .catch((err) => {
      console.error('Error getting data from cache', err);
      return null;
    });
}

/**
 * Get's the cached forecast data from the caches object.
 *
 * @param {string} coords Location object to.
 * @return {Object} The weather forecast, if the request fails, return null.
 */
function getForecastFromCache(coords) {
  // CODELAB: Add code to get weather forecast from the caches object.
  if (!('caches' in window)) {
    return null;
  }
  // API ??? bug
  // api_conditions_url = "https://api.darksky.net/forecast/" + DARKSKY_API_KEY + "/" + GPS_COORDS + "?units=auto"
  const url = `https://api.darksky.net/forecast/1dda89e902ce89b77ed2412eac3026d8/${coords}`;
  // const url = `${window.location.origin}/forecast/${coords}`;
  return caches.match(url)
    .then((response) => {
      if (response) {
        return response.json();
      }
      return null;
    })
    .then(json => {
      console.log(`cache json`, json);
    })
    .catch((err) => {
      console.error('Error getting data from cache', err);
      return null;
    });
}