Skip to content

Instantly share code, notes, and snippets.

@umamichi

umamichi/file0.html

Last active June 27, 2019 04:56
Show Gist options
  • Save umamichi/53910aab3b81b9471029990545dd65ff to your computer and use it in GitHub Desktop.
Save umamichi/53910aab3b81b9471029990545dd65ff to your computer and use it in GitHub Desktop.
Download ZIP
PWA 入門 〜iOS SafariでPWAを体験するまで〜 2019年7月更新 ref: https://qiita.com/umamichi/items/0e2b4b1c578e7335ba20
Raw
file0.html
<!-- index.html -->
<html>
<head>
<title>github pages test</title>
</head>
<body>
<h1>github pages test</h1>
</body>
</html>
Raw
file0.txt
あなたのユーザーネーム.github.io
Raw
file1.html
<!-- index.html -->
<html>
<head>
<title>github pages test</title>
</head>
<body>
<h1>github pages test</h1>
</body>
</html>
Raw
file1.txt
{
"name": "PWA Sample",
"short_name": "PWA",
"background_color": "#fc980c",
"icons": [{
"src": "./icon-256.png",
"sizes": "256x256",
"type": "image/png"
},{
"src": "./icon-192.png",
"sizes": "192x192",
"type": "image/png"
}],
"start_url": "./?utm_source=homescreen",
"display": "standalone"
}
Raw
file2.txt
"start_url": "./?utm_source=homescreen",
Raw
file3.txt
"display": "standalone"
Raw
file4.txt
// service-worker.js
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
});
self.addEventListener('activate', function(e) {
console.log('[ServiceWorker] Activate');
});
// 現状では、この処理を書かないとService Workerが有効と判定されないようです
self.addEventListener('fetch', function(event) {});
Raw
file5.html
<!-- index.html -->
<html>
<head>
<!-- manifest.jsonを呼び出しています -->
<link rel="manifest" href="./manifest.json">
<script>
// service workerが有効なら、service-worker.js を登録します
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./service-worker.js').then(function() { console.log('Service Worker Registered'); });
}
</script>
<title>Hello PWA.</title>
<style>
body {
text-align:center;
font-size: 40px;
vertical-align: middle;
}
.image {
width: 80%;
margin: auto;
display: block;
}
</style>
</head>
<body>
<h1>Hello PWA.</h1>
<img src="./pwa-logo.svg" alt="PWA logo" class="image" />
<a href="p.html">p.html</a>
</body>
</html>
Raw
file5.txt
// service-worker.js
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
});
self.addEventListener('activate', function(e) {
console.log('[ServiceWorker] Activate');
});
// 現状では、この処理を書かないとService Workerが有効と判定されないようです
self.addEventListener('fetch', function(event) {});
Raw
file6.html
<!-- p.html -->
<html>
<head>
<title>Hello PWA. p.html</title>
<style>
body {
text-align:center;
font-size: 40px;
vertical-align: middle;
}
.image {
width: 80%;
margin: auto;
display: block;
}
</style>
</head>
<body>
<h1>p.html</h1>
<img src="./p-chan.jpg" alt="p-chan" class="image" />
<a href="index.html">index.html</a>
</body>
</html>
Raw
file7.html
<!-- p.html -->
<html>
<head>
<title>Hello PWA. p.html</title>
<style>
body {
text-align:center;
font-size: 40px;
vertical-align: middle;
}
.image {
width: 80%;
margin: auto;
display: block;
}
</style>
</head>
<body>
<h1>p.html</h1>
<img src="./p-chan.jpg" alt="p-chan" class="image" />
<a href="index.html">index.html</a>
</body>
</html>
Raw
file7.txt
<meta name="apple-mobile-web-app-capable" content="yes">
Raw
file8.txt
<meta name="apple-mobile-web-app-status-bar-style" content="black">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment