Progresema ttt-aplikaĵo (PWA) estas speco de aplikaĵa programaro liverita per la ttt, konstruita per oftaj interretaj teknologioj inkluzive de HTML, CSS kaj JavaScript. Ĝi intencas funkcii sur iu ajn platformo, kiu uzas normon-konforman retumilon, inkluzive de labortablaj kaj poŝtelefonoj. Ĉar progresema retprogramo estas speco de retpaĝo aŭ retejo konata kiel retprogramo, ili ne bezonas apartan grupigon aŭ distribuadon. Estas neniu postulo por programistoj aŭ uzantoj instali la retajn programojn per ciferecaj distribuaj sistemoj.
Jen la paŝoj por konverti vian retejon en PWA.
1. Manifesta registrado
Antaŭ ol instali la PWA, la retumilo devas kontroli ĉu la manifesta dosiero jam ekzistas. Vi povas uzi iun ajn el ĉi tiuj manieroj por registri servan laboriston.
a. Konekti
Instalu skripto-kromaĵon kaj aldonu ĉi tiun kodon.
<link rel="manifest" href="/eo/manifest.json">b. Temodosierredaktilo
Antaŭ ol uzi ĉi tiun metodon, certigu, ke vi konservas kompletan dokumentadon kaj sekurkopion de via WordPress-retejo.
- Iru al WP Admin > Aspekto > Temo Dosiera Redaktilo.
- elektu functions.php.
- Enigu la sekvan kodon ĉe la lasta linio en la functions.php.
//manifest file
add_action( 'wp_head', 'inc_manifest_link' );
// Creates the link tag
function inc_manifest_link() {
echo '<link rel="manifest" href="/eo/manifest.json">';
}2. Manifesta dosiero
La retprograma manifesto estas W3C-specifo difinanta JSON-bazitan manifeston (kutime etikeditan manifest.json) por doni al programistoj centralizitan lokon por meti datumojn asociitajn kun retprogramo inkluzive:
- La nomo de la retejo-aplikaĵo.
- Ligiloj al la ikonoj aŭ bildaj objektoj de la retejo.
- La preferata URL por lanĉi aŭ malfermi la retejon.
- La datumoj de agordo de la retejo.
- Defaŭlta orientiĝo de la TTT-apliko.
- La opcio por agordi la ekranreĝimon, ekz, plenan ekranon.
Ĉi tiuj metadatenoj estas decidaj por ke aplikaĵo estu aldonita al hejma ekrano aŭ alie listigita kune kun indiĝenaj programoj. Kreu novan dosieron nomitan manifest.json en la radiko de via retejo. La dosiero devus kunporti la jenon.
{
"name": can be used by app stores or browsers on startup screens and prompts.
"short-name": used to display the name to the user within the icon. For example: in the homescreen.
"description": provides additional context about the app.
"dir": Direction of the text.
Values: ltr(left to right),
rtl (right to left),
auto
"lang": Language of the text.
Example: en (English)
"icons": Array of icons that the browser can choose from, including size and type.
[{
"src": source,
"sizes": i.e. "192x192",
"type": i.e. "image/png",
"purpose": the purpose of the image in the context of the host OS.
Values: badge, maskable, any
}]
"display": Preferred display mode for the website.
Values: fullscreen,
standalone,
minimal-ui,
browser.
"scope": it represents the set of urls that can be viewed through the installable web context, if the user navigates outside this scope, those pages will be opened in a standard browser.
Example:"https://example.com/", "/app/"
"orientation": you can enforce the orientation of your app, it can be ommited.
Example: natural (default).
"background_color": tells the browser what color to use on the startup splash screen that users will see when they launch your app.
Example: "#456BD9"
"theme_color": is used by some browsers to tint the status bar, address bar, and other parts of the browser user interface.
"start_url": indicates what page should launch when someone opens your progressive web app.
"categories": This is intended to be used by app stores to categorize your app.
Example: ["business", "technology", "web"]
}3. Serva laborista registrado
Ĉiu servo-laboristo devas esti registrita en la retumilo de la kliento. Servaj laboristoj trapasas triŝtupan vivociklon de registrado, instalado kaj aktivigo. Registrado implicas diri al la retumilo la lokon de la servisto en preparado por instalado. Kiel kun iu ajn alia Ĝavoskripto, vi ŝarĝas la skripton service-worker.js en via HTML. Post kiam ĝi funkcias, ĝi malfermos sian propran ekzemplon, do ne estos aliro al distribuitaj objektaj modelaj elementoj.
Vi povas uzi iun ajn el ĉi tiuj manieroj por registri servan laboriston.
a. Konekti
Instalu skripto-kromaĵon kaj aldonu ĉi tiun kodon.
<script src='/service-worker-register.js'></script>b. Temodosierredaktilo
Antaŭ ol uzi ĉi tiun metodon, certigu, ke vi konservas kompletan dokumentadon kaj sekurkopion de via WordPress-retejo.
- Iru al WP Admin > Aspekto > Temo Dosiera Redaktilo.
- elektu functions.php.
- Enigu la sekvan kodon ĉe la lasta linio en la functions.php.
//service worker registration
function register_my_service_worker () {
echo "<script>navigator.serviceWorker.register('/service-worker.js')</script>";
}
add_action ( 'wp_head', 'register_my_service_worker' );ĉ. index.xml
Aldonu la jenan kodon al via index.xml dosieron.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js', {
scope: './'
}).then(function (registration) {
var serviceWorker;
if (registration.installing) {
serviceWorker = registration.installing;
document.querySelector('#kind').textContent = 'installing';
} else if (registration.waiting) {
serviceWorker = registration.waiting;
document.querySelector('#kind').textContent = 'waiting';
} else if (registration.active) {
serviceWorker = registration.active;
document.querySelector('#kind').textContent = 'active';
}
if (serviceWorker) {
// logState(serviceWorker.state);
serviceWorker.addEventListener('statechange', function (e) {
// logState(e.target.state);
});
}
}).catch (function (error) {
// Something went wrong during registration. The service-worker.js file
// might be unavailable or contain a syntax error.
});
} else {
// The current browser doesn't support service workers.
// Perhaps it is too old or we are not in a Secure Context.
}4. Serva laborista dosiero
Serva laboristo estas interreta laboristo, kiu efektivigas programeblan retan prokurilon, kiu povas respondi al retaj / HTTP-petoj de la ĉefa dokumento. Ĝi povas kontroli la haveblecon de fora servilo kaj kaŝmemori enhavon kiam tiu servilo disponeblas, kaj servi tiun enhavon poste al la dokumento. Servaj laboristoj trapasas triŝtupan vivociklon de registrado, instalado kaj aktivigo. Post registriĝo, instalado kaj aktivigo-cikloj sekvas.
Instalado okazas kiam neniu serva laboristo estas instalita en la retumilo por la retapo, aŭ se estas ĝisdatigo de la serva laboristo. Aktivigo okazas kiam ĉiuj PWA-paĝoj estas fermitaj, tiel ke ne ekzistas konflikto inter la antaŭa versio kaj la ĝisdatigita. La vivociklo ankaŭ helpas konservi konsekvencon dum ŝanĝado inter versioj de serva laboristo, ĉar nur unu serva laboristo povas esti aktiva por domajno.
Kreu novan dosieron nomatan "servo-laboristo.js”En la radiko de via retejo kaj aldonu la suban kodon.
var CACHE_NAME = 'cache-v1';
var urlsToCache = [
'/'
];
self.addEventListener('install', function(event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
return response;
}
return fetch(event.request);
}
)
);
});
self.addEventListener('activate', function(event) {
var cacheWhitelist = ['cache-v1'];
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});
