c# - 我们可以为 asp.net .web 表单创建 pwa-app 吗?
问题描述
我想用 asp.net webforms 创建一个 pwa。我无法理解如何注册服务工作者以及如何使网络应用程序可在线使用。
解决方案
您的问题的简短回答是“是”。
我已在我的 Web 表单 asp.net 站点上启动并运行它。
使用 Microsoft PWA 生成器。它超级简单,将为您节省一些时间。 https://www.pwabuilder.com/
我确实必须将我的 pwabuilder-sw.js 移动到我的根目录才能使其正常工作。对不起,这里的简短回答是一步一步的。请阅读代码中的注释。
第一步:创建 manifest.json 文件 - 您可以在此处找到有关 Web 应用程序清单文件的更多信息:
https
://developers.google.com/web/fundamentals/web-app-manifest
&
https://developer.mozilla。 org/en-US/docs/Web/Manifest
它最终会看起来像这样:
{
"name": "Longer Answer",
"short_name": "Not a short answer",
"start_url": ".",
"display": "standalone",
"background_color": "#fff",
"description": "A simply readable Longer Answer News app.",
"icons": [{
"src": "images/touch/homescreen48.png",
"sizes": "48x48",
"type": "image/png"
}, {
"src": "images/touch/homescreen72.png",
"sizes": "72x72",
"type": "image/png"
}, {
"src": "images/touch/homescreen96.png",
"sizes": "96x96",
"type": "image/png"
}, {
"src": "images/touch/homescreen144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "images/touch/homescreen168.png",
"sizes": "168x168",
"type": "image/png"
}, {
"src": "images/touch/homescreen192.png",
"sizes": "192x192",
"type": "image/png"
}]
}
第二步:创建一个服务工作者。服务工作者可以使您的站点离线工作、运行得更快,或两者兼而有之。以下示例将是一个高级缓存服务工作者,它允许您配置以不同方式缓存的文件和路由(预缓存、服务器优先、缓存优先等)。该脚本可用于构建一个可以离线工作的闪电般的快速应用程序(即使对于动态内容)。更多关于 Service Worker 的信息:https ://developers.google.com/web/fundamentals/primers/service-workers
文件名:register-sw.js
// This is the "Offline page" service worker
// Add this below content to your HTML page, or add the js file to your page at the very top to register service worker
// Check compatibility for the browser we're running this in
if ("serviceWorker" in navigator) {
if (navigator.serviceWorker.controller) {
console.log("[PWA Builder] active service worker found, no need to register");
} else {
// Register the service worker
navigator.serviceWorker
.register("pwabuilder-sw.js", {
scope: "./"
})
.then(function (reg) {
console.log("[PWA Builder] Service worker has been registered for scope: " + reg.scope);
});
}
}
文件名:pwa-sw.js
//This is the service worker with the Advanced caching
const CACHE = "pwabuilder-adv-cache";
const precacheFiles = [
/* Add an array of files to precache for your app */
];
// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html";
const offlineFallbackPage = "ToDo-replace-this-name.html";
const networkFirstPaths = [
/* Add an array of regex of paths that should go network first */
// Example: /\/api\/.*/
];
const avoidCachingPaths = [
/* Add an array of regex of paths that shouldn't be cached */
// Example: /\/api\/.*/
];
function pathComparer(requestUrl, pathRegEx) {
return requestUrl.match(new RegExp(pathRegEx));
}
function comparePaths(requestUrl, pathsArray) {
if (requestUrl) {
for (let index = 0; index < pathsArray.length; index++) {
const pathRegEx = pathsArray[index];
if (pathComparer(requestUrl, pathRegEx)) {
return true;
}
}
}
return false;
}
self.addEventListener("install", function (event) {
console.log("[PWA] Install Event processing");
console.log("[PWA] Skip waiting on install");
self.skipWaiting();
event.waitUntil(
caches.open(CACHE).then(function (cache) {
console.log("[PWA] Caching pages during install");
return cache.addAll(precacheFiles).then(function () {
if (offlineFallbackPage === "ToDo-replace-this-name.html") {
return cache.add(new Response("TODO: Update the value of the offlineFallbackPage constant in the serviceworker."));
}
return cache.add(offlineFallbackPage);
});
})
);
});
// Allow sw to control of current page
self.addEventListener("activate", function (event) {
console.log("[PWA] Claiming clients for current page");
event.waitUntil(self.clients.claim());
});
// If any fetch fails, it will look for the request in the cache and serve it from there first
self.addEventListener("fetch", function (event) {
if (event.request.method !== "GET") return;
if (comparePaths(event.request.url, networkFirstPaths)) {
networkFirstFetch(event);
} else {
cacheFirstFetch(event);
}
});
function cacheFirstFetch(event) {
event.respondWith(
fromCache(event.request).then(
function (response) {
// The response was found in the cache so we responde with it and update the entry
// This is where we call the server to get the newest version of the
// file to use the next time we show view
event.waitUntil(
fetch(event.request).then(function (response) {
return updateCache(event.request, response);
})
);
return response;
},
function () {
// The response was not found in the cache so we look for it on the server
return fetch(event.request)
.then(function (response) {
// If request was success, add or update it in the cache
event.waitUntil(updateCache(event.request, response.clone()));
return response;
})
.catch(function (error) {
// The following validates that the request was for a navigation to a new document
if (event.request.destination !== "document" || event.request.mode !== "navigate") {
return;
}
console.log("[PWA] Network request failed and no cache." + error);
// Use the precached offline page as fallback
return caches.open(CACHE).then(function (cache) {
cache.match(offlineFallbackPage);
});
});
}
)
);
}
function networkFirstFetch(event) {
event.respondWith(
fetch(event.request)
.then(function (response) {
// If request was success, add or update it in the cache
event.waitUntil(updateCache(event.request, response.clone()));
return response;
})
.catch(function (error) {
console.log("[PWA ] Network request Failed. Serving content from cache: " + error);
return fromCache(event.request);
})
);
}
function fromCache(request) {
// Check to see if you have it in the cache
// Return response
// If not in the cache, then return error page
return caches.open(CACHE).then(function (cache) {
return cache.match(request).then(function (matching) {
if (!matching || matching.status === 404) {
return Promise.reject("no-match");
}
return matching;
});
});
}
function updateCache(request, response) {
if (!comparePaths(request.url, avoidCachingPaths)) {
return caches.open(CACHE).then(function (cache) {
return cache.put(request, response);
});
}
return Promise.resolve();
}
第三步:测试以确保您的新 manifest.json 文件和脚本正常工作。
我知道两种测试 pwa 配置的方法:
打开谷歌开发工具并转到应用程序选项卡。然后在左侧单击 Service Worker。接下来选中顶部的框“重新加载时更新”。之后重新加载您的页面并观察结果。
使用灯塔审核现场。您可以在“审核”选项卡下的 Google 开发人员工具中找到它。
请让我知道,如果你有任何问题。
推荐阅读
- variables - 如何使用变量 GAMS 添加条件
- flutter - Flutter:flutter 1.22 更新后,Lineargradient 属性出现错误
- python - python tkinter中的get()方法
- oracle - 当我只知道与 sqlplus 一起使用的凭据时,如何使用 sqldeveloper 登录到 Oracle12c?
- c# - 制作一个httpclient静态下载器
- java - java中python的DataFrame类结构有哪些选择?
- reactjs - 在生产中部署 reactjs 的最低要求是什么?
- c# - 具有两种不同返回类型的接口,直到运行时才知道
- preview - 强制一个特定的测试变体作为谷歌优化中的预览
- python - 绘制每个 x 值的 y 值的平均值