Popular blog tags

How to create ASP.NET Core PWA youself step by step?

Published

 

Step 1: Create a website

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A2HS demo</title>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <img src="images/fox1.jpg" alt="a fox picture">
    </body>
</html>

Step 2:Add to Home screen

Add your site to the home screen on their phone or desktop

First,Create a Manifest for your site.

为了实现PWA应用添加至桌面的功能,除了要求站点支持HTTPS之外,还需要准备 manifest.json文件去配置应用的图标、名称等信息.

<link rel="manifest" href="/manifest.json">

通过一系列配置,就可以把一个PWA像APP一样,添加一个图标到手机屏幕上,点击图标即可打开站点.

1.Manifest实现添加至主屏幕

<head>
  <title>Minimal PWA</title>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
  <link rel="manifest" href="manifest.json" />
  <link rel="stylesheet" type="text/css" href="main.css">
  <link rel="icon" href="/e.png" type="image/png" />
</head>

manifest.json

{
  "name": "一个PWA示例", // 必填 显示的插件名称
  "short_name": "PWA Demo", // 可选  在APP launcher和新的tab页显示,如果没有设置,则使用name
  "description": "The app that helps you understand PWA", //用于描述应用
  "display": "standalone", // 定义开发人员对Web应用程序的首选显示模式。standalone模式会有单独的
  "start_url": "/", // 应用启动时的url
  "theme_color": "#313131", // 桌面图标的背景色
  "background_color": "#313131", // 为web应用程序预定义的背景颜色。在启动web应用程序和加载应用程序的内容之间创建了一个平滑的过渡。
  "icons": [ // 桌面图标,是一个数组
    {
      "src": "/public/img/logo.png",
      "sizes": "144x144",
      "type": "image/png"
    }]
}

Second,Add button and js,you can   Add  a icon to Home screen when click it.

 

https://github.com/mdn/pwa-examples/blob/master/a2hs/index.html

 

other:

Add to home screen (A2HS)

The ability for a user to "install" a website and use it as if it was a natively installed app. To enable this behaviour, a website must serve a valid Web App Manifest and load it's assets through a Service Worker.

Useful links

https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps

https://github.com/NekR/offline-plugin